How to Deploy a Node.js App to Heroku

Free Course

Build Your First Node.js Website

Node is a powerful tool to get JavaScript on the server. Use Node to build a great website.

Introduction

Heroku is known for making server configurations easy and painless. We can build faster and worry about the things that matter to us instead of trying to configure our own servers.

Today, let’s look at how we can deploy a simple Node and Express application to Heroku in mere seconds.

Getting Started

Go ahead and go to Heroku.com and create your free account. At first glance, the dashboard is incredibly simple and user friendly. It gives us this great Getting Started with Heroku dialog where we can find the instructions for each type of app you can deploy.

01-heroku-dashboard

We’ll be walking through the Node deployment instructions. Let’s get going!

Tools Needed

You’ll need a few things to start your deployment:

The Heroku Toolbelt

The Heroku toolbelt will give us access to the Heroku Command Line Utility, as well as git, and Foreman (tools we’ll use later).

After we install the Toolbelt, we’ll have access to the heroku command. Go into your command line and type:

$ heroku

02-heroku-installed

Now you can see all the commands available to us. We’ll only be using a few of them today. The first of these will be logging in.

Logging Into Heroku

This is the way we can link our local desktop to Heroku. We will authenticate from the command line so that Heroku will know that we are authorized to send applications for deployment. This is a fairly easy process.

Just type:

$ heroku login

03-heroku-login

We’ll authenticate and upload an SSH public key. Easy cheese! Now let’s move on and start building a very simple application so that we can deploy it to Heroku.

Creating a Simple Node Application

Let’s create a very simple Node application where we just spit out some words to a user. The benefit of Heroku is that we can deploy from a git repository which makes our lives much easier. Just push and our changes are live!

We’ll be going through creating a simple Node app and this will be good practice for those that want it.

If you want to skip this step, just clone our sample repository:

Sample GitHub Repo

You can use this repo to deploy to Heroku or just follow along and create your own repo and get some Node practice in.

Use a Git Repo

In order to do this, create a git repository on your favorite git site (GitHub, BitBucket, etc).

Create a repo called heroku-node and give it a .gitignore file for Node applications.

Now go ahead and clone your newly created repo:

$ git clone git@github.com:scotch-io/heroku-node

We’ll just need a few files for this app. Go into your heroku-node folder and create the following files:

- public/
----- css/
---------- style.css
- views/
---------- index.ejs
- .gitignore
- package.json
- server.js

This will be a very simple app where we just use Node, Express, and EJS to display a basic website.

04-sample-app

We’ll go line by line in each file and don’t worry, this will be a quick affair.

package.json

Let’s start with the package.json file since that’s where Node apps start.

{
  "name": "heroku-node",
  "description": "Our sample Node to Heroku app",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "ejs": "~1.0.0",
    "express": "~4.9.8"
  }
}

This is the basics of what we need in our package.json file. Go ahead and install ejs and express from the command line now using:

$ npm install

Next up is our server.js file.

server.js

var express = require('express');
var app = express();

// set the port of our application
// process.env.PORT lets the port be set by Heroku
var port = process.env.PORT || 8080;

// set the view engine to ejs
app.set('view engine', 'ejs');

// make express look in the public directory for assets (css/js/img)
app.use(express.static(__dirname + '/public'));

// set the home page route
app.get('/', function(req, res) {

    // ejs render automatically looks in the views folder
    res.render('index');
});

app.listen(port, function() {
    console.log('Our app is running on http://localhost:' + port);
});

There’s a lot going on here, but it’s not too bad once we go line by line. In this server.js file, we are:

  • grabbing all the packages that we need
  • setting the view engine to EJS (more info)
  • using express to serve static assets from the public folder
  • creating a home page route to deliver a web page (more info)
  • setting a dynamic port
  • making the application listen on that port

Now let’s move onto creating the view file and our stylesheet.

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node Sample App</title>

    <!-- CSS -->
    <!-- load bootstrap and our own personal stylesheet -->
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/superhero/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="container">
    <div class="jumbotron">
        <h1>This Is Heroku Awesome!</h1>
        <p>This is the sample of a tutorial on <a href="https://scotch.io">scotch.io</a></p>
        <a href="https://scotch.io/tutorials/" class="btn btn-primary btn-lg">View the Tutorial</a>
    </div>
</div>
    
</body>
</html>

We are using Bootstrap as served by BootstrapCDN and using a custom stylesheet. Let’s create that also.

public/css/style.css

body    { padding-top:50px; }
.container .jumbotron    { border-radius:40px; }

Testing Our Sample App

Now that we have the files and setup necessary, go into your command line and start up the app!

$ node server.js

You should see Our app is running on http://localhost:8080 and be able to view the site in your browser.

04-sample-app

With our test application out of the way, let’s get back to what we are here to do, deploy to Heroku.

Deploying Your Node App

This is a very simple process. From within the folder of your git repo, we do the following steps:

  1. Create a remote repository (called heroku as opposed to our main origin remote repository) so our application knows where to push our deployable code
  2. Push the repository!

Let’s create the remote repository:

$ heroku create

05-heroku-create

This will create a random name for our application, in this case, calm-reaches-6216. That isn’t really ideal so let’s rename that to heroku-node.

$ heroku apps:rename heroku-node --app calm-reaches-6216

That command doesn’t work since Heroku will inform us that the app name is taken. Let’s add a number to our new name and move on.

$ heroku apps:rename heroku-node-8080 --app calm-reaches-6216

Edit: This tutorial has since changed the name of the Heroku instance to heroku-node-scotch.

You can also bypass all this by naming your application from the start:

$ heroku create heroku-node-scotch

06-heroku-rename

Deploying Code

Now that we have everything in order, go ahead and push to Heroku!

$ git push heroku master

This informs git that we would like to push to the newly create heroku repository and the master branch.

07-heroku-deploy

We can see as Heroku sees that our application is a Node application. It will then go through adding the dependencies by reading our package.json file.

Ensure One Instance Is Running

We want to be sure that our app is running. Type the following to get confirmation:

$ heroku ps:scale web=1

Our application is ready!

Defining a Specific Run Command

By default, Heroku will look into our package.json file under the scripts section and grab start. Sometimes we won’t have that defined or it will be different than what we want the server to execute. We can specify the exact command we want by creating a Procfile.

Just create a Procfile in the root of your project and define the following:

web: node server.js

This tells Heroku that when deploying to the web, this command should be used to start our application.

View Our Application in Browser

We’re finally at the part that we’ve wanted this entire time. Seeing our application in browser!

If you remember the crazy random name that Heroku generated for you, or renamed the app yourself, go ahead and visit that in browser:

http://heroku-node-scotch.heroku-app.com

There is also a shortcut to open in browser using the command line:

$ heroku open

It’s magic! We have our site in the browser just like we wanted.

08-heroku-browser

Using a Current Heroku App

If you switch to a different computer and want to access an already existing project. The steps are simple.

  • Download the Heroku Toolbelt
  • Login: heroku login
  • Add your public key: heroku keys:add
  • Pull down your current application heroku git:clone -a app-name
  • Make your improvements
  • Git add and commit your changes
  • Push back to heroku: git push heroku master

With these simple steps, you can jump onto any computer and immediately grab your current projects.

Conclusion

Now we can easily use a git repo to deploy to Heroku for all the world to see. In the future we will be going over more Heroku things like scaling, databases, specifying more startup commands than node server.js, and starting a console.

In the meantime, go through the Heroku Node docs and sound off in the comments if you’d like us to cover any other Heroku things or other services similar to Heroku.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.