create-react-app + nodejs (express) server

Question

I am using NodeJs + React in my application. I am using express in NodeJs. I created my sample app using 'create-react-app' npm.

I used NodeJs for calling the oauth token from react app. I mentioned this approach in this post Calling a secured REST api from Javascript without user login screen .

I added this command below to start the NodeJs together with my react app. It works.

"scripts": {
  "node": "react-scripts-ts build & node server"
}

The issue is that I don't get the real time tracking feature that comes with 'create-react-app' because I am not starting the webpack-dev-server. If I made some changes, I have to run 'yarn node' to recomple and start the node js server.

My question is how to start the nodejs express without losing the 'create-react-app''s live tracking feature.

If I need to eject the 'create-react-app' and customize the script, I am fine as long as I got the following feature.

start nodejs express - api
load my react-app
if there is any change in my react or nodejs express file, it should auto-reload.

Feel free to let me know if you have any question.

Thanks,

You don't get hot reloading on production build (AFAIK). When you run your node script, that's what is getting done. Run the dev server for HMR. Generally, that is npm start See github.com/gaearon/react-hot-loader/issues/… — Dane
Thanks Dane. I will look at it. I thnk I need to eject the 'create-react-app' first. — Michael Sync
stackoverflow.com/a/48851722/82686 - How to use Create React App with Node.js backend (without ejecting) — Konstantin Tarkus

Tyler Hsu Tyler Hsu · Accepted Answer · 2018-02-16T17:46:25

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.

create-react-app + nodejs (express) server

2 Answers