What is Heroku?
Heroku is a cloud platform that allows web developers and business to create, run and monitor web and mobile applications, specifically in the cloud. Heroku supports various programming languages, and it allows web developers to deploy, scale and manage the web applications.
We are going to take the help of Heroku Toolbelt to install the Heroku CLI on our local system. Heroku CLI allows us to perform the following tasks directly from our local machine:
- Check Heroku logs
- Create a Heroku app
- Deploying to Heroku
- Monitor Heroku status
- Allow installing Heroku add-ons
Deploy Simple Node JS Web App To Heroku
Let us start creating a free account at Heroku cloud application platform, go to the official Heroku website to create an account.
Step 1: Install Heroku CLI using Heroku Toolbelt
We are all set to install and configure Heroku CLI, we are using MacOS for this tutorial. You can use Heroku Toolbelt to install Heroku CLI for MacOS, Windows & and Ubuntu.
Heroku Command Line Interface (CLI) allow us to manage the Heroku apps directly from the terminal shell.
$ sudo npm install -g heroku
$ password: xxxxxxxxThe following output will be displayed on your terminal when you are done setting up Heroku CLI:
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Thank you for testing (⩗) date-fns v2!
In v2 we've introduced a number of breaking changes
that make date-fns even more consistent and reliable.
Please read the changelog carefully: https://git.io/fxCWb
Please support us at Open Collective: https://opencollective.com/date-fns
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
+ heroku@7.25.0
added 362 packages from 266 contributors in 88.617sEnter the command in the terminal to verify the Heroku installation:
$ heroku --versionStep 2: Create Basic Node and Express JS Web App
Create a project folder using following command.
$ mkdir node-app-herokuHead over to the project folder.
$ cd node-app-herokuIn the next step we are going to create the node app using the following command:
$ npm init
# Press ^C at any time to quit.
# package name: (app-heroku) node-app-heroku
# version: (1.0.0)
# description:
# entry point: (app.js)
# test command:
# git repository:
# keywords:
# author: Digamber
# license: (ISC)
# About to write to /Users/digambersingh/Desktop/node-app-heroku/package.json:
# Is this OK? (yes) yesNow, we will install express js to make the server settings for our Node app.
$ npm install express --saveCreate the app.js file in the root directory of your project and include the given below code in the same file:
var express = require('express');
var app = express();
var path = require('path');
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(process.env.PORT || 4000, function () {
console.log('Node app is working!');
});With the help of express js we have created the basic app, we have set the application port and root for the application.
In the next step, we will create the .env file in the root of our project and then add the following code in the .env file.
PORT = 8080Then create the .gitignore file and include the given below code in the file. It will save pushing un-required code to the Heroku master.
/node_modules
npm-debug.log
/.env
.DS_StoreIt’s time to create the index.html file, add the following code in the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heroku Node App Deployment</title>
<!-- description text that displays below the link in google search results -->
<meta name="description" content="Description of site" />
<style>
header:after, nav:after, footer:after, .module-block:after, .gallery:after, .social:after{content:".";display:block;height:0;clear:both;visibility:hidden;} *{margin:0;padding:0;} body{font-size:16px;line-height:1.5;font-family:'Josefin Sans', sans-serif;color:#272727;background:rgb(247, 251, 252);background:-moz-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 251, 252, 1)), color-stop(40%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(173, 217, 228, 1)));background:-webkit-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-o-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-ms-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);} header, footer, article, section, nav{display:block;} img{border-radius:100%;max-width:100%;display:block;} a{color:#D24655;text-decoration:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;} a:hover, a:focus{color:#000;} a img{border:none;} h1{font-size:50px;margin:0;color:#000;font-weight:normal;line-height:1;} h2{font-size:24px;letter-spacing:2px;text-transform:uppercase;font-weight:normal;margin:0 0 24px;line-height:1;} h3{font-size:30px;font-weight:normal;margin:0 0 24px;line-height:1;} p{font-family:'Vollkorn', serif;margin-bottom:24px;} header{margin:20px 40px 60px;} header div{margin-top:40px;width:60%;float:left;} header p{color:#272727;font-size:18px;margin:0;font-family:'Josefin Sans', sans-serif;} nav{float:right;width:40%;} nav ul{float:right;} nav li{float:left;list-style:none;padding:4px 0;} nav a{color:#565656;display:block;font-size:12px;margin:5px 2px;padding:10px 10px 8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-right:1px dashed rgba(0, 0, 0, .3);} nav li:last-child a{border-right:none;} nav a:hover, nav a:focus{text-decoration:none;background-color:#f0f0f0;border-color:transparent;} .up{margin-top:50px;} .up a{background:rgba(0, 0, 0, .25);font-size:30px;padding:12px 10px;border-radius:10px;text-shadow:1px 1px 2px #fff;} .up a:hover, .up a:focus{color:rgba(0, 0, 0, .45);text-decoration:none;} img.right{float:right;margin:0 0 20px 20px;} .social li{float:left;list-style:none;} .social a{display:block;font-size:12px;margin:5px 2px;padding:10px 10px 8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-right:1px dashed rgba(0, 0, 0, .1);} .social li:last-child a{border:none;} .post{position:relative;margin-bottom:50px;padding-left:24%;} .post h3{margin-bottom:10px;} .post img{width:20%;position:absolute;left:0;top:0;border-radius:0;} .date{display:block;margin-bottom:10px;} .gallery li{float:left;list-style:none;width:21%;margin:0 5.3333% 20px 0;} .gallery li:nth-child(4n){margin-right:0;} .gallery a{display:block;} .gallery a img{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} .gallery a:hover img, .gallery a:focus img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} .page-wrap{max-width:960px;padding:0 20px;margin:0 auto;} .module-block{background-color:#fff;margin:0 0 70px 0;padding:40px;-webkit-box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);-moz-box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);border:1px solid rgba(0, 0, 0, .1);} .module-block h2{padding-bottom:30px;margin-bottom:30px;border-bottom:1px dashed rgba(0, 0, 0, .3);}
</style>
</head>
<body>
<section class="page-wrap">
<header>
<div>
<h1>Deployed to Heroku</h1>
</div>
</header>
<article id="block1" class="module-block">
<img class="right" src="http://placehold.it/150"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu velit tempus, pulvinar velit eu, laoreet
est. Nulla vel massa at mauris pellentesque imperdiet. Donec tempor egestas nisl nec faucibus. Ut congue
semper nisl eget lobortis. Aliquam vulputate dolor mi, vitae gravida nunc porta sit amet. Nullam
finibus, nisl quis suscipit lacinia, diam justo hendrerit nisl, accumsan sodales risus lacus non quam.
Proin dignissim tempor arcu, et aliquam erat accumsan eget.
</p>
<ul class="social">
<li><a href="https://www.positronx.io/free-angular-tutorials/">Angular Tutorials</a></li>
<li><a href="https://www.positronx.io/">positronX.IO - Software Development Resources</a></li>
</ul>
</article>
</section>
<!-- page-wrap -->
</body>
</html>Step 2: Create Heroku Procfile
In this step, we are going to create Heroku Procfile, Heroku apps use the Procfile. This file holds the commands which are run by the Heroku app when the apps are starting up. You define your app’s process types in it.
Go to your app’s root and create a file by the name of Procfile and add the following code in it:
web: node app.jsStep 3: Add the Script in Package JSON
Go to pacakge.json file and the following script in it:
"scripts": {
"start": "node app.js"
}
Step 4: Deploy Node App on Heroku Platform using Heroku CLI
In this final step, we are going to deploy Node app on Heroku. Login to Heroku using Heroku CLI from your terminal. It will ask for your Heroku email address and password:
$ heroku login -i
# heroku: Enter your login credentials
# Email [johndoe@yahoo.com]:
# Password: ***************
# Logged in as johndoe@yahoo.comInitialize your Node app to Git repo using the below command:
$ git init
# Reinitialized existing Git repository in /Users/johndoe/node-app-heroku/.git/Enter the given below command to create the project on Heroku platform. Heroku CLI will generate the project for you with a random name. You can later on change this name by going to Heroku admin dashboard.
Heroku CLI generated shrouded-mountain-26368 app name for me.
$ heroku create
# Creating app... done, ⬢ shrouded-mountain-26368
# https://shrouded-mountain-26368.herokuapp.com/ | https://git.heroku.com/shrouded-mountain-26368.gitInitialize a git repository in a new or existing directory
$ heroku git:remote -a your-heroku-app-name
# set git remote heroku to https://git.heroku.com/shrouded-mountain-26368.gitThen, add and commit your Node and express js app:
$ git add .
$ git -am "make it great"
Deploying to Heroku
Finally, we are going to push Node and express js app to Heroku master. Run the command to push your Node and express js web app to Heroku. If everything goes fine then you’ll get the similar output in your terminal:
$ git push heroku master
# Enumerating objects: 4543, done.
# Counting objects: 100% (4543/4543), done.
# Delta compression using up to 4 threads
# Compressing objects: 100% (3525/3525), done.
# Writing objects: 100% (4543/4543), 3.92 MiB | 1.03 MiB/s, done.
# Total 4543 (delta 1396), reused 3533 (delta 812)Now you have pushed your app to Heroku, in the next step go to Heroku admin dashboard and click on the “Open app” button to open the app in the browser:
Or you can also enter the below command to open the Heroku app in the web browser:
heroku openYou can use the following command to check the logs of your Node js app in the terminal:
$ heroku logs --tail
Step 5: Check out Live Heroku Node JS App
You can find out the live demo of the Node JS app, this web application is being server from Heroku cloud platform.
Check can check locally your Node js web app using given below command on http://localhost:8080
$ heroku local web
You can checkout the GitHub repo by clicking on the given below button.
If this tutorial helped you then i would request you to save it with others. Thanks for reading, have a good day!