Deploying a ReactJS application on Heroku

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 :)

--

--

--

Full stack software dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Open Angular components dynamically in new browser tab without bootstrapping the whole app again

4 options to link a JavaScript file to an HTML document

How to View Localhost Web Apps on Mobile Browsers

Post a x-www-form-urlencoded request in React Native with fetch

Event's Phases Inside the DOM

Deploy an Angular App into GitHub

Advanced React Hooks: Deep Dive into useEffect Hook

ReactJS AWS s3 bucket file upload

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Carlos Diaz

Carlos Diaz

Full stack software dev

More from Medium

Everything You Need To Know About ReactJs And ReactJs Project Creation.

Create a React Web Application Using Webpack 5 Full Walkthrough

Re-render & Optimization in React