by jaspreet chahal on january 17, 2013 leave a comment
Welcome Mate! Please give this post a +1 if you like it Also If you find this post useful, you might want to subscribe to the RSS feed for updates on this topic. Cheers!
Document version number: initial post
As the title states its a beginners tutorial with a lot of stuff to learn.
This tutorial exist to give you a little bit of understanding on how things like NodeJS, ExpressJS, bootstrap, jQuery and Jade template engine work together.
In this tutorial we will be creating a full web application with 2 pages.
I am going to add more feature to the above app but for this tutorial lets keep things simple.
I hope that you have installed NodeJS on your box. If you haven’t here are instructions to install it on Ubuntu 12
If you are using Windows you can just download the installer and node will be available from command line.
After your installation npm and node commands will be available to your from command prompt. npm stands for Node Package Manager and it helps install Node Packages.
First up create a folder somewhere on your file system called uglify All our App files will go under this folder.
To start with lets create a package.json file under our parent folder (uglify) with the following contents in it
Above package file is pretty easy to understand. Main part in above file is dependencies bit and we will see in a second how its really easy to install dependencies for you project in one hit
Now we will just run the following command
make sure that you you are in same directory as package.json and then run this command
This will install node modules essential to run our code smoothly.
So node modules that will get installed are Express framework, uglifyJS, Jade template engine
Lets now create couple of more folders in your working directory called public and views and also create a file with name app.js
I’ll explain in a bit what app.js is all about. So here is a screenshot of our folder structure for the time being
Under public folder I have created three sub folders as shown below
Now lets start to work on our app.js file
If you are unaware what expressJS is, then you must read some documentation on Express which can be found here
expressjs in broader terms is a node framework that makes you life easier a bit and save you many lines of code.
ok! lets carry on with our app.js file, app.js defines our application and carry most of the code that deals with user requests.
Here is basic code for our app.js file
Please note that we are not using full MVC in our application, its just views that are separated out. depending on the complexity of your Node App you should be looking for a MVC structure that will help immensely with code maintainability. I won’t recommend that your app.js should go beyond few 10s of lines. We will add one more request handler in our app.js file in a bit
please note that app.listen() tells node which port your application is listening to. In our case its port 8080.
ok! before we can kick of our application we have to look at our view file. So here is a full structure of my views folder for icompressjs.com
We will be concentrating just on layout.jade, header.jade, footer.jade and index.jade in our example application
Remember! that in our app.js we told node to use jade as our template engine. Know more about jade by browsing official documentation page located here
We have a common layout page that will be applied to all other files as shown below
All whitespaces are important else your file may not work or produce unexpected results. I will not be explaining about jade how it works but let me share a couple of cool cssdeck’s that explain much of the working of jade
so as you can see that we are using HTML5 as our doctype with !!! 5 declaration
Please remember “block content” is a reference which will be replaced by actual index.jade contents during processing. Its explained later in this article. Just remember this reference for the time being.
then we are including our header file that have our navigation and other includes that will be common to all sub templates, lets check it out
Before we proceed with our index.jade template lets quickly check whats in our footer.jade file
You can have whatever you like in your footer.
Lets now check out out index.jade view
Couple of things to note above
Other stuff is just normal HTML and a click event handler (jQuery) added at the end for compress it button
Alrighty! with all the files in place its time to run our app
run your app as
If there are any issues you will know straight away. the code above is verified so it should work without giving much grief.
Now that if some other process is not already using port 8080 its time to direct your browser to http://127.0.0.1:8080
You should see something like this