Hello world, Today we are going to discuss that how to Create simple static website with nodejs,express and jade.

I have divided this tutorial in following parts:

• Introduction of Node.js and express
• Install Node.js and express
• Create sample website
• Test our website 

1. Introduction of node.js and express

As defined in the above parts, first of all we will discuss about Nodejs and express 

Node.js

Nodejs is created by Rayan Dahl in 2009. According to Wikipedia, “Nodejs is an open-source, cross-platform javascript run-time environment for executing javascript code server side”.It means that Nodejs is not a new language but a run-time environment which is built in javascript.

Here you can read more about Node.js

• Wikipedia
• Official Website

Express Web Framework

Express is a web application framework built for Nodejs. This  is designed for building web application and API’s.

With the help of following link you can grab full knowledge about this framework.

• Wikipedia
• Official Website

Now we knowledge that what is Nodejs and what is Express. Now are going to discuss the second part of this tutorial. In this part we will discuss that how we can install this both equipment.

2. Installing node.js and express
   

Install Nodejs

Installation Nodejs is very easy. Download Nodejs from this link. Here I have installed Nodejs on my window operating system. If you using another operating system then you can download the relative package from given link.

After download Nodejs, Run the set up and install on your system. After set up, we will verify that Nodejs is properly installed on our system or not.

• Open Command Prompts.
• Run the command “node –version”

If you see the version number that means Nodejs has been installed properly on your system and if version number is not showing then there are some problem in your setup.

Install Express

After installing Nodejs, We will install express. Before installing express we will discuss about npm and package.json.

NPM

NPM is a “Node Package Manager” for javascript programming language.  It is default package manager for Nodejs.

Package.json

This is the file where we manage the all dependencies of Nodejs. So first of all we will initialize the package.json with the following command.

npm init

The above command with create default package.json file. Before creating file it will ask you some basic things like project version, description, name etc. If you do noo want to enter detail then Just skip the steps with enter button. At the end, You can see the package.json file in your folder. Your default package.json file will be following:


{
"name": "sample-website",
"version": "1.0.0",
"description": "This is sample website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Now we can install express with following npm command.

npm install express –-save

Above command will install express in node_modules folder. Now we have the following file structure.

• Create index.js file at root with following code.

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

// Show the default message
app.get('/',function(req,res){
    res.json({'title':'Hello World!'});
});

// Run the Server
app.listen('3000',function(){
    console.log('Server is running at PORT '+3000);
});

Open your browser the enter “localhost:3000“. Here you see the Hello World message.

Here we have installed Nodejs and Express Successfully on our system.

---

Now we will  create our first simple  app with nodejs, express and jade (view engine, install with this command npm install jade –save). This is a static app with three pages Home, About and Contact page.

• Replace the following code in your index.js file with run in the browser.

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

// Show the Index Page
app.get('/',function(req,res){
    res.render('index',{title:"Home Page",'description':'This is Home page description.'});
});

// Show the About Page
app.get('/about',function(req,res){
    res.render('index',{title:"About Page",'description':'This is About page description.'});
});

// Show the About Page
app.get('/contact',function(req,res){
    res.render('index',{title:"Contact Page",'description':'This is Contact page description.'});
});

// Set the view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// Set Public Folder as static Path
app.use(express.static(path.join(__dirname, 'public')));

// Run the Server
app.listen('3000',function(){
    console.log('Server is running at PORT '+3000);
});

• Create views folder and inside views folder create index.jade, about.jade and contact.jade file with following code.

//- Index.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading=title
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
            div.page-content
                p.page-description=description

//- About.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading=title
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
            div.page-content
                p.page-description=description

//- Contact.jade
html
    head
        title=title
        link(rel="stylesheet",href="/stylesheets/style.css",type="text/css")
    body
        div.container
            div.top-menu
                h1.page-heading=title
                ul
                    li
                        a(href='/') Home
                    li
                        a(href='/about') About
                    li
                        a(href='/contact') Contact
            div.page-content
                p.page-description=description

• Create public folder at root.
• In public folder create stylehseets folder with following style.css file with following code

body{
    font-family:Arial, Helvetica, sans-serif;
}
h1,ul{
    margin: 0px;
    padding: 0px;
}
.container{
    width:1000px;
    margin: 0 auto;
    height: auto;
    padding:10px;
    border:1px solid #ccc;
    box-shadow:0px 0px 5px #ccc;
    margin-top:5%;
    overflow: auto;
}
.top-menu{
    border-bottom:1px solid #ddd;
    padding-bottom:5px;
    overflow: auto;
    margin-bottom: 30px;
}
.page-heading{
    float: left;
}
.top-menu ul{
    float: right;
}
.top-menu ul li{
    list-style: none;
    display: inline-block;
}
.top-menu ul li a{
    display: block;
    padding: 10px 5px;
    text-decoration: none;
    font-size: 13px;

}

• Run your server again and you will see the following screen in your browser.

You can easily navigate on about and contact.