Every day new websites are built and published on the internet, and as developers, we are the ones who implement the strategies for the building of mobile and web applications.

\
So what is next after you have built this beautiful application?

\
Deployment to a live server. 

\
It’s the icing on the cake.

\
Without this, your website will continue to live on localhost, which is not suitable for you, as you want to showcase your skills that you are indeed a full-fledged developer 🚀.

\
This article will explore how our React application can be deployed on Heroku using **Buildpack.**

\
## Prerequisites

To complete this project, we need to do the following:

\

1. Have [NodeJS](https://nodejs.org/en/) installed on our computer. After installation, npm, a node package manager, is made available to install dependencies.
2. [Git](https://git-scm.com/) - a free and open-source distributed version control system (VCS)
3. A [GitHub](https://github.com/) and [Heroku](http://heroku.com/) account

\
Let's get started with the steps on achieving the build process to production.

\
**Step 1: Create a New App on Heroku**

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-8h03mf8.png)

\
We will begin the build process by registering our new app on Heroku. This article won't be going into details on creating a GitHub repo. Instead, we will use a pre-existing app available on our GitHub profile.

\
To learn more, visit the link [here](https://docs.github.com/en/get-started/quickstart/create-a-repo).

\
After clicking the link above, click on **new** and create a new app. Give your app a name and choose a region for your app to be hosted, as Heroku offers hosting for frontend apps and servers to backend applications.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-mi23ms4.png)

 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-zr33mho.png)

\
Make sure you click on 'create app' to have a new site provisioned for you on Heroku.

\
## Step 2: Add Buildpack

The function of Buildpack is to deploy a React UI (generated from `create-react-app`) as a static website from our Heroku dashboard. Now, click on the settings tab and scroll down to **add buildpack.**

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-9943mp8.png)

 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-sw53muu.png)

\
Once you click `add buildpack`, it displays a pop-up on the dashboard. Paste this [link](https://github.com/mars/create-react-app-buildpack) in the **Enter Buildpack URL** and click on save changes. That is all you have to do.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-ep63mof.png)

\
## Step 3: Connect to GitHub

We will head over to the deploy tab to link and connect our repo to Heroku in this step. After that, click `Connect to GitHub` under the **Deployment method**.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-0j03m0e.png)

\
With the option to search for your GitHub repo, search for the repo you wish to deploy and connect.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-ae13mel.png)

\
## Step 4: Automatic Deploys

In this step, we want to enable automatic deployments for the app from GitHub. What Continuous Integration(CI) does is that it helps us to check that no wrong or buggy code gets pushed to production. In addition, whenever we push a new code to GitHub, Heroku gets to know about the latest changes and automatically updates the website accordingly.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-f623mpy.png)

Check the **Wait for CI to pass before deploy** and click **Enable Automatic Deploys** in the above image.

\
## Step 5: Deploy the GitHub Branch

The last step is to start the build process. Click on the Deploy Branch button as this will compress all the files and organise them so that a particular build can be delivered and the app pushed to production.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-i533m8g.png)

\
## **Show Time 😁**

Let's view our project on the world wide web.

\
 ![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-9443mas.png)

\
Want to have a sneak peek at the deployed live project? View it [here](https://react-police-report.herokuapp.com/), and access the GitHub repo [here](https://github.com/terieyenike/clbrutal).

Heroku

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to Deploy a React App to Heroku in 5 Minutes in 5 Easy Steps

How to Deploy a React App to Heroku in 5 Minutes in 5 Easy Steps

Too Long; Didn't Read

Company Mentioned

@terieyenike

RELATED STORIES