How to Deploy a React Frontend to Heroku

After 15 challenging weeks, I’ve finally graduated from Flatiron School with some very cool projects under my belt. The next step for me is to deploy them. Our instructors told us that deploying projects can be finicky. Finicky is an understatement. I tried to deploy my final Flatiron project eleven times before it was successful. That’s why I decided to make this blog so hopefully, you’ll avoid the same mistakes that I made.

Step One: Create an Account

To deploy on Heroku, you’ll need an account. Once your account has been created, you’ll need to install the Heroku CLI in your terminal (If you already have the Heroku CLI, skip to step two). The below command is for Mac users.

brew tap heroku/brew && brew install heroku

Here’s more documentation on Heroku’s CLI if you run into any problems.

Step Two: Login to Heroku

Once Heroku’s CLI is installed on your computer, run this command at the top level of your terminal:

heroku login

The instructions are pretty straightforward, just remember to validate your account prior to logging in or this may not work.

Step Three: Adjust Frontend Code

**If you are not connecting your frontend to a backend, you can skip this step.**

If you are connecting your frontend to an already deployed backend, make a file in your root directory titled static.json and paste the following into it:

{ "root": "build/", "routes": { "/**": "index.html" } }

I got this information from another blog, so feel free to reference that as well.

Once you’ve done that, make sure your paths in your fetch requests are updated to reflect your backend URL. Fetches will not work if you skip this step so it is really important.

Step Four: Create Your Heroku App

Now that you’ve adjusted your frontend code, you can create your app. Yay! The easy part is over. Going off of the blog mentioned earlier, you’ll also want to add a buildpack to your app which installs dependencies and configures your environment. I used this buildpack, but I’m sure there are many. You can create your app and add a buildpack at the same time by running the below code in your frontend’s console:

heroku create your-react-app-name --buildpack https://github.com/mars/create-react-app-buildpack.git

Step Five: Deploy your App..Maybe

Once your Heroku app has been built, you may be in the home stretch (lucky you). Now go to your Heroku profile on the web and navigate to applications.

You should see the name of your frontend appear. If it doesn’t there may have been an issue with creating your Heroku app.

When you click on your frontend, you’ll be brought to a new screen. On the top navbar, go to Deploy and select the deployment method. I chose GitHub and connected my frontend repo to Heroku and switched on enable automatic deploys which will deploy your app again every time you push up to GitHub.

Once you’ve selected which deployment method works for you, you’re ready to deploy. Press “deploy” at the bottom and wait for its response. There is a good chance that your deployment will not be successful. If that’s the case, here’s what to do.

Step Six: What to do When Your App Doesn’t Deploy Successfully

If you're like me, your deployment won’t work on your first try or your tenth. Here was my first error:

I thought alright I’ll go ahead and delete my yarn.lock file and we should be good to go. Once I did that I got another error:

This is where the majority of my problems started. My first instinct was to delete the package-lock.json file and then regenerate using ‘npm install’. That did not work. My second instinct was to delete the package-lock.json file and install a new version of babel/core. I tried that with:

npm install --save-dev @babel/core

This too did not work. After ten tries of playing around with different configurations, I read an article saying how you can have Heroku skip over dev dependencies in your package.json file where it appeared my babel/core issues were happening. By running this command all my problems were solved and my app deployed successfully:

heroku config:set NPM_CONFIG_PRODUCTION=false

I hope you don’t run into as many problems as I did, but if you do, shoot me a message, and I’ll try to debug with you.

Good luck!