DEPLOY REACT AND NODE APP TO HEROKU

#heroku #react #node #tutorial

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 for easy developing of scalable server-side and network applications. For more information, visit the Node official website.

React

This is a JavaScript Library created by Facebook, that helps in building Interactive User Interfaces. 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 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 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

Getting Started

It is very easy to Get Started with Heroku. Visit Heroku's 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

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

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

"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

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

heroku login

Initialize a git repository

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

Commit and Deploy to Heroku

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)😁😁❤❤