Search code examples
herokucreate-react-app

React Application on Heroku

Have a working React App that can run locally using the command: npm start However, after deploying on Heroku, i receive an application error message. The application URL is: https://earth-weather.herokuapp.com/

The Application Log is as follows:

2021-05-12T08:05:27.430345+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from 
2021-05-12T08:05:27.430467+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public
2021-05-12T08:05:27.430577+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
2021-05-12T08:05:27.430864+00:00 app[web.1]: Starting the development server...
2021-05-12T08:05:27.430866+00:00 app[web.1]: 
2021-05-12T08:05:27.554932+00:00 heroku[web.1]: Process exited with status 0
2021-05-12T08:05:27.631647+00:00 heroku[web.1]: State changed from starting to crashed
2021-05-12T08:05:28.728857+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=earth-weather.herokuapp.com request_id=f067160f-79fc-4336-8488-ded7e7eb5ddb fwd="183.90.36.67" dyno= connect= service= status=503 bytes= protocol=https
2021-05-12T08:05:30.511115+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=earth-weather.herokuapp.com request_id=059ee61d-fe00-4a69-9966-61506da73911 fwd="183.90.36.67" dyno= connect= service= status=503 bytes= protocol=https
2021-05-12T08:05:31.219414+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=earth-weather.herokuapp.com request_id=0f53eee2-39a0-4311-b8a3-62cb9ffcde3c fwd="35.185.241.102" dyno= connect= service= status=503 bytes= protocol=http

The forked (public) repository is on GitHub.

Grateful for any assistance that can be rendered. - Benjamin

Solution

  • According to your application logs the line Starting the development server, indicates that the application is running on development mode which shouldn't happen as it is a production environment.

    The reason,

    According to https://devcenter.heroku.com/changelog-items/370

    A Procfile is no longer required to run a Node.js app on Heroku. If no Procfile is present in the root directory of your app during the build process, we will check for a scripts.start entry in your package.json file. If such an entry is present, a default Procfile is generated automatically

    $ cat Procfile
web: npm start

    In your repository, since you have not specified a Procfile. Heroku automatically generates a Procfile that runs your app on development.

    Currently, your react-app is treated as a regular node.js application as the node.js buildpack is used which is automatically inferred due to the presence of package.json in the root.

    To fix this, you need to use the create-react-app-buildpack on Heroku.

    Refer: https://elements.heroku.com/buildpacks/nhutphuongit/create-react-app-buildpack