Hosting Node Express Responsive Website in Heroku Cloud

On CodeProject, please read my previous articles:

• Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part 1[^]
• Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part 2[^]
• Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part 3 [^] 

You can download the code here.

It was a wonderful ride for me to host the site in Heroku, of course I had to tweak my code a little, but overall the experience was great.

Here, I hosted the SityRoute app in Heroku cloud. SiteRoute. Take a ride - it is simple and funny, read through the stuff on the pages.

If you really want to demonstrate your simple application today currently existing on your machine locally, to the entire world without paying any money, well Heroku gives you a free option in its packages. We can host our sample works in Heroku and have it enjoyed by all our friends over the world. So here is what I have done, I have hosted my sample website which we have been creating so far in part 1, part 2, part 3. Here, I am going to show you step by step how I have hosted, and the issues I have come across. You can host your app similarly. But keep in mind you can only have one Dyno (a unit of hosting in Heroku) for free, if you want more for scaling then you need to order for extra Dynos. I don’t think we need more than one Dyno to demonstrate a sample. But I will respect their free services I might choose to host in Heroku when I get to a real need. For now, please read below.

Step 1: Register with Heroku

Go to the link Heroku Registration, and choose to Sign up. You don’t need pocket full of money for this, just an email id is enough to complete the registration and get activated. Heroku will send a confirmation email for your account activation, follow the steps as guided by Heroku.

Step 2: Install Heroku Belt

Install the software Heroku Belt. It is a set of tools which will allow us to connect to the Heroku account that we have created above, and also enables us to manage our apps creating, deleting, etc.

Step 3: Prepare Your Package.json File

We need to create package.json file in the root directory of the application, In our SityRoute web app, I have already given package.json file when we were creating the web site, but if you don’t remember, please look below.

{
  "name": "sityroute",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "~3.4.8",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "jade": "~1.3.0"
  },
  
  "engines": {
    "node": "0.10.18"
   }
}

Here, we have to mention engines section as part of the package.json file, because Heroku installs the package using npm install command, and if we don’t specify engines, then Heroku assumes the default version of Node (whatever it is configured in Heroku). Therefore, your application may not run if you have used later version features as part of your application code. In the above json file, we are explicitly mentioning Heroku to install node version 0.10.18 and get all the compatible npm dependencies.

Also another point worth mentioning is scripts section. This section tells Heroku to which command it should use and what app it should load. Heroku should know how to run your app and in which context for e.g., web context, or command line context or whatever. It creates a Procflie automatically if you don’t provide one. I thought of creating a Procfile but not preferred to do so, and having only one package.json and let the Heroku create whatever is needed.

Step 4: Create Your Application Code or Use the Existing One

In our SityRoute example, we have already created code, so we are going to re-use it. Meaning we have the package.json everything set up as mentioned above.

Step 5: Create a git Local Repository

If you have already known what is git, you can go ahead and initiate a local repository. For those who don’t know what is Git, Git is a current and future generations repository. It is a distributed central repository, meaning you can work offline on the go with your local computer and you can check-in the stuff to your main repository when you come on-line , and there is a lot more to it.

Here is how git local repository is created. Go to your application directory, and execute the following command from your command line.

git init

Now your code is initialized for git repository.

Step 6: Make All Your Application Files Part of git Repository

First of all, keep in mind that you don’t have to commit node-modules as part of repository, they are like bin directories you always wanted to exclude, Heroku will always executes npm install on your behalf and download all the required node-module dependencies based on your package.json file.

Here is how you ignore entire node-modules from being tracked in git without disturbing your local copy. Create .gitignore file in the root directory of the application, and have node-modules/, and save the file. Git will not track node-modules directory anymore.

So, all we have done so far is instantiated git repository locally, but you haven’t yet put application files under version control system. It is very simple, Git does this at two levels. First, add all your files to git for tracking. Here is how you do it, execute the following command.

git add .

After the above command, git will start tracking the files for modifications and deletions, run the following command to put all the files in local repository.

git commit -m "base version"

So we are good with the local repository now.

Step 7: Login to Heroku

We need to push the code to Heroku now. From your command line, run the following command:

heroku login

It will ask you for your email login, and pwd for connecting to your heroku account, use the details that you entered while registering. If you are a fist time user, Heroku will create SHA key for secure data transfer, it will create the key in your users directory.

Step 8: Create Your App

Execute the following command from command line to create your app in Heroku.

heroku create   //or heroku create appname

If you don’t give appname, Heroku will choose by default one app name. Now Heroku creates one app and also creates remote repository for you to check in the local repository code.

Step 9: Commit Your Code to Heroku

Run the following command from your command line to commit your code.

git push heroku master 

Heroku will push the code to your app and also gives a public HTTP URL where the code is hosted, you can access the URL to see if it is working or not.

You are good with hosting the code with Heroku, you can optionally use the following commands, to see the status of the Heroku Dynos (individual hosting unit).

You need atleast one Dyno to run your app, otherwise your app will not run, and you can get one Dyno for free, anything more you have to pay. Heroku will take care of creating Dyno and hosting your app inside it. You can chose to scale your app but that is your choice you may have to pay.

heroku ps

Also ensure we have one dyno running web process type (actually, we have to specify web process type in Procfile, but we are okay here even without it) by executing the following command.

$ heroku ps:scale web=1

CodeProject