Why does my React app start on my Backend port? - node.js

I have a React and NodeJS app. Here is my server/index.js file:
const express = require('express');
const bodyParser = require('body-parser');
require('dotenv').config();
const app = express();
app.use(bodyParser.json());
const items_controller = require('./controllers/items_controller');
app.get('/items', items_controller.getAllItems);
const port = process.env.BACKEND_PORT; // 3333
const server = app.listen( port, () => console.log(`Listening on port: ${port}`) );
When I'm doing npm start it's trying to start React server on my backend server which is 3333 when by default it's 3000. Does anybody know a reason?

There are two possible reasons for this issue:
You might be having something running on PORT 3000(check if any process is using it)
If this is the case, react-scripts will find next available free port (which is probably 3333?) and start the server there.
You might have exported PORT environment variable.
If PORT environment variable is available react-scripts uses it to start the server.

Related

Elastic Beanstalk Problem: Connection timing out when running my Node.js Express server

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.

writing a test for "if (require.main === module) { app.listen(port); }" for a nodeJS express app

I'm teaching myself TDD for NodeJS with Express, and I'm trying to be strict by writing tests first with Jest.
I can't really think of a way to write a test for the last 3 lines in this file "index.js":
const path = require('path');
const express = require('express');
const app = express();
const port = 3000;
app.get('/test', async (req, res) => {
res.json({message: 'pass!'});
});
app.use(express.static(path.join(__dirname, '../client/public')));
module.exports = app;
if (require.main === module) {
app.listen(port);
}
I'm not sure how important it is to write a test for something like this, but I think understanding how to write a test for the above code might help me understand how importing with node works. Anybody got an idea?
Test #1:
Verify no web server is running on port 3000.
Load this module as a top level module.
Verify that a web server is now running on port 3000.
Kill that process.
Test #2:
Verify that no web-server is running on port 3000.
Load this module as a sub-module from a top level module that does nothing else but load this module.
Verify that no web server is running on port 3000.

Express Generator ignores port setting

I am using the following code to set the port to 3004 in an express generator app, right above module.exports = app;
// app.js
const PORT = 3004;
app.set('port', PORT);
app.listen(PORT, () => {
console.log(`app listening on port ${PORT}`);
});
I tried using app.set based on this other topic: Node.js/Express.js App Only Works on Port 3000
And app.listen is suggested in the official docs.
They don't work together or in isolation. Running npm start reverts to port 3000, which crashes the app in my case since I'm using that port for another app (also express generator based).
I do not have this issue when starting from my own express app from scratch. Therefore I believe express generator is hiding the port configuration elsewhere and overriding my settings.
Does anyone know where to set the port or disable the overriding setting?
"express": "~4.16.0"
When you use the generator you get a bin folder In your bin folder in www is where the port is set like so:
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
This is where you can change it...

Upload react basic application to server

I am trying to upload the following to my personal server to see how it works:
https://github.com/remarkablemark/universal-react-tutorial
I have tried to change the port here: (server.js)
require('babel-register')({
presets: ['react']
});
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(require('./routes/index.jsx'));
var PORT = 80;
app.listen(PORT, function() {
console.log('http://localhost:' + PORT);
});
but when I type the corresponding url I get this:
**
Index of /ReactServer
Parent Directory
Component.jsx
client.js
public/
routes/
server.js
webpack.config.js
Apache Server at www.alessandrosantese.com Port 80
**
I can see the app working fine at http://localhost:3000/ but I would like to test it on the server (I have never deployed a react application on a live server)
This is more of deploying node.js to remote server.
I would recommend you to use heroku
Follow these steps to deploy your app easily to their servers.

Linking nodejs server to tomcat server

I had created server in nodejs and creates routes using express....
while calling that services from tomcat server i am getting error
can anyone help me how to configure that in tomcat
var express = require('express');
var app = express();
var port = process.env.PORT || 3000;
app.listen(port);

Resources