Deploying a ReactJS application on Heroku

Carlos Diaz
2 min readMay 15, 2020
ReactJS and Heroku

All right, this is my first post on Medium and doesn’t pretend to be very detailed however you can find the project created on github and please feel free if you have any doubts, I will try to answer your questions asap.

Here we go, I’ve created a React application that can be cloned from: https://github.com/carlosdiaz/react_sample_submission_project

Which is a template from a tutorial found on the web, it creates sample cards with some basic information, very similar to any TODO application on React. Now this might be not the perfect application, and I’m pretty sure there are many things that can be improved so I encourage you to clone and improve this application.

Samples

The back end for testing purposes was implemented using json-server that allows you to emulate a RESTFul API without writing any line of code, you just need a JSON file that holds the data.

The way I did to connect the Restful API and the react application was made through AXIOS which was very easy to use and intuitive.

One thing that I noticed working with Heroku is that once you deploy the application it doesn’t give you detailed information about what is going on with the application, it just tells you that the app crashed.

2020-05-15T20:05:57.517941+00:00 app[web.1]: Starting the development server...2020-05-15T20:05:57.672168+00:00 heroku[web.1]: State changed from starting to crashed2020-05-15T20:05:58.339738+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=fierce-meadow-79440.herokuapp.com request_id=9ce59e68-0e35-4595-8676-c1116898d1b3 fwd="70.164.96.254" dyno= connect= service= status=503 bytes= protocol=https2020-05-15T20:05:58.727547+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=fierce-meadow-79440.herokuapp.com request_id=b539349d-cb38-4b78-a991-93c7473da24f fwd="70.164.96.254" dyno= connect= service= status=503 bytes= protocol=https2020-05-15T20:06:24.014904+00:00 heroku[web.1]: State changed from crashed to starting

After reading some articles the solution was this line:

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack

Every React application deployed on Heroku needs the Heroku buildpack, if you need more information please visit this.

In case somebody needs the package.json file you can see it here:

Hope this can help to save some time when working with React and Heroku.

Did you like this post? please share with me your thoughts and click the clap button on the page :)

--

--