create-react-app + nodejs (express) server create-react-app + nodejs (express) server express express

create-react-app + nodejs (express) server


There's an excellent tutorial on a good way to handle this setup: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

To summarize: you can write your node+express server in whatever way you're accustomed to - we'll say this lives in a directory called project - then nest within it a frontend directory created using create-react-app, e.g. project/client.

When you're developing, you'll actually run two servers: the backend server (npm start) and the webpack-dev-server that comes with your nested create-react-app (cd client && npm start). In your browser, you'll navigate to the url being served by webpack-dev-server (localhost:3000 by default).

In production, you don't need to run two servers. You'll bundle your frontend (cd client && npm run build), then your backend server just needs to serve the bundle, for example via express's static middleware:

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

I skipped over a few details, so do check out the tutorial I linked if this setup sounds right for you.


I'd run separately nodejs server with nodemon (https://nodemon.io/) and create react app. I'd say, make server side UI-agnostic.

Just curious, why do you need to reload UI after server changes? You can complete server side, write unit/integration tests and then write UI.

Feel free to ask any questions, will try to help