How to run react-scripts start from an express server?

Question

I'd like to run a react app served by an express server. Even though it's not the solution, the effect what I'd like to earn is app.use("/", "react-scripts start"), so if the server gets a request at "/", it starts the react app, and serves it's files.

I read about the solution of building the app, and serve bundle.js, or just adding a proxy with the server's URL to the client app's package.json, but that's not what I want, and haven't found anything similar to the effect I'd like to earn.

I'm not sure what react-scripts start does, and how it's working, but the reason why I need it is that I don't want to restart the whole server, and wait until the app builds every time I change something in the front-end.

Any ideas?

Answer 1

react-scripts start sets up the development environment and starts a server along with hot module reloading. Basically, create-react-app helps you kick off your project without going into the intricacies of WebPack configurations.

Run react-scripts build to build your project files into build folder & then, you can create a server.js file that uses Express to serve your build folder.

server.js

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, 'build');

app.use(express.static(publicPath));

app.get('*', (req, res) => {
  res.sendFile(path.join(publicPath, 'index.html'));
});

app.listen(3000, () => {
  console.log('Server is up!');
});

run node server.js to start your server.