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!

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.