Using Create-React-App with Express

Lou — Cloud Native Software Engineer on September 12, 2017

Whilst setting up a test app myself, I couldn't find a simple way to deploy Create React App with Express on the same server. It took some tweaking... [Read Full]
markdown guide

What exactly does this mean?
"When you want to deploy, just run the production build and serve your app from localhost:8080 and everything will work as planned." ?
The Production build runs on PORT 5000 should we change that to run on port 8080?


Hey, ayanez17.

There are two modes your app can run in. When built (port 8080) via npm run build (which creates an index.html) or when running live reload npm run start which runs on port 3000.

When running npm run start your app will proxy from port 3000 to port 8080 automatically. However when you create a production build your entire app should be running from port 8080, as express and the API's are running from the same server (in this setup).

You shouldn't need to change any ports. Does that help?


hey Lou, thanks for the article.
I'm trying this to see if I can get some environment variables to my static app, but I can't seem to get it to work. I'm assuming I have to pass them in to the client some how.
Do you have any ideas?



I'm a little confused, environment variables are typically for configuring your back end rather than exposing anywhere else. Could you elaborate on what you're trying to achieve?


I don't remember exactly what I was trying to achieve, but an example I can think of is hitting endpoints in different dev environments. For example:
GET =>
GET =>
GET =>

I would want to consume the same environment variables that my Microservices use, instead of creating a hardcoded copy in my JS code.

Hope it makes sense.


Hi @Lou, when i deploy to server, it had an error: Error: ENOENT: no such file or directory, stat '/home/namld/projects/raca/build/index.html'. How to fix it?


make sure you run npm run build before, otherwise you will not have a build directory


Patrick's suggestion sounds correct, let me know if you had any other issues.


Hey Lou, really love this simple version to add a backend to create react app. It's really cool.

I'm having some trouble deploying this to heroku. Is there a particular package.json change I need to make to get this to work? Everything works in development, but when deployed I get an 'invalid host error' rendering on the page with nothing else

My package.json looks like this. I also ran 'npm run build' before deploying.

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "radium": "^0.25.2",
    "react": "^16.8.6",
    "react-animations": "^1.0.0",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "react-slick": "^0.24.0",
    "spiced-pg": "^1.0.0",
    "styled-components": "^4.3.2"
  "engines": {
    "npm": "6.10.0",
    "node": "v10.16.0"
  "proxy": "http://localhost:8080",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  "eslintConfig": {
    "extends": "react-app"
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"

Given the popularity of the post, I should probably completely overhaul it. A few things have changed in create-react-app since.

Sounds like this though...

It's probably an issue with your proxy settings. CRA has changed a few bits with regards to proxies since, it's worth taking a look at their docs.


Quick question! If you don't want to develop and test the React app and the API at the same time, is the proxy step necessary?

Also, how would API requests look like on the React app? With or without proxy.


Hey Sammy!

All of the requests are for absolute paths. So for the ping example would just be:


Then node works out to send it to the right place. This maps the create react app on port 3000 to the api requests on 8080.

If you want them on a separate server you'll need to call with the port number, or domain that you setup your api server on.

Like so:


With that option, however you'll neeed to fiddle with your API access control. So that you only allow access to your app, not the whole internet. However, this can be more tricky and fiddly and depends a lot on how you setup your architecture.


Thank you for this article!

But how can I enable hot reloading in the CRA client when running node/nodemon?

Currently I'm stuck with this solution:

"scripts": {
  "devserver": "nodemon -w server -w package.json server/server.js",
  "devclient": "react-scripts start"

Hey Tom you can use this package and create a script for it to run both devserver and devclient at the same time for you.


Is it possible to serve the "public/index.html" instead of "build" for development, edit my react files, and still have the site on localhost:8080 catch the updates?


The public/index.html is the (slower) build script. I'm not quite sure why you'd want to do that. Running on port 3000 is just better for speed of local dev. If you can elaborate a little more, maybe I can help!


Found this through a Google search. Thanks for this post!

code of conduct - report abuse