Deploy React app to Heroku using CircleCI

In this article, we will deploy React app to Heroku and create CI/CD pipeline to deploy the changes automatically once you changed the code and pushed it to GIT.

Before we start you need to do a few steps (if you didn’t do it before):

• Create GitHub and Heroku accounts if you do not have either already.
• Create a CircleCI account by sing UP using the GitHub account you created in the previous step.
• We believe that Creation of GIT check will be also useful

What are CircleCI and Heroku?

Heroku is a cloud hosting service. We will host our application on Heroku and we’ll configure CircleCI to deploy our application automatically to our Heroku URL once we changed the code and pushed it to the GitHub repo.

CircleCI is a CI/CD service that can be integrated into your repository (GitHub, GitHub Enterprise, or Bitbucket). Once you have changes in your repo, it creates and runs a pipeline that you create in a config.yml file. CircleCI is free for open-source projects (including projects that are public on GitHub).

Setting up the React application

Create react app if you didn’t do it before

npx create-react-app my-app
npm install
npm start

You should be able to see the website running in your browser on port 3000 (if available). It means that everything is fine. Now we need to stop the app by pressing the ctrl+any key or delete the console if you are using VS Code in MacOS.

Setting up your Heroku hosting environment

You will need to install the Heroku CLI globally if you haven’t yet by running the command:

npm i -g heroku

Then log in to Heroku via the command line (which will open a browser window) by running the following command:

heroku login

We can deploy our React app by using a buildpack. Buildpacks are a set of scripts that are used for compiling apps on Heroku. They make deployment easier and are usually open-source. For our React app, we’ll be using a buildpack for create-react-app.

Our next step is to create a Heroku application via the command line using our buildpack with this command (change $APP_NAME to your preferred app name):

heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git

Push your GIT repo

git add .
git commit -m 'commit message here'

If you’re currently on the master branch, you can push to Heroku directly using:

git push heroku master

Now you can visit your Heroku account, and see your react app we just created and pushed.

Configure CI/CD in React with CircleCI

First of all, log in to CircleCI with your GitHub profile.

Select a GIT repo you just pushed to and press on "Setup project" button

Paste this code into the editor:

version: 2.1

orbs:
  heroku: circleci/heroku@0.0.10

jobs:
  build:
    docker:
      - image: circleci/node:15.0.0
    working_directory: ~/repo
    steps:
      - checkout
      # install dependencies
      - run:
          name: Install Dependencies
          command: npm install

workflows:
  heroku_deploy:
    jobs:
      - build
      - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git
          app-name: $HEROKU_APP_NAME
          requires:
            - build
          filters:
            branches:
              only: main

And press "Commit and run"

Now we need to go back to the projects page and go to the settings of our project

And you need to add Environment Variables.

HEROKU_API_KEY you can find it on the account settings page

HEROKU_APP_NAME is the name of your Heroku application (the one you created using a buildpack.

That's it, now every time you push or create a pull request to the main branch it will be deployed to Heroku.

Probably you will have a problem like

Stack heroku-22 is not supported!

Or

Push rejected, failed to compile React.js (create-react-app) multi app.

This is because buildpack is deprecated and doesn't work on Heroku-22. You can resolve it by the following command until a new buildpack for Create-React-App is released.:

heroku stack:set heroku-20