Issues deploying to heroku path="/" path="/favicon.ico"

Question

Hoping someone might be able to help me with an issue I'm experiencing when pushing my react app to heroku. The heroku logs show the following errors repeatedly.

at=error code=H10 desc="App crashed" method=GET path="/" host=jp-portfolio.herokuapp.com request_id=4841ef14-b2f2-4ae7-82d7-d47abf123db7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https 2020-04-02T06:42:02.631967+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=jp-portfolio.herokuapp.com request_id=552909aa-ff34-4a4d-91cc-c817938b39b7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https

To me it doesn't seem like it likes the way I've defined my routes on my app.js file so I changed my app.js file and added the router file to follow React Routing works in local machine but not Heroku but it hasn't worked for me.

and this

React router is not able to handle routes and give back warning of did not match

App.js File

import React, { Component } from 'react'

class App extends Component {
static propTypes = {
  children: PropTypes.node
}

render() {
  const { children } = this.props
  return (
    <div>
      {children}
    </div>
  )
}
}

export default App

My Package JSON

{
  "name": "jp-portfolio",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.9.7",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.0.0-rc.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "chart.js": "^2.9.3",
    "contentful": "^7.14.0",
    "history": "^4.10.1",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-d3-speedometer": "^0.10.1",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typeface-roboto": "0.0.75"
  },
  "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"
    ]
  }

Router.js

import React from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import Portfolio from "./pages/portfolio";
import About from "./pages/about"
import { useRouterHistory, Router } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
    basename: '/test'
  })

export default <Router history={history} >
  <Route path="/" component={App}>
    <IndexRoute component={Portfolio}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

Runs locally.

Has anyone experienced a similar issue and know how I might be able to resolve this? Any help would be greatly appreciated!

Meaganmeager

Can you share your package.json? – Radiotelegram

Yes, just shared in the post. – Meaganmeager

Answer 1

https://blog.heroku.com/deploying-react-with-zero-configuration

Hey did you go through this? I think if you're using the Heroku CLI you need to add the -b tag during deployment to add the custom build pack.

Also it's similar to this question React app crashes on Heroku after using npm install

Edit: So I tried to deploy a sample react app to heroku and came up with a similar issue. The issue is that when you use Create-react-app to generate the react app it automatically adds build configurations. Now heroku builds the app and tries to serve the built app. Hence it will not be able to route the application as expected. To solve this you will have to either use a build pack along with the project that tells heroku how to serve the files or you will have to separate the backend and the frontend (frontend-react and backend express server using node.).

Reference - https://github.com/mars/create-react-app-buildpack#usage https://github.com/mars/heroku-cra-node

Edit 2: added some quotes as suggested by @IvanAracki

Thanks to the zero-config foundation of create-react-app, the idea of zero-config deployment seemed within reach. Since these new apps all share a common, implicit architecture, the build process can be automated and then served with intelligent defaults. So, we created this community buildpack to experiment with no-configuration deployment to Heroku.

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

Try it yourself using the buildpack docs.

Caudill

Hmm thanks for the response. Not sure I understand though. So my issue has to do with my routes. What is the -b tag during deployment? Are you suggesting I use the following command heroku create -b github.com/mars/create-react-app-buildpack.git ? My question doesn't have to do with errors related to installing dependencies. – Meaganmeager

Hey @JenniferPowell the -b tag adds a buildpack specifying how the static files generated through the build have to be served. When deploying a Create-react-app on Heroku during the deployment stage if you look at the logs you can see that the app is being built using the default configuration. This is why your routes are not being served as expected. Refer to my edit in the original comment. – Caudill

@Caudill thanks so much for the explanation and details! I followed yours/the link instructions you gave me, created a new react app and pushed it to heroku. It worked! Then I copy pasted my files, installed dependencies etc. pushed to heroku and it's working. THANK YOU!!! – Meaganmeager

Glad I could help :) – Caudill

Answer 2

I have faced the same issue multiple times, which always gives back 503 server error.

During those times I always follow these steps to get my app up and running:

1. Assigning the env port to Heroku app like process.env.PORT ||1234

2. Checking the Procfile and Start scripts

3. Tacking care of env variables by adding them to Heroku as config variables as these are env variables that the deployed app will use.

4. Making sure there is no version issue in the dependencies of the server

Nika