Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Hosting Node Express Responsive website in Heroku Cloud

, 16 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Please read my previous article Simple Website Creation using node express bootstrap jade if you are interested. CodeProject you can download the code here It was wonderful ride for me to host the site in Heroku, of course I had to little tweak my code, but over all the experience was great. Here I

Please read my previous article Simple Website Creation using node express bootstrap jade if you are interested.

In codeProject, Please read my previous articles Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part1[^] Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part2[^] Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part3[^] Part3 [^]

you can download the code here

It was wonderful ride for me to host the site in Heroku, of course I had to little tweak my code, but over all 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 exist in your machine locally, to the entire world without paying any money, well Heroku is giving you a free option in it’s 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 part1,part2, part3. Here is 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 to demonstrate a sample we need more than one Dyno. But I will respect their free services I might chose to host in Heroku when I get to a real need. For now please read below.

step1: 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.

step2: Install Heroku Belt

Install the software Heroku Belt. It is 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.

step3: 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 eg 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 prefered to do so, and having only one package.json and let the Heroku create whatever is needed.

step4: 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 like above mentioned.

step5: 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 doesn’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.

step6: Make all your application files part of git repository.

First of all keep in mind, 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 downloads 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 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, 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.

step7: 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.

step8: 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 chose by default one app name. Now Heroku creates one app and also creates remote repository for you to check in the local repository code.

step9: 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 it is hosted the code, 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 with out it) by executing the following command.

     $ heroku ps:scale web=1

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

RamuSangabathula
Architect
India India
I have around 9 years of experience in Microsoft technologies, .Net 2.0,3.5, Asp.net MVC developed small to medium scale products using Silverlight 2.0, Asp.net Ajax technologie and Javascript frameworks.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 16 Mar 2014
Article Copyright 2014 by RamuSangabathula
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid