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,

Bisector

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/… – Trager

Thanks Dane. I will look at it. I thnk I need to eject the 'create-react-app' first. – Bisector

https://mcmap.net/q/831026/-add-server-side-rendering-to-create-react-app - How to use Create React App with Node.js backend (without ejecting) – Vallie

Answer 1

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.

Gumwood

Answer 2

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

Groundwork

Thanks. Let's say I am developing the app on my machine. So, create-react-app comes with 'yarn start' which has reloaded the app when I made some changes in my react app. but I need to call the nodejs api to get the auth token before calling another API from my react app. I want to reload the website if there is any change in either node js or react app. – Bisector

Answer 3

I would suggest you use the concurrently and nodemon package then make some changes package.json to suite what you are trying to achieve

Edit nodemon.json file to watch changes on the server folder

{
  "watch": ["server/"],
  "ext": "js,JSON",
  "ignore": ["node_modules"]
}

Then add package.json in the root folder Your folder structure should be something like this

 app/
    client/ 
    server/
       server.js
    package.json

And add the script to start both the client and server to the package.json

   "scripts": {
    "client": "cd client && npm start",
    "server": "nodemon server/server.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

Then add proxy to the package.json inside your client

  "proxy": "http://localhost:5000"

Ammieammine

Welcome to SO! For what it's worth, the original post (OP) mentioned that they're not using the react dev server, which is what makes the "proxy" option work. Otherwise, I totally agree with this approach. – Tollman