Static Website With node.JS

I am really addicted to nodejs stuffs and modules, not just because of javascript; but also because of a few videos and blogs that I read, made me spend time with learning nodejs. I am at the beginning stage of learning and exploring nodejs. Hence, I am putting everything I have experienced here.

My previous article “Introduction to Nodejs” helps you install and start programming on node platform. This time, I am going to help you create a simple static website on top of nodejs and how to use node modules. This static site can be done with simple HTML and CSS. However, in my opinion, learning in practical manner will add more value in lesser time than reading lots of theories. The following article helps in your Node learning curve rather than a real world problem solver.

Let me take a simple use-case before getting started. I want a simple Shopping cart app built on top of nodejs I will be using this use-case throughout my series of articles.

Why Nodejs?

  • I want my application to serve concurrent requests at same time
  • I want my application to run on distribute environment
  • Javascript is my favourite language and Nodejs is much similar to Javascript

Lets first install Pre-Requisites!

Node Package Manager(npm) is a package manager for node. You can use it to install and publish your node programs. It manages dependencies automatically and can be lot more useful. To install npm, use the following command:

curl | sh

To verify the installation, type the following command:

npm –v

This will print the version of npm installed. As of now, npm is supported only in Linux. We can make use of the npm to install node modules that we need. There are a bunch of node modules we will be using for our site

  • Express, a web framework
  • EJS, a template module
  • LessJS, a styling module

Lets me explain those modules in detail in my upcoming articles. Now, we can just install them by using the Node Package Manager(npm).

npm install express
npm install ejs
npm install less

Getting started

We need a simple page which should display “Coming Soon!” message. The URL for the site will be http://localhost:3000

First we need to run a webserver that will be reached at http://localhost:3000

I just created a folder named “Node_Shop” to place all my code for this project. Create a file server.js, where we can start a server with express and made it to listen on port 3000.

var express = require(‘express’); //This will include expressjs module that we have installed.
var server = express.createServer(); //creating express server
res.set(“hello world”);
server.listen(3000); //will make server listen at port 3000
console.log(“Running at http://localhost:3000”);

The server.js can be executed as:

node server.js

When we hit the url http://localhost:3000 in browser, we will end up with a hello world display!

Now, create a folder “views” under Node_Shop, where all our layout files get stored. After creating the folder, edit server.js and set the path for our template and specify the template engine(in this case, it’s ejs).

server.set(‘views’, __dirname + ‘/views’); //specifying template path
server.set(‘view engine’, ‘ejs’); //specifying template engine

Lets add our view files layout.ejs,and index.ejs. The ejs extention is nothing but a template page. There are many template modules in nodejs, like Jade, haml, etc., that can be used with express. The layout.ejs contain common layout that all pages have. A simple layout.ejs for our site is given below:

< head>
<title>Node Shop</title>
<%- body %>

In this, is where the content from other view pages will fit. To create a “coming soon” page as the default index page, edit the index.ejs and add the content given below:

<h1>Coming soon</h1>

Lets reset our get response to render the index.ejs by using the render function.


The template engine(ejs) will smartly render the index.ejs by combining both the index.ejs and layout.ejs as a single template. After running the server, in the browser, do a right click and view the source. We can see the combined template page.

<title>Node Shop</title>
<h1>Coming soon</h1>

In this article, I am not going to compile lessjs via express server. I am going to do it via normal include of file less.js on head.

Create another folder “static” under Node_Shop where we can store all the static files such as style sheets, images and javascript files. Place a “main.less” file with your desired style within the folder. Finally, we shall style the page with lessjs by including *.less files within the head tag.

server.use({ src: __dirname + ‘/static’ });
server.use(express.static(__dirname + ‘/static’));

and the fully rendered HTML page

<title>Node Shop</title>
<link rel=”stylesheet/less” href=”/static/main.less”>
<script src=”/js/less-1.1.3.min.js”></script>
<h1>Comming soon</h1>

Lessjs is something to add greatness to the styling. We can either include the *.less files within the head tag or we can compile the files via express server itself. I will explain lessjs briefly in the later part of this series.

The complete code can be found on my git-hub repository

Thanks and I hope this article might help some one new to nodejs


About anandof86

Work for CSS Corp Labs, Cloud and Tools.

2 responses to “Static Website With node.JS”

  1. Fabian says :

    Thanks you Anand, you really helped me out with this Tutorial!

    Keep up the good work!


  2. Sardo says :

    Hi Anand. I’m new to nodeJS. This tutorial really help me.
    Is there any plan on another tutorial, like your Node-Shop Application?
    Looking forward to it.
    Anyway, thanks


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: