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:

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.

Heroku login

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
 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.

Heroku login

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.

Hroku create new app

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

Heroku select app name

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

Heroku select deployment method

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.

  • Select manual deploy if you are working on a branch, then click Deploy Branch.
  • If not select automatic deploy, then click deploy.

And your application will be deployed.

You might also like:

3 easy steps to create React application.

How to create React Web App with a Node.js API Backend.

How to make Axios Requests in React to a nodejs API.

How to use React Hooks in Functional Components.

5 Steps to Set up React Development Environment.

How to clone GitHub repository and branches.

What are Component Lifecycle Methods in React.

How to open Visual Studio code from Command Line.

How to deploy React app to Heroku.

Complete Guide on how to use Git and GitHub.

How to get Request Origin in Express.js?

How to get the Request Host in express.js?

How to Get Current Date and Time in JavaScript.

How to add Custom Error Handler Middleware to your Node.js/Express API.

Complete JWT Authentication and Authorization System for MySQL/Node.js API.

How to Build a Complete API for User Login and Authentication using MySQL and Node.js.

Node.js + MySQL : Add Forgot/Reset Password to Login-Authentication System.

Nodemailer + Gmail: How to Send Emails from Node.js API using Gmail.

How to store Session in MySQL Database using express-mysql-session.

How to interact with MySQL database using async/await promises in node.js ?

How to use Sequelize async/await to interact with MySQL database in Node.js.

MANY-TO-MANY Association in MYSQL Database using Sequelize async/await with Node.js.

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js.

How to add Routes to insert data into MySQL database-related tables in Node.js API?

Example How to use initialize() Function in Node.js/Express API .

Why is Connection Pooling better than Single Connection?.

How to create MySQL database using node.js.

Translate »