Failed to Deploy React App to Heroku - Unable to Deploy

Question

I have made a reactjs app. It's just the front-end. So no nodes and databases are added. When I am trying to deploy it to Heroku, I am always facing the same error and couldn't resolve it. I have added the logs and my package.json file.

Package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "12.17.0",
    "npm": "6.14.4"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "font-awesome": "^4.7.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-rating-stars-component": "^1.1.0",
    "react-router-dom": "^5.2.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "3.4.1",
    "reactstrap": "^8.5.1",
    "shards-react": "^1.0.3",
    "styled-components": "^5.1.1",
    "typescript": "^3.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

Heroku is not compatible with this `"start": "react-scripts start"`. You need to wrap your builded static files in an express server e.g. in a `server.js` file and change the script to `node server.js` — Tin Nguyen, Jul 02 '20 at 13:05
I have seen people on youtube just deploy a create-react-app to Heroku. They didn't do what you have said. — Mohamed Imran, Jul 02 '20 at 13:07
But they haven't done it exclusively with the official nodejs buildpack. They did it via a third party buildpack but I can't advise you there because I haven't use those buildpacks myself. — Tin Nguyen, Jul 02 '20 at 13:11

score 1 · Answer 1 · answered Jul 03 '20 at 15:20

You're trying to start your app in production with react-scripts start which is actually meant for development. To deploy a Create React App you need to build it and have a server that serves the build folder. That's because you're essentially building a static frontend application instead of a fully fledged backend API, which is what Heroku usually is for.

If you want to deploy with Heroku, you need to use the Create React App buildpack. You can add a buildpack to an existing dyno in the settings section of the UI or in using the heroku CLI:

heroku buildpacks:set mars/create-react-app -a APP_NAME

From next release onwards your app will use the buildpack. For further explanation visit the buildpack repository linked above.

Failed to Deploy React App to Heroku - Unable to Deploy

1 Answers1