如何从Express Server开始运行react-scripts？

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

What exactly is the outcome you're trying to achieve? Using create-react-app (for which react-scripts is a utility), or webpack in general, the app must always be rebuilt at some point for the changes to be seen, since JSX is not browser-compatible and must be transpiled to regular JS. Also, it's not necessary to restart the server if you're only making changes to the front end.

Running react-scripts start basically runs webpack-dev-server (WDS) which is built into CRA's configuration. WDS does not actually build the project in the sense of outputting build files, but it still must build it in-memory to be able to even display the changes at all. On a normal application, rebuilding through WDS shouldn't take more than a handful of seconds, and that's about the fastest feedback loop you're going to get for seeing changes manifest.

If you're running an Express server alongside a CRA app, I'd recommend looking into concurrently and nodemon , the former of which will allow you to run your server and React client with one command, and the latter of which will automatically restart your server for you (only when back end changes are made, a front end change will not trigger a server restart).

Answer 2

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 projects without configuring, so you do not have to setup your project by yourself.

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

server.js

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

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.