Deploy Reactjs app to Heroku with Multi-Environment Bitbucket CI/CD pipeline

Fireayehu Zekarias
Mar 5 · 9 min read

Automate deployment process for your reactjs application

Hallo Welt (don’t freak out its hello world in German )

I started working at a new startup a couple of weeks ago as a reactjs developer and I was searching on the world wide web(yeah I used the whole phrase) on how to create a pipeline with bitbucket and heroku for reactjs projects.I had expected to find well written resources on how to do that but could not, they were outdated (probably because bitucket had many updates on their platform to make it user friendly, easy to use and new features have been added). when I tried searching for resources with different stages of deployment(development, staging and production) the response I got was NULL. We’re going to create a bitbucket pipeline to automate our deployment to heroku with staging and production deployment options.

Prerequisites

Step 1 — Create React App

I can imagine you’re already familiar with creating react apps, but for those of you guys with no previous experience below is how we do it. We’re going to use the create-react-app starter CLI tool.

npx create-react-app your-app-name /*I named my app bitbucketpipeline*/npx create-react-app bitbucketpipeline

The project creation process varies depending on your internet connection speed, after the project is created successfully open the code in your code editor and if you want to run the app type npm start on the terminal. Finally go to your browser and open http://localhost:3000 (i.e this is in case the app does not automatically open up in the browser).

cd bitbucketpipelinenpm start

Step 2 — Create Bitbucket Repository

Since we’ve created our app and it is up and running, we can proceed to creating a remote repository on bitbucket. If you haven’t signed up yet go to https://bitbucket.org and create a free account, we all love free stuff don’t we?

create repository on bitbucket

Step 3 — Create Heroku app

Now that we’ve created our app and a remote repository on bitbucket, we’re pretty close to setting up a pipeline and deploying our app. Just like we did on bitbucket if you haven’t not signed up for heroku yet go and do that https://heroku.com, again this one is for free too.

Coming up next, we’re going to create two different apps for staging and production. Go to your heroku dashboard, click New and choose Create new app. Your app name needs to be unique. I have named my apps bitbucketpipeline-staging and bitbucketpipeline-production.

create new app
creating staging and production app on heroku

When you go to your dashboard you have to see your apps listed there.

Now the only thing left to do on heroku is getting the API key and adding a buildpack to our apps. We need the API key so that when we set up our bitbucket pipeline we get authenticated through the key in order to deploy our code using the pipeline configuration.

Heroku Buildpacks are sets of open source scripts that are used for compiling apps on Heroku. They enable you to extend Heroku’s build system to support your language or customization, or to make particular binary packages available to the runtime

First lets add buildpack to both our apps. The build pack varies for apps we’re deploying, since we’re going to deploy reactjs apps we will be using the create-react-app-buildpack build pack.

Add the buildpack for both staging(bitbucketpipeline-staging) and production(bitbucketpipeline-production) apps. Next up we need get the API key of our heroku account.

  • In your profile go to Account setting

Step 4 — Deploy With Bitbucket pipeline

We are now at the most interesting part. In this section we’re going to set up a bitbucket pipeline for automated deployment. We have all we need to start setting the pipeline; bitbucket repository, heroku API key and heroku apps for staging and production. Let’s do it.

Step 4.1 — Enable Pipeline

Open your repository and go to the Repository setting, scroll down and look for the pipeline section on the side navigation, click on the setting option under the pipeline section and enable pipeline for the repository by turning on the switch control.

Step 4.2 — Add Repository variable

Remember the API key we copied from heroku account setting? We’re going to put the API key to use now. Open your repository and go to the Repository setting, scroll down and look for the pipeline section on the side navigation, click on the Repository variables option under the pipeline section. There you can add your key, value pair. In our case the key, value pair will be our Heroku API key. I will name my key as HEROKU_API_KEY (you can name it anything you want) and the value will be the API key we copied from heroku.

Step 4.3 — Add Staging and Production variable

Our Repository variable can be accessed by any environments we set up for the repository, bitbucket by default has three environments namely testing, staging and production. But variables created under these environments can only be accessed in that specific environment. I am going to create one variable for staging and also one variable for production. The variable will hold the heroku app name. I will name my key as HEROKU_APP_NAME and the value will be heroku app name (i.e for staging bitbucketpipeline-staging and for production bitbucketpipeline-production).

Open your repository and go to the Repository setting, scroll down and look for the pipeline section on the side navigation, click on the Deployments option under the pipeline section. Expand the Staging environment and add your variable, expand the Production environment and add your environment.

Step 4.4 — Configure Bitbucket Pipeline

This is going to be the last step and we’re going to write some code. Open your project on your favorite code editor and create a file named bitbucket-pipelines.yml on the root directory of your project. The file name must be the exact match, that’s how bitbucket knows its a pipeline configuration file. This file holds the build configuration for your repository. You can do a lot of things with this file, so if you want to know more check out the documentation.

Here are the basic things you need to know about the configuration YAML file:

  • image — bitbucket pipeline uses docker images to run your builds

In our case we’re going to use a nodejs image since we need that to build our reactjs app. We’re going to have two branches staging and production, we also have a default in order to run a test step when pushed to other branches. The staging and production branch will have three steps, first step to run tests, second step to build archived files of our code and the third and last step for deploying the archived code to heroku. The default will only have one step and that step is responsible for running tests.

Finally let’s commit and push our code to the remote repoistory, but before that add your bitbucket repository as remote repository to your reactjs app. Open up your terminal inside your root directory for your code and type this, don’t forget to replace ${your-username} and ${repository-name} with your username and repository name. After that commit your code and push it to bitbucket.

git remote add origin https://${your-username}@bitbucket.org/${your-username}/${repository-name}.gitgit add .git commit -m 'Bitbucket pipeline configuration'git push -u origin master

After pushing the code go to the pipeline tab of your repository, since we pushed the build configuration file first time and the branch we pushed to is master branch which resides in the default section on the bitbucket build configuration file, the pipeline for the default will not be executed, but the next time you push code to the master branch the pipeline will execute automatically. We can also execute the pipeline manually, go to the pipeline tab of your repository and click on Run pipeline then select the master branch and the default pipeline.

When you click run it will start the pipeline and you should get this result if running the default pipeline goes successful.

Now let’s create a staging branch for the staging pipeline, go to Branches tab of your repository and click on create branch and fill the dialogue display with the below information.

The moment creation of the staging branch finishes the staging pipeline starts, open the pipeline section of your repository and see the in progress pipeline.

Next go to Heroku dashboard and click on the staging app, and you would be able to see the deployment process of your app on heroku.

Wait for heroku to finish building and deploying your app to their server, when build is finished successfully, open your app and click on the open button and it will open your website on a new tab.

Do the same step for the production branch too and you can deploy your code to the production app using the production pipeline. From now on whenever you push code or merge a branch to either staging or production branch the respective pipeline will be run. When you push your code to other branches the default pipeline will be run.

Fireayehu Zekarias

Software engineering student at Addis Ababa University, Ethiopia.

LinkedIn Twitter

Thank you

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Fireayehu Zekarias

Written by

Software engineering student at Addis Ababa University, currently focusing on javascript and its frameworks like React.js, Node.js and React Native.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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