Heroku is a cloud platform supporting several programming languages used as a web application deployment model.
Heroku (PaaS) platform enables developers to build, run, and operate applications entirely in the cloud.
Heroku is a multi-language cloud application platform that allows developers to deploy, scale, and manage their applications.
How to Deploy Node.js App to Heroku
To deploy a node.js app to Heroku, register on the Heroku platform, create Procfile in the root of the project, log in to our Heroku account from the terminal and deploy the project.
If you have not registered, please register yourself; it is free. After that, you will redirect to your dashboard.
Step 1: Install Heroku CLI.
You can download it from this link, depending on your OS. I am using Mac, so I am installing via homebrew.
brew install heroku/brew/heroku
After that, verify it by the following command.
heroku --version
You will get something like this depending on your Node.js version. “heroku-cli/6.16.12-04b3626 (darwin-x64) node-v9.10.1“.
Step 2: Build a Simple Node.js Express App.
Now, in your local, make a project folder.
mkdir heronode
Go into that folder.
cd heronode
Install the dependencies.
yarn add express or npm install express --save
Create one file inside the root called server.js.
// server.js
const express = require('express');
const app = express();
const path = require('path');
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(process.env.PORT || 4000, function(){
console.log('Your node js server is running');
});
It is just a simple application; you will get the index.html file in response when you hit the root route.
Create the .env file inside your root directory. Define the application port in it.
PORT = 8081
Also, create an index.html file inside the root.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>How to deploy node js application on Heroku</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none">Start Bootstrap</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#awards">Awards</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0" style="margin-top: 20px">
<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
<div class="my-auto">
<h1 class="mb-0">Krunal
<span class="text-primary">Lathiya</span>
</h1>
<div class="subheading mb-5">3542 Berry Street · Cheyenne Wells, CO 80810 · (317) 585-8468 ·
<a href="https://appdividend.com" target="_blank">appdividend.com</a>
</div>
<p class="mb-5">I am experienced in leveraging agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
<ul class="list-inline list-social-icons mb-0">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="experience">
<div class="my-auto">
<h2 class="mb-5">Experience</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Senior Web Developer</h3>
<div class="subheading mb-3">Intelitec Solutions</div>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">March 2013 - Present</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Web Developer</h3>
<div class="subheading mb-3">Intelitec Solutions</div>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">December 2011 - March 2013</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">Junior Web Designer</h3>
<div class="subheading mb-3">Shout! Media Productions</div>
<p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">July 2010 - December 2011</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row">
<div class="resume-content mr-auto">
<h3 class="mb-0">Web Design Intern</h3>
<div class="subheading mb-3">Shout! Media Productions</div>
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">September 2008 - June 2010</span>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="education">
<div class="my-auto">
<h2 class="mb-5">Education</h2>
<div class="resume-item d-flex flex-column flex-md-row mb-5">
<div class="resume-content mr-auto">
<h3 class="mb-0">University of Colorado Boulder</h3>
<div class="subheading mb-3">Bachelor of Science</div>
<div>Computer Science - Web Development Track</div>
<p>GPA: 3.23</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">August 2006 - May 2010</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row">
<div class="resume-content mr-auto">
<h3 class="mb-0">James Buchanan High School</h3>
<div class="subheading mb-3">Technology Magnet Program</div>
<p>GPA: 3.56</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">August 2002 - May 2006</span>
</div>
</div>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
<div class="my-auto">
<h2 class="mb-5">Skills</h2>
<div class="subheading mb-3">Programming Languages & Tools</div>
<ul class="list-inline list-icons">
<li class="list-inline-item">
<i class="devicons devicons-html5"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-css3"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-javascript"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-jquery"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-sass"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-less"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-bootstrap"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-wordpress"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-grunt"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-gulp"></i>
</li>
<li class="list-inline-item">
<i class="devicons devicons-npm"></i>
</li>
</ul>
<div class="subheading mb-3">Workflow</div>
<ul class="fa-ul mb-0">
<li>
<i class="fa-li fa fa-check"></i>
Mobile-First, Responsive Design</li>
<li>
<i class="fa-li fa fa-check"></i>
Cross Browser Testing & Debugging</li>
<li>
<i class="fa-li fa fa-check"></i>
Cross Functional Teams</li>
<li>
<i class="fa-li fa fa-check"></i>
Agile Development & Scrum</li>
</ul>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="interests">
<div class="my-auto">
<h2 class="mb-5">Interests</h2>
<p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an avid skiier and novice ice climber. During the warmer months here in Colorado, I enjoy mountain biking, free climbing, and kayaking.</p>
<p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technolgy advancements in the front-end web development world.</p>
</div>
</section>
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="awards">
<div class="my-auto">
<h2 class="mb-5">Awards & Certifications</h2>
<ul class="fa-ul mb-0">
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
Google Analytics Certified Developer</li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
Mobile Web Specialist - Google Certification</li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
1<sup>st</sup>
Place - University of Colorado Boulder - Emerging Tech Competition 2009</li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
1<sup>st</sup>
Place - University of Colorado Boulder - Adobe Creative Jam 2008 (UI Design Category)</li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
2<sup>nd</sup>
Place - University of Colorado Boulder - Emerging Tech Competition 2008</li>
<li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
1<sup>st</sup>
Place - James Buchanan High School - Hackathon 2006</li>
<li>
<i class="fa-li fa fa-trophy text-warning"></i>
3<sup>rd</sup>
Place - James Buchanan High School - Hackathon 2005</li>
</ul>
</div>
</section>
</div>
</body>
</html>
Create a .gitignore file inside the root.
/node_modules npm-debug.log .DS_Store /.env
Step 3: Run the application locally.
Inside the package.json file, add the scripts.
"scripts": {
"start": "node server.js"
}
Open the terminal in the root and type the following command.
npm start
Go to http://localhost:4000/
So basically, this application is what we will deploy to Heroku.
Step 4: Create Procfile
Inside the root folder, create a Procfile. It is the Heroku file in which we will define the dynos setting, like after the uploaded the app, how to start the node js web server.
// Procfile web: node server.js
Step 5: Log into Heroku from the terminal.
Open your terminal inside the root of the project. Type the following command to log in to your Heroku command.
heroku login
You need to log in with your registered email and password.
Step 6: Deploying Your Node App.
Initialize your project to git repo using the following command.
git init
Then type the following command.
heroku create
It will create a random name for our application. Then, of course, we can rename it, but let us stick with it. In my case, the name is shrouded-scrubland-21108.
Our project structure is something like this.
The next step is to add all the changes to the Heroku platform.
git add . git commit -m "First node app deploy"
Push the changes to the server.
git push heroku master
After that, you can see that we have successfully deployed our node js application.
Step 7: Open the live application.
Type the following command to open the application.
heroku open
It will open up the browser and see our application is running.
You can see all the logs of our application via the following command.
heroku logs
You can also verify by this command to check that our application is up and running.
heroku ps:scale web=1
You can also run on the local using the following command.
heroku local web
This time, you can see the PORT is different. http://localhost:8081/
I am also putting this code on GitHub to check it out.
Hi Krunal,
i have my app to tracker my expenses. It is a SPA(Vue.js) with REST API(Express+MySQL+Sequelize).
Is it still possible to deploy my app with Heroku?
Hi Krunal,
Very nice article for people like me who are new to such concepts. But, I have a question, I already have an Node-React Js application (created by someone else) running on Heroku. But now I am told to make some css and js changes to the website. I have made the changes and added, commited and pushed the new changed application to Heroku. But the changes are not showing up in the finall application (when run on Heroku or when run locally). Can you please suggest what causes it- changes not showing up?
very helpful thanks for this beautiful article
Hi,
I have nodejs app deployed on HeroKu. I want to run multiple versions of my node apis, how can I do that? like v1/getuser v2/getuser
If some one needs to be updated with latest technologies therefore he must be go to see this website and be up to date all the time.