Deploying A Create-React-App To Heroku

Quick note: I will not go through installing the Heroku CLI and logging in or creating an account.

I recently had to deploy a SPA, built in React, to Heroku. The app was bootstrapped with create-react-app. The deployment process was quite simple and I encountered very few issues. The process and how I dealt with the issues I’ll elaborate on here 😀

Preppin’ The App

Go into your package.json file and add an “engines” object, which will contain the version of your NPM and Node. Check your versions with “npm -v” and “node -v” and add them to the “engines” object like so:

{
  "name": "app name",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.14.5",
    "node": "12.6.0"
  },
  "dependencies": {
     // dependencies...
  },
  "scripts": {
     // scripts...
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
     // browserslist...
  }
}

Setup Create-React-App Build Package

To avoid create-react-app from deploying your development build to Heroku, navigate to the root folder of your app and type in:

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

Deploy The App In A Heroku Repository

Make sure that, in your commandprompt, you are in the root of your app folder. Run the following commands to set up a Heroku git repository if you don’t have a git setup already:

git init

git add *

git commit -m "initial commit"

Note: If you already have a git repository set up on for example Github, you can skip the first command. Just remember to commit your changes 🙂

heroku create name-of-app

You will see two links in your CLI. Copy the second one ending in “.git” and paste it like showed in the next command

git remote add heroku "https://git.heroku.com/name-of-app.git"

git push heroku master

Heroku will now deploy your app. If everything goes well then congratz. Your app is deployed! I, however, ran into two specific problems:

1. @fortawesome/react-font-awesome module missing
2. Build failed: Two different lockfiles found: package-lock.json and yarn.lock

The first problem was easily fixed. I had the @fortawesome/free-solid-svg-icons and @fortawesome/fortawesome-svg-core. I was just missing the @fortawesome/react-fontawesome. I installed all of them with NPM just to make sure I wasn’t missing any of them:

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

The second and last one I fixed by removing the yarn.lock file, because I chose to go with NPM as the packetmanager for my dependencies. If you use Yarn, you just remove the package-lock.json. Next step is saving and commiting your changes and then push them to Heroku master.

Finishing up this article I’d like to give credit where credit is due. I followed this resource from dev.to and then worked around the above issues I encountered myself.

That’s all folks. Thanks for reading. Feel free to reach out on social media if you have comments or corrections on anything of the above 😀