<section class="headSection" ><h1 class="title colorWhite">Deploy React app to Heroku using CircleCI</h1>&nbsp;2022-08-03</section><div class="contentWrap"><section class="articleContent">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&rsquo;t do it before):<ul><li>Create <a class="customised-link" href="https://github.com/" target="_blank" rel="noopener">GitHub</a> and <a class="customised-link" href="https://www.heroku.com/" target="_blank" rel="noopener">Heroku</a> accounts if you do not have either already.</li><li>Create a <a class="customised-link" href="https://circleci.com/" target="_blank" rel="noopener">CircleCI</a> account by sing UP using the GitHub account you created in the previous step.</li></ul><h2 style="text-align: center;">What are CircleCI and Heroku?</h2>Heroku is a cloud hosting service. We will host our application on Heroku and we&rsquo;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).<h2 style="text-align: center;">Setting up the React application</h2>Create react app if you didn&rsquo;t do it before<pre class="language-javascript"><code>npx create-react-app my-appnpm installnpm start</code></pre>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.<h2 style="text-align: center;">Setting up your Heroku hosting environment</h2>You will need to install the Heroku CLI globally if you haven&rsquo;t yet &nbsp;by running the command:<pre class="language-javascript"><code>npm i -g heroku</code></pre>Then log in to Heroku via the command line (which will open a browser window) by running the following command:<pre class="language-javascript"><code>heroku login</code></pre>We can deploy our React app by using a buildpack. <a class="customised-link" href="https://www.heroku.com/elements/buildpackshttps://www.heroku.com/elements/buildpacks" target="_blank" rel="noopener">Buildpacks</a> 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&rsquo;ll be using a buildpack for <a class="customised-link" href="https://github.com/mars/create-react-app-buildpack">create-react-app</a>.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):<pre class="language-javascript"><code>heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git</code></pre><h2 style="text-align: center;">Push your GIT repo</h2><pre class="language-javascript"><code>git add .git commit -m 'commit message here'</code></pre>If you&rsquo;re currently on the master branch, you can push to Heroku directly using:<pre class="language-javascript"><code>git push heroku master</code></pre>Now you can visit your Heroku account, and see your react app we just created and pushed.<h2 style="text-align: center;">Configure CI/CD in React with CircleCI</h2>First of all, log in to <a class="customised-link" href="https://circleci.com/vcs-authorize/">CircleCI</a> with your GitHub profile.<img style="display: block; margin-left: auto; margin-right: auto;" title="circle-ci-login.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircle-ci-login.png?alt=media&amp;token=10878590-61e4-4da0-882e-588b1e52bde9" alt="CircleCI deploy react app" width="300" height="233">Select a GIT repo you just pushed to and press on "Setup project" button<img style="display: block; margin-left: auto; margin-right: auto;" title="setup-circleci.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fsetup-circleci.png?alt=media&amp;token=06483908-f25b-4f96-87db-1e569c64439c" alt="Setup CircleCI" width="300" height="86">Select the latest option to&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="select-circleci-file.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fselect-circleci-file.png?alt=media&amp;token=956fec96-87ea-4629-8c83-f5249b4ee362" alt="Setup CircleCI config file" width="300" height="185">Paste this code into the editor:<pre class="language-yml"><code>version: 2.1orbs: heroku: circleci/heroku@0.0.10jobs: build: docker: - image: circleci/node:10.16.3 working_directory: ~/repo steps: - checkout # install dependencies - run: name: Install Dependencies command: npm installworkflows: heroku_deploy: jobs: - build - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git requires: - build filters: branches: only: main</code></pre>And press "Commit and run"<img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-yaml-file.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-yaml-file.png?alt=media&amp;token=927266d7-065a-4670-804d-42df8f67e430" alt="CircleCI yaml file" width="688" height="377">Now we need to go back to the projects page and go to the settings of our project&nbsp; &nbsp; &nbsp; <img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-projects.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-projects.png?alt=media&amp;token=db12e2d1-de19-4ed8-a13a-67f51ca0d9cd" alt="CircleCI projects" width="322" height="327">&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-project-settings.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-project-settings.png?alt=media&amp;token=46028de1-6f01-45d4-b3b8-05fee5ba7694" alt="CircleCI project settings" width="377" height="209">And you need to add Environment Variables.&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="add-enviroment-variables-to-circleci.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fadd-enviroment-variables-to-circleci.png?alt=media&amp;token=33a3b62f-73cf-4768-941e-772995297793" alt="Add enviroment variables to CircleCI" width="846" height="247">HEROKU_API_KEY&nbsp;you can find it on the <a class="customised-link" href="https://dashboard.heroku.com/account">account settings</a> page<img style="display: block; margin-left: auto; margin-right: auto;" title="heroku-api-key.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fheroku-api-key.png?alt=media&amp;token=f949971e-1a61-4098-aa3e-8299ed713bed" alt="Heroku api key" width="852" height="104">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.&nbsp;&nbsp;&nbsp;</section></div>