Having some trouble deploying react app and express/node.js backend on same port

Question

I want to serve my react front-end on localhost:5000, and the api requests will go to localhost:5000/api/some-path.

I have seen some similar questions and from what I have understood :

Add proxy in package.json
Serve static files from build folder

relevant part of package.json:

  "proxy" : "http://localhost:5000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Relevant part of server.js :

const PORT = 5000 || process.env.port;
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req,res) {
  res.sendFile(path.join(__dirname, '../public', 'index.html'));
});

Commands for production :

$ npm run build
$ serve -s build

The issue is that, each fetch request's response is the index.html file.

Note that, in the dev build everything was working fine. I was starting react app from port 3000 and requests were going to localhost:5000/api/path responding with json data.

Bitter-jackfruit · Accepted Answer · 2020-09-04 17:17:38Z

1

The problem was with this line : app.use(express.static(path.join(__dirname, 'build'))); The build folder was outside the folder which contains the file server.js. Corrected to : app.use(express.static(path.join(__dirname, '../build')));

answered Sep 4, 2020 at 17:17

Bitter-jackfruit

8510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryu · Accepted Answer · 2020-09-04 16:11:44Z

0

As someone new to code, I've recently had a hard time deploying react and node. How I ended up doing it was:

Build the react app with npm run build
Copy the build folder in the root of the node.js project
Include this code in the index or app.js

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req,res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = 5000 || process.env.port;
app.listen(PORT, ()=> console.log(`Listening on port ${PORT}...`));

Start the app with node index.js or node app.js and that's it

answered Sep 4, 2020 at 16:11

Ryu

312 bronze badges

Collectives™ on Stack Overflow

Having some trouble deploying react app and express/node.js backend on same port

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related