DEPLOY REACT AND NODE APP TO HEROKU
Tags: heroku, react, node, tutorial
Published: 2021-10-20 07:02:16

> Heroku is a platform where majority deploy their backend application. In recent times, Heroku has made it possible to deploy both our client and server side. This makes testing a lot more easier, in the sense that developers don't have to put their client side of the application in another platform and server in another. We would discuss this in great depths in this article.

## Goal

This article aims at creating an understanding of the platform Heroku and simplify the deployment of both the client and server side on Heroku

## Table of Content

- Getting Started
- Heroku
- Deploy our Project
- Conclusion


> This article would not contain any project to build, so you need to have an already existing project. Your project should contain the frontend and the backend, WITHOUT ERRORS _obviously_ . After you've gotten your project ready, let's dive right into this article


Let's briefly discuss the basic packages/frameworks that we would be utilizing.

### Node

This is an Open Source [JavaScript Framework](https://skillcrush.com/blog/what-is-a-javascript-framework/ "What are JavaScript frameworks") for easy developing of scalable server-side and network applications. For more information, visit the [Node](https://nodejs.org/en/about/ "What is Node") official website.

### React

This is a [JavaScript Library](https://generalassemb.ly/blog/what-is-a-javascript-library/ "What are JavaScript Libraries") created by Facebook, that helps in building Interactive User Interfaces. [React](https://reactjs.org/ "What is React") can be used to build not just Web Applications but also Mobile Applications.

> A very interesting node package that would help in your project is concurrently. [Concurrently](https://www.npmjs.com/package/concurrently "What is Concurrently") helps in running more than command at the same time without creating another terminal. This would really help in running both your react and server side together in one terminal locally.

Now here we are. We would be taking a brief look on what Heroku is, sit tight and lets dive in.

### Heroku

#### What is Heroku?

Heroku is a cloud service platform whose popularity has grown in recent years. Heroku is so easy to use and that is why is one of programmers favorite. [Heroku](https://www.heroku.com/what "What is Heroku") is a cloud platform that lets companies build, deliver, monitor and scale apps easily.

#### Installing Heroku

To install Heroku, We have to Download and Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-command-line)

## Getting Started

It is very easy to Get Started with Heroku. Visit [Heroku's](https://www.heroku.com/) official website, Sign Up if don't have an account already. The next step is to create a new Heroku App. At the right top corner, click on the _new_ button and then create a new Heroku App ![Create Heroku App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj868npd3paw19l6o6ei.png)
 

After our Heroku app has been created, we can now Deploy it.

## Deploy Our Project

Make sure your have Heroku installed, by running the command

```bash
heroku --version
```

After We have confirmed that we have Heroku installed, we can now move into our Project.

In the server side of the project, open the `package.json` file and add the following code to our script

```json
"script": {
        "start": "node server.js",
        "heroku-postbuild": "cd client && npm install && npm run build"
    }

```

> `heroku-postbuild` is a command Heroku runs before running the `start` command. The `postbuild` command moves into the client folder in the project and runs `npm install` and then `npm run build`

Then add the following code to your server's file to create a middle-ware that makes use of the already built react app

```js
const express = require("express");
const path = require("path");
const app = express();

//This will create a middleware.
//When you navigate to the root page, it would use the built react-app
app.use(express.static(path.resolve(__dirname, "./client/build")));
```

> Your React App should be contained in a separate folder from your server side of the application. The client side of the application should be contained in a folder named client, in the same directory with your server file.

The next step is to run the following commands to push to Heroku

- Login to Heroku

```bash
heroku login

```

- Initialize a git repository

```bash
git init
heroku git:remote -a <heroku-app-name>
```

- Commit and Deploy to Heroku

```bash
git add .
git commit -am "divofred-tutorials"
git push heroku master
```

## Conclusion

We've been able to push our Application successfully to Heroku. If you encounter an error just run `heroku logs --tails`, This would output all success and errors encountered.

Till We Cross Path, I remain, Fredrick Emmanuel (divofred)😁😁❤❤