This article will assume you have the basics of building some type of application or web page that you'd like to be available to the whole of the internet. You just need a place to store it. Maybe it's a small project like my calculator or tic-tac-toe built with Javascript, or maybe something a bit more. It really doesn't matter, as what we'll cover here is getting what you need to deploy your app to Heroku.

Heroku is a free service that will allow you to store up to 5 apps, with more support and app slots available for a small fee. For now we will focus on the free stuff, who doesn't love free?!

First, you'll need to travel on over to the Heroku website and set up your account.

Next you will need to have a local git repo with at bare minimum an index.html file stored within it for Heroku to serve your app to the wilds of the internet.

If you don't already have this repo stored on Github, now is the time to do so. Create a new repo on Github, click the green Clone or Download button and copy the web url listed below it.

Open terminal and navigate to your repo directory, for the sake of this article my repo is named "my-example-app". Set your remote with the copied url:

Create an index.js file so Heroku will know what to do:

Let's create a .gitignore file too, there are some items we will be creating that we don't need to push to Github or Heroku:

And one more, a Procfile for Heroku, note there is no file extension, and capitalization is important:

Open your text editor of choice and lets populate these files with what they need. Inside index.js, copy the following and save:

var express = require('express');
var app = express();
var port = process.env.PORT || 3000;

app.use(express.static(__dirname + '/app/'));

app.listen(port, function() {
console.log('I am listening on port 3000!');
});

Basically this tells Heroku we'll be using an Express framework for node.js to run our application. The port option is so you can open a local copy of the app in your browser if you so choose, good for working on styling options, etc. Although you'd probably be better off installing live-server golbally with npm as it will do live reloads of the page as you edit and save files.

An important note about line 5 of our index.js, the app.use line. The portion containing /app/ will be the directory that your application's index.html lives. This needs to be edited accordingly. For example, if your index.hmtl is in the root directory of your repo a single / would suffice. If it's located in a directory named dist then /app/ would need to be changed to /dist/

Now we'll add some bits into the .gitignore file. This will prevent the files we are about to install from being pushed to Github and Heroku in the near future:

.DS_Store
node_modules

Now lets add a single line to the Procfile, this is basically a script that tells Heroku to execute our index.js file:

web: node index.js

Once again an important note. This single line expects index.js to be located in the root directory of your project, in my case my-example-app. If you move the index.js file to a subdirectory this line will need to be edited to reflect that change. For example if you moved it to your app directory, this line would need to read web: node app/index.js

NPM time! If you dont have npm installed there are plenty of helpful articles online explaining the install process. NPM is a package manager for JavaScript and makes installing things we regularly need a painless process. It is required here: NPM.

Now lets install some stuff! In terminal, once again in the root directory of your app repo, type the following:

Once started you will be asked to reply to some questions, you may skip them by hitting enter or answer them so your package.json that NPM creates has relevant information in it. Now that NPM is initialized, lets install express. Type the following in terminal:

Time to once again hit the Heroku website. Under Personal Apps tab, click the New button. You'll be required to specify a name and choose a region. Names for Heroku apps are first come - first serve, so if prompted that the name is taken simply pick something else! This name will soon be part of the url used to access our deployed application!

After creating the app, if not already, navigate to your newly created app in Personal Apps tab. Open the Deploy tab and scroll to the bottom and copy the line below "Existing Git Repo", paste into terminal, and execute. Note that there is a $ in this line, don't copy that or it wont work, that's just letting you know to copy/paste this line into terminal.

We're so close now! Just run your normal git commands to add, commit and push your added-to repo:

Now for the Heroku portion. Pushing to Heroku works almost exactly like pushing to Github, and is therefor extremely easy!

That's it! You can watch as your application gets built and deployed in the terminal, and sans any build errors you are now on your way to a web app! If there are build errors, be sure to check the Logs section of your application on the Heroku site and note any build errors that may be present in Terminal for googling solutions.