Set up proxy server for create react app

Question

I have started a react application using create-react-app and ran the npm run eject script to gain access to all files. I afterwards installed express and created server.js file that sits on same level as package.json file

these are server.js file contents:

const express = require('express');
const app = express;

app.set('port', 3031);

if(process.env.NODE_ENV === 'production') {
  app.use(express.static('build'));
}

app.listen(app.get('port'), () => {
  console.log(`Server started at: http://localhost:${app.get('port')}/`);
})

Nothing crazy here, just setting up for future api proxies where I need to use secrets and as I don't want to expose my api.

after this I added a "proxy": "http://localhost:3001/" to my package.json file. I am now stuck as I need to figure out how to start my server correctly and use this server.js file in development mode and afterwards in production.

Ideally It would also be good if we could use more that one proxy i.e. /api and /api2

Answer 1

You didn't have to eject to run your server.js. You can just run it with node server.js together with create-react-app.

You can still do npm start even after ejecting to start your dev server.

To run /api1 and /api2, you just have to handle it in your server.js file and it should work just fine. You need to match the port in your server.js and the one in proxy settings inside package.json - in this case, it should be "proxy": "http://localhost:3031"