Click here to Skip to main content
12,747,719 members (40,400 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


9 bookmarked
Posted 15 Mar 2014

Create a Simple Responsive website using Node, Express, Bootstrap and Jade Part1

, 16 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
CodeProject If you know about NodeJS already, you can skip this section, and move to installing Node. Let me give you a brief summary of what/why Node is. It just covers few scenarios but Node is more deep and can do many other things. Ryan Dahl’s creation…, Node is an event driven, asyn

If you know about NodeJS already, you can skip this section, and move to installing Node.

Let me give you a brief summary of what/why Node is. It just covers few scenarios but Node is more deep and can do many other things.

Ryan Dahl’s creation…, Node is an event driven, asynchronous programming platform on the server side. NodeJS is the current web development platform. Web applications built using node will respond to events as opposed to traditional application development model like PHP. Node is written in Javascript and uses Google’s V8 beast engine, also it uses so many open source libraries in C for OS level operations. Haa, so that’s it…?, today we have this kind of event driven programming model already in traditional web platforms too, for eg popular right, but what gives Node an edge?,read below. It is excellent in below areas in additional traditional web applications.

Supports Push based

Let me explain this by an example. Suppose you are working in a team where lead will assign tasks to team members, every team member need to complete their tasks with in given period of time. So to know whether you are assigned any tasks, you would keep on poking your lead for that, but the best way is your lead telling you, “I will let you know when I assign a task to you”, a Push based solution.

Superb candidate for real time apps

Consider Weather udpates, Stock quote updates. All these supposed to be the use cases for server pushing the data to the client. If the server is letting the client know whenever there is a change in the weather or stock quote, it would be definitely better than client always poking the server to know them, saves the lot of network traffic and also it is very real time.

Consider day to day development example.

If you have ever written a file upload progress bar in web using traditional web platform trust me it might have been not that elegant, because the client server web programming model is event driven programming of course, but it is a pull based model from client to server, for eg if the client would like to know how much percentage of the file is uploaded so that it can update it’s progress bar in the browser, client has to keep on poking the server to let the server know the client about the progress of file upload. Imagine if ten thousand clients are asking every time about this file upload status definitely unnecessary traffic which can be saved if the platform is shifted to Node.

Today Social networking sites.

Now the current web blogging platforms are real time based, the moment server sees any changes to data it notifies the respective client. Push Model. For eg, if a user is posting a comment on the blog site, server will notify the recipient with the data immediately. LinkedIn is already on Node platform.

Single Programming Language from front to end.

You don’t need to learn multiple languages or hire staff for multiple languages for maintaining different layers. With Node you can pretty much have Java script single language stack in all the layers of your web development. This also having lot of scope for code re-usability.

Asynchronous Programming Model

Node makes the above push model possible by Asynchronous programming Model. It uses the javascript call back mechanism for achieving the asynchronous programming style. Node has a single event loop running all the time, every time the event loop runs it is called a tick. So each call back will register to a particular tick meaning with in one cycle of event loop. When all the call backs are executed it will finish the event loop.

Installing Node

If you have already Node installed on your machine, you can skip this block and move to next section.
Installing Node on Windows will not even take 3 minutes, but for Mac and linux you got to do little bit work. So I would suggest you please visit the NodeJS site and windows guys click on green Install button on the site, it downloads the msi for you, if you want to virus scan the software, you better do that, I do the virus scan with my semantic end point. Linux and Mac users click on the Downloads link and get the appropriate version suitable for you. To confirm if the Node is installed successfully you can open command prompt in windows and type Node press ENTER, it waits there for couple of seconds and gives the Node prompt. It means you are good with the Node installation.

It is not a simple Hello World

We are not setting up a simple hello world page, it is a bit more than that, Let us not do the Hello world always. So in the following sections I am going to introduce a bit on the technologies I have been using for the creation of the site. If there is any set up needed for them, we will do that as well. Let us get on to the ride.

Jade Templating

For the creation of our web site, I chose Jade templating, because it is the node’s one of the templating engines, very simple to understand and write. It needs very less key strokes to write templates, otherwise we have to wreck the key board to write the html on to the page meaning always type less than, greater than, forward slashes, painful.. isn’t it?

Here is the tutorial for Jade templating, spend couple of minutes on this site and admire the beauty..

We are using Bootstrap.

Here comes the Responsive stuff, if our site has to work on Desktop, mobiles and tablets etc, we need to be doing our css design for each devices, not a simple job. Don’t worry, experts already taken care of this part. We have Twitter Bootstrap framework available for this, it is open source, available for download anytime here, you can download various controls from Bootstrap and start working on them.
I like the Cyborg theme, and I got the bootstrap css for Cyborg theme, I have used the same theme in my sample.

Node Express

Node Express is wonderful, It is a web application framework for Node platform, if you are curious to build web applications on Node platforms in order to get the benefits like Push model, light weight and web site speed, consider using Node Express. It is the middle ware contains lot of futures. So don’t worry about it too much for now, you don’t need to have complete knowledge of these technologies right away because we only need to know, what we need to know for the scope of this article.

Our Web site Design

I got a mid night flash and started a company by morning, became an entrepreneur. It is called City Router Hub . You know what we do, we provide internet for free, all over the world, wherever you are. I am just kidding. you know rest of what company does check on company web site. Here we have two pages, Home and About. Home is the landing page describes our services, About page tells about us.


If you are interested pay attention to the text, it is funny. I spent sometime on writing the funny stuff.

here is how our About page looks like,


Read my next post part2

here in Code project part2


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


About the Author

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

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170215.1 | Last Updated 16 Mar 2014
Article Copyright 2014 by Ramu Sangabathula Original
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid