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 thestart
command. Thepostbuild
command moves into the client folder in the project and runsnpm install
and thennpm 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
- Login 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)😁😁❤❤
Top comments (3)
simple yet complete.
I had problem hosting my reactjs + nodejs app and tried some complicated methods but this one saved me.
thank you sir
Alright boss
Thanks, this article helped me get the job done!