31 Aug 2013

Publishing static website with Node.js on Heroku

This is my first post on the internet, As i am new to Javascript i always wanted to host my websites or web based experients on the cloud.
So, i came across Heroku when is was digging facebook Graph Api & Javascript SDK for creating Socialike.
Good things about Heroku is its free upto one dyno & easy to use. Today we will host a static website on Heroku.

First, you have to install Git & Heroku Toolbelt on your machine if not installed.

Below is the screenshot of my static website folder(folder name: svsdesigns) structure.
Now we will add some files needed to host our website on Heroku. You can create these or download from github.

1. server.js

In this file we are creating a server to serve static file using express. We are taking anything inside root of our website as static content.
console.log("starting");
var port = process.env.PORT || 5000;
process.env.PWD = process.cwd()

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

app.use(express.static(process.env.PWD));
app.get("/", function(request, response) {
    response.send("Hello SVS!");
});
app.listen(port);

2. Procfile

This file run your server, its same as
$ node server.js
what you do to run your server on local machine
web: node server.js

3. package.json

This file help Heroku to recognize an app as Node app. In this file we declare our app dependencies & the version of the node to be used.
{
  "name": "svsdesigns",
  "version": "0.0.1",
  "dependencies": {
    "express": "3.3.x"
  },
  "engines": {
    "node": "0.10.x",
    "npm": "1.3.x"
  }
}
This is how our folder will look after adding above given files.

Creating an app on Heroku

Now we will create an app on Heroku. Just open Terminal & run command
heroku login
before that make sure Heroku toolbelt is installed on your machine.
$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password:
Could not find an existing public key.
Would you like to generate one? [Yn]
Generating new SSH public key.
Uploading ssh public key /Users/adam/.ssh/id_rsa.pub
After completion of above step run command
heroku create
from the terminal & you are done. Heroku will create an app with some random name which you can change anytime.
$ heroku create
Creating sharp-rain-871... done, stack is cedar
http://sharp-rain-871.herokuapp.com/ | git@heroku.com:sharp-rain-871.git
Git remote heroku added

Adding files to local git repository

So, we are done with creating an app on Heroku.

Next we will add files to local git repositiory. For this from terminal go to your website folder
e.g /Documents/Work/svsdesigns/
& run below given commands one by one.
  • git init
    will make a local repository
  • git add .
    will add all files to local repository
  • git commit -m "first commit"
    commit all changes
$ cd ~/Documents/Work/svsdesigns/
//Run below given commands to add files to git
$ git init
$ git add .
$ git commit -m "init"

All the files are added to git, now we are going to push all files in remote repository
git@heroku.com:sharp-rain-871.git
. For pushing all files from local to remote just run command
git push heroku master
& you are done!
$ git push heroku master
Counting objects: 343, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (224/224), done.
Writing objects: 100% (250/250), 238.01 KiB, done.
Total 250 (delta 63), reused 0 (delta 0)

-----> Node.js app detected
-----> Resolving engine versions
       Using Node.js version: 0.10.3
       Using npm version: 1.2.18
-----> Fetching Node.js binaries
-----> Vendoring node into slug
-----> Installing dependencies with npm
       ....
       Dependencies installed
-----> Building runtime environment
-----> Discovering process types
       Procfile declares types -> web

-----> Compiled slug size: 4.1MB
-----> Launching... done, v9
       http://sharp-rain-871.herokuapp.com deployed to Heroku

To git@heroku.com:sharp-rain-871.git
 * [new branch]      master -> master


Now you can access your website by opening http://yourapp.herokuapp.com (e.g. http://sharp-rain-871.herokuapp.com). You can check the demo website.
For more details or customization to your app like adding custom domain, changing name of your app, etc refer to Heroku documentation.