I have been developing an app from the create-react-app starting project.
Today I have been doing the following on my local machine:
deploying my react app using react-scripts start
deploying my react app by using react-scripts build then either serving the build by either...
(A) using the [npm module serve][] as follows serve -p 4001
(B) or attempting to server using a express app like follows:
Express app:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(4001);
I've just restarted my computer and it's still serving the site at:
http://localhost:4001/ and I cannot figure out how to stop it.
I wouldn't mind the continuous deployment of this server but when I build the project again. The changes are not reflected.
The only work around I've come up with is to now deploy at port 4025 and use the Express method coded above.
How the hell can I get rid of this weird residual app that continues to run (via some react process) at port 4001?
I'd really like that port back for sake of keeping it the same across different machines :(
Turns out that chrome keeps react apps running even if the server stops providing them.
Go to chrome://serviceworker-internals and unregister them.
Related
I created a frontend app and now trying to incorporate backend into it.
ON the same frontend app i added an index.js file in the root directory, and installed express and required it in index.js file.
Very basic setup as below:
const express = require('express')
const cors = require('cors')
const port = process.env.PORT || 3001
const app = express()
app.get('/', (req, res) => {
res.send({
greetings: 'hi'
})
})
app.listen(port, () => {console.log(`Server on port ${port}`)})
Server is successfully on port 3001 as per my terminal, however, on localhost:3001 I'm not seeing any json response I set up in app.get.
It says Cannot GET / instead. When i inspected in devtool(Network) it says 404.
This seems a very straightforward setup, but what could've gone wrong here?
i just figured why. I installed nodemon but my “start” script is “node index.js”. Should’ve used “nodemon index.js”
Working now with nodemon index.ks
Your code is fine, There are no errors, I tested it and it works as expected.
However few things to note, Keep Backend in Seperate folder/dirctory unless required.
Coming back to your question, There are many possiblity such as some modules are not installed properly
try running following command
//this will install if any library is currupt or not installed properly
npm i
if it doesn't work then try clearing cache
Also keep in mind, In nodeJS dev server does not automatically refresh changes, you need to restart server to see changes or you can use dev dependancy called Nodemon (this will auto restart server on saving changes)
I'm trying to deploy my MERN app on Elastic Beanstalk, and I seem to be running into a final problem that I just cannot solve.
My app works fine when running my server locally (running node server), but when running on elastic beanstalk, the page never loads.
Upon inspection, the static elements are not being loaded, as seen in Dev Tools:
Image showing ERR_CONNECTION_TIMED_OUT in dev tools
I checked all the EB logs and did not find any errors or helpful messages.
I'm thinking the problem is with EB not being able to find my static files somehow. It should however, my build files are not ignored by git and are deployed to EB.
Here's some background about my project:
My backend and client code are in one project, with the following structure:
project
server.js
frontend
build
static
index.html
I run my app by building the react site, then running "node server" which runs great
Here is the relevent code from my server.js :
const port = process.env.PORT || 8081;
app.use(express.static(path.join(__dirname, 'frontend/build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'frontend/build/index.html'));
});
app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});
The server is successfully sending logs that the server is running and that the database has established a connection. So it seems the server is fine, it's just that the front-end is the problem.
eb config file:
option_settings:
aws:elasticbeanstalk:container:nodejs:
NodeCommand: "npm start"
aws:elasticbeanstalk:application:environment:
PORT: 8081
NODE_ENV: production
aws:elasticbeanstalk:container:nodejs:staticfiles:
/static: /frontend/build/static
I'm at a loss on how to solve this. The EB was deployed through the CLI and I haven't messed with any settings. I'm letting EB know where my static files are, and I believe it would say not found, rather than timing out.
Any help would be appreciated
Solved.
The problem was with using Helmet in my express server. I had ommited the code, thinking it not relevant, but here is the top portion of server.js, with the last line being the relevant portion:
const AWS = require('aws-sdk');
const cors = require('cors');
const express = require('express');
const helmet = require('helmet');
const mongoose = require('mongoose');
const path = require('path');
let Download = require('./models/Download.js');
require('dotenv').config();
const app = express();
const port = process.env.PORT || 8081;
app.use(helmet());
Not using helmet solves the issue.
To be honest, I'm not sure why this is the problem.
I assume that the problem is that helmet provides some security that my bare bones EB simply is not providing.
EDIT: Specifically, the problem is with CSP. Setting contentSecurityPolicy to false in Helmet is enough to fix the issue.
I've got a question regarding building applications. I'm using simple VPS with node.js support. Now I do not know how to build my next.js application to production.
I want to deploy my application as static files.
I thought that I should use next build && next export then copy out dir to the server but during this process, I faced some issues - when I change route - everything is okay, but if I refresh the page - the page is not found because the server is looking for this file in directories. So how can I deploy my nextjs application in production mode with VPS server and static files?
I tried one thing which is not working fine probably or I did something wrong.
I added nodejs express server with
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const router = express.Router();
const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
and start server with forever library NODE_ENV=production node server.js and it's working fine, but seems this is working in a wrong way - seems it's normal server like in dev mode - so it shouldn't be like that. (I see thunder icon on the right-bottom corner and I see all files which are same as in dev mode).
I want to deploy everything as static files.
Thank you for your help!
After you build and export you need to serve those files somehow. The reason the Express server works is because you are starting a HTTP server to serve the files.
So you need to serve those files either by using a static hosting provider (i.e. Vercel or Amazon S3). Otherwise you should start a server on your linux machine using something like serve to serve it at a port, similar to your Express server serving it as localhost:3000 which is then exposed on your VPS.
I have an Angular 6 application and an existing nodejs api application.
So far I have used
ng serve
to run and build the angular application.
I now want to serve my angular application from the existing node js server.
How do I do that ? I can't find any documentation.
Steps:
Do ng build, It will create a dist folder which you can easily serve from node webserver framework like express, Hapi or Koa
if you are using express.js you can server angular app.use(express.static(path.join(__dirname, 'dist')));
Now use node server URL to serve angular like http://localhost:nodeport
If you are using Hapi: check this out https://hapi.dev/tutorials/servingfiles/?lang=en_US
================================basic express server================
const express = require('express');
const app = express();
const path = require("path");
const fs = require("fs");
//const bodyParser = require('body-parser');
app.use(express.static(path.join(__dirname, 'dist')));
//app.use(bodyParser.json());
//app.use('/api/v1/', require('./api/routes'));
app.listen(8080,function(err){
if(!err){
console.log("server is running at port:8080);
}
})
You have two ways of serving an Angular SPA:
Usually dev: the Webpack-run server, which is ng serve. Dynamic in the sense that any modification to a file starts a rebuild and updates the output.
Usually prod: you build all the html/js files (with ng build [...]) for the SPA to be statically served by a node server.
In your case, if you'd like to use an existing node server, it means you'll have to build the files (with ng build) and then hook up the usual node static files serving snippet in your node app.
Beware though: you'll have to do a full build each time you want to update the display. So it's ok if it's not that often, but not ok for a dev environment I guess.
I am trying to run the google assistant example webhook nodejs application(index.js) on my own server, but don't know what is the webhosting setup for this..
https://codelabs.developers.google.com/codelabs/your-first-action-on-google-with-webhook/#2
What is the environment to run this app on my server? Since it's not running as a listening server, I can't use nginx, node_cgi is not mature with apache, how am I supposed to run this sample?
Excellent point, and you should be sure to file a bug request on the page to indicate it is unclear.
The code, as presented, is meant to run using Google Cloud Functions.
This doesn't mean you can't run it on your own server - just that you need to know how to run a Node.js server outside of your Apache or Nginx environment. I've seen a number of configurations, but typically you'll have the Node.js server application running and listening to a local port and have a proxy between your externally facing web server at a particular path and this port.
But even that isn't sufficient in this case - the code itself doesn't listen on a port - it expects to be handed a request and response object in the form that Express.js with a JSON middleware can handle. To do that, you'll need to have installed the Express.js library and then start listening with code such as:
const express = require('express');
const app = express();
app.use( express.json() );
app.get('/', (req, res) => exports.bitcoinInfo( req, res ));
app.listen(3000, () => console.log('App listening on port 3000!'));
Thanks for the help to #Prisoner and #Ido Green link works even better! The minimum to run the sample I did the following:
Create a new nodejs project with mainfile main.js, install express and actions-on-google
mkdir googleActionServer
cd googleActionServer
npm init
npm install --save actions-on-google
npm install --save express`
Copy the index.js from google and put this into main.js
const express = require('express');
const bitcoinInfo = require("./index");
const app = express();
app.use( express.json() );
app.post('/', (req, res) => bitcoinInfo.bitcoinInfo( req, res ));
app.listen(3000, () => console.log('App listening on port 3000!'));
Start the application by running:
node ./main.js
To test with DialogFlow, download and install ngrok to /usr/local/bin for ex and then run:
ngrok http 3000
Ngrok will give you an url that is accesible from outside and forward the requests to the nodejs app. It will also create a https for you, so copy paste the https address into DialogFlow webhook address and you are set to go