How to deploy React app to Heroku

If you have landed on this page, there is a high chance that you have a new React project and you’ve chosen Heroku to host your app. But what is Heroku?, how does it work? And how to deploy React app on Heroku?. In this article, we are going to give you answers to these questions, so let’s get started.

Related Articles:

This article will cover:

What is Heroku
Heroku vs AWS
How to deploy React app for free to Heroku

Deploy React app using Heroku CLI

1- Deploy React UI as a static website to Heroku
2- Deploy React app with a server-side backend to Heroku

Deploy React app using Heroku dashboard

You might also like:

What is Heroku

Heroku is cloud Platform as a Service (PaaS). It is used to deploy, manage, and scale modern apps in an easy and flexible way which makes developers life easier. The simplicity of the deployment process and the support for most programming languages (node.js, Ruby, Java, PHP, Python, Go and more) has attracted a big number of developers since it was launched .

All Heroku applications run in a collection of lightweight Linux containers called dynos. These dynos are managed and kept running automatically by the Dynos Manager.

Actually, dynos are virtual computers that run a single user-specified command and each one of them can be:

Web dyno: receives HTTP traffic from the routers.
Worker dyno: The Workers are dynos of any process type, other than web dynos, and they are typically used for background jobs, queueing systems, and timed jobs. Your application can have multiple types of worker dynos: for example worker dynos for urgent jobs and another worker for long-running jobs.
One-off dynos: They are temporary dynos that can run detached, or with their input/output attached to your local terminal and loaded with your latest release. They can handle administrative tasks, such as database migrations and console sessions.

Heroku offers a free plan for non-commercial apps and personal projects to help you learn and get started on the platform. For more complex applications using a sizeable amount of data, Heroku will charge you based on the number of dynos you have and the size of each one.

Heroku vs AWS

Actually, Heroku platform runs on Amazon Web Services(AWS) and every app built on Heroku is deployed to Amazon Web Services(AWS). That means Heroku is not hosting your application, so why to use Heroku? and what is the difference between Heroku and AWS?.

Amazon Web Services (AWS) is a secure cloud services platform, offering compute power, database storage, content delivery and other functionality to help businesses scale and grow faster with a lower IT cost. The deployment process of AWS service is quite complicated and requires a high level of knowledge because The AWS Infrastructure as a Service(IaaS) provider cares more about running the data centers than the developer experience during the deployment. To keep your application running at scale and ensuring maintenance, you need to dedicate a developer in your team for this task.

On the other hand, Heroku offers you a ready-to-use environment that allows you to deploy your code fast and the code can be in any language you choose (Node.js, Ruby, PHP, Python, Java,…). With Heroku you can also keep your application running at a scale with only a few commands on the Heroku CLI or Heroku Dashboard and focus more on your coding. Moreover, you don’t need to think about infrastructure maintenance because it is managed automatically which makes Heroku suitable for Startups.

How to deploy React app for free to Heroku

You can deploy your React application on Heroku using Heroku CLI or Heroku dashboard.

Deploy React app using Heroku CLI

1- Deploy React UI as a static website to Heroku

First you need to create a free account on Heroku Sign up . Then in your CLI install heroku globally by running the following command:

 npm install -g heroku

After creating your Heroku account and installing Heroku CLI you can log into it using the command :

 heroku login

Then click log In.

For a quick deployment of a React UI, you can use Heroku Buildpack for create-react-app. For that return to your terminal then copy and paste the following code in the CLI:

 npm install -g create-react-app
 create-react-app my-app
 cd my-app
 git init
 heroku create -b https://github.com/mars/create-react-app-buildpack.git
 git add .
 git commit -m "react-create-app on Heroku"
 git push heroku master
 heroku open

Don’t forget to Replace my-app with the name of your React application.

That’s it, the deployment of your app is done. Now you can continue your Development.

2- Deploy React app with a server-side backend to Heroku

In this article we suppose that you have already a functional React application with a server-side backend. If not, these links may be helpful :

To deploy your react app, you need to create a free account on Heroku Sign up . Then in your CLI install heroku globally by running the following command:

 npm install -g heroku

After creating your Heroku account and installing Heroku CLI you can log into it using the command :

 heroku login

Then click log In.

Now, you can create your Heroku application my-app by running the following command in the terminal.

 heroku create my-app

Next step is to push your code to the Heroku remote repository by running this command.

 git push heroku master

Congratulation ! Now your application is deployed to Heroku and you can open it by running:

 heroku open

Deploy React app using Heroku dashboard

To deploy your React application using Heroku dashboard, you must have a Heroku account and your project stored in a GitHub repository.

Go to your Heroku dashboard, click New, and then click Create new app.

Enter your application name. and select your region then click Create app.

After creating your app, you need to select the deployment method, in our case select GitHub then click on Connect to GitHub.

Once you’ve successfully connected Heroku to your GitHub, search for your project repository by clicking Search, and select your project from the list of repositories then deploy it.

For the deployment you have two options: manual deploy or automatic deploy.