Categories
Mastering Development

Heroku Error Code H10 – cannot get app to load, no solution seems to work

I’m having what seems to be a common issue with heroku deployment, but have searched for hours over multiple days for a solution on stackoverflow and other online resources and with mentors and nothing has worked. This is the error code I’m getting:

2020-05-14T01:20:34.309134+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-14T01:26:51.177016+00:00 heroku[router]: at=error code=H10 desc=”App crashed” method=GET path=”/” host=frontendsports2020.herokuapp.com request_id=d7bc1996-0238-44fa-97c5-3bb746cf4b08 fwd=”24.19.125.44″ dyno= connect= service= status=503 bytes= protocol=https

The app runs locally from heroku and locally on my machine but not on the web.
Here’s a list of things I’ve tried to no effect:

  • Added a homepage key to my package.json file, pointing to, at various times
    • the url of the app
    • “/”
    • the filepath of my index.html file
    • the filepath of my index.js file
    • the url of my backend
  • wrote “npm start” or “serve -s build” in the start key of scripts in my package.json file
  • specified the port in the start line of scripts in my package.json file (“start”: “PORT=3001 react-scripts start”)
  • added a “dev”: “react-scripts start” line to my scripts in package.json
  • added an “eject”: “react-scripts eject” line to my scripts in package.json
  • added a “heroku-postbuild” line to my scripts with various things in it, like “npm run build”
  • added an engines key to my package.json file with my yarn, npm, and node versions, as well as just having one of those versions listed, and every combination of two of them
  • deleted my package-lock.json file and re-run npm install
  • deleted my yarn.lock file
  • Added a Procfile at the top level of my app directory, in the src file, and/or in the public file
  • Any combination of spaces between words and colons in the Procfile I could think of
  • deleted my yarn.lock file
  • added a static.json file with { "root": "build/", "routes": { "/**": "index.html" } } inside of it
  • various “fixes” to my backend in case for some reason that was the problem, even though the frontend doesn’t need to connect to the backend in order to boot up
  • whatever command it is that creates apps named like glacial-shelf-47265 from the terminal, it did do that but every time I tried that the app didn’t load and showed the same error message that I get launching the app the regular way
  • any combination of the above that I could think of

Here is the current version of my package.json:

{
  "name": "sports2020",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.14.5",
    "node": "13.7.0"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.4.1",
    "highcharts": "^8.0.4",
    "highcharts-react-official": "^3.0.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "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": {
    "redux-devtools-extension": "^2.13.8"
  }
}

Could anyone help? I would be so grateful.

Leave a Reply

Your email address will not be published. Required fields are marked *