Heroku deployment issues with create-react-app

Question

I've built a react app from create-react-app that uses an API built on express. I'm trying to deploy the app to heroku and I've run into some issues. This will be my first deploy.

Originally, I separated the express API backend from the React front end by using two servers operating on different PORTS. Then I used concurrently to start both servers in the app's top level package.json file.

The project looks like:

app 
|package.json
|client
    |package.json
    |public
    |src
|server
    |package.json
    |app.js

This works fine locally when webpack launches a development server for the React app. On deploy, however, Heroku would point the landing page to the express server, rather than the react-app home page, resulting in, well, a whole lot of nothing.

I'm wondering if I should:

A. Run everything through a single express server and just serve the react app from there

B. Find a way to run both servers but point to the React app server.

Here is the top level package.json file

{
  "name": "",
  "version": "2.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "@material-ui/icons": "^4.9.1",
    "concurrently": "^5.3.0",
    "cors": "^2.8.5",
    "@material-ui/core": "^4.11.0",
    "axios": "^0.20.0",
    "chart.js": "^2.9.4",
    "material-table": "^1.69.1",
    "query-string": "^6.13.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.10.0",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.3",
    "spotify-web-api-js": "^0.22.1",
    "bluebird": "^3.7.2",
    "body-parser": "^1.19.0",
    "cookie-parser": "1.3.2",
    "dotenv": "^8.2.0",
    "express": "~4.0.0",
    "express-session": "^1.17.1",
    "handlebars": "^4.7.6",
    "querystring": "~0.2.0",
    "request": "~2.34.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {},
  "scripts": {
    "start": "concurrently \"npm run server\" \"npm run client\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "cd client && npm start",
    "server": "cd server && npm start"
  },
  "engines": {
    "node": "12.16.2",
    "npm": "6.14.4"
  },
}

winwiz1 winwiz1 · Accepted Answer · 2020-11-25T07:31:15

A. Run everything through a single express server and just serve the react app from there

This would be the best choice as far as complexity of the deployment, performance and security are concerned.

To further reduce the possibility of getting issues during Heroku deployment, consider optionally containerizing your solution. You can install Docker, build a container and run it locally. After Heroku deployment the software running inside the container e.g. Express cannot (well, almost) tell the difference between running locally and in the cloud. It eliminates many deployment issues due to differences between the run-time environment you provide locally and that of Heroku. Practical example, it provides the sequence of seven commands to execute in order to get a container with Express/React built and deployed. I'm the author.

Heroku deployment issues with create-react-app

1 Answers