Basic Scaffolding for a Node.JS Powered Website Project

As a node.js enthusiast, I have made multiple small to medium size web apps using node and its many various useful libraries like Express.JS. Previously I made a blog post about how to get started with making a node.js powered website and it has become one of the post popular entries on my blog however the feedback I got was that I need to include an example. I originally didn’t include one because I felt like there wasn’t really enough code to actually make it worthwhile, especially since some excerpts were already in the post. However, I have since realized that even if not used as an example, a basic scaffolding would help me (and thus probably others) with getting started on making their node website. Consequently, I introduce to you my “Node Website Scaffolding” project! Getting started is as easy as going into your terminal and typing

git clone https://github.com/podrezo/node-website-scaffolding.git

This will download everything you need except the dependencies. It comes with the latest (at the time of me writing this) bootstrap which is version 3.1.1. Let me run you through the ropes of this project…

Your project should contain the following key directories & files:

public/
views/
index.js

I’m omitting some files like README.md, .gitignore and possibly others because they are not of much concern to us right now.

Getting started: Running the project

Before we do anything else, we need to download the dependencies for the project (e.g. express and the doT template engine). NPM can automatically install these for us based on the package.json file, so just cd into the project directory and type “npm install”; you should see something like this:

Output from the npm install command
Output from the npm install command

Now that you have all the dependencies downloaded, you can simply type “node index.js” to start the website server. Once it is running, you can point your browser at http://localhost:8000/ and you should see something like this:

Scaffolding Site Preview
Preview of what the web browser will show

 

Voila! Your node powered website is already underway.

How it all works

For a detailed technical explanation of what’s going on behind the scenes, consult my previous blog post: Serving a dynamic website with Node.JS and ExpressJS using doT for templating. However, as an overview of this project in specific we have the following:

  1. index.js acts as an entry point into into our application; it harnesses express to start a webserver that will respond on port 8000
  2. In index.js we specify that the webserver should respond to a ‘GET’ request for ‘/’ with some content (thus making that URL valid)
  3. For the content we have four parts
    1. The template data (that is, a JSON object which specifies the data for the page which is going to be dynamic in a real world situation)
    2. The ‘layout’ template which refers to layout.html; this contains the overall template for every (not really, see below) page to use
    3. The ‘body’ template which refers to index.html; this contains the template for the specific page we want to access (this is also called a view)
    4. The non-template content like CSS, JS, and images which is served not by doT but by express directly from a static directory

This all happens in the following lines of code from index.js:

app.get('/', function(req, res){
 var templateData = {title: "This title is from the template data JSON object"};
 res.render('index.html', templateData);
});

So notice how there’s no reference to ‘layout.html’ that I mentioned above in this code; this is because layout.html is always loaded by default as your main template. This file should contain your doctype, head, any scripts and css to load, your header and footer, navigation, etc. – the kind of stuff that will be visible on every page. Then you have the ‘index.html’ page that we reference in the code, this is what is actually going to display our content (for the most part; there is some overlap of course). So in our case, the index.html only contains the div tag that encloses the header and content on the page, but not the navigation. You can find both the layout.html and index.html files in the views directory. You can add more views if you need them.

All the non template content is specified as static in express, so if you notice that we have a directory called ‘public’ and in it we have all the js/css/image files. We explicitly tell express to serve this content as static when we configure the application in the following lines:

app.use('/css',express.static(__dirname+'/public/css'));
app.use('/img',express.static(__dirname+'/public/img'));
app.use('/js',express.static(__dirname+'/public/js'));

This lets our layouts and templates seamlessly make use of all the resources we need.

Some basics of the doT template engine

I’m not going to get into the specifics of the syntax since that is easily available on the homepage for doT (link at the bottom of this article) but I want to mention a few important pieces of information about doT that will make your life a lot easier.

Variable Scope

Firstly, it is important to understand that the layout view has access to all the same variables as the body view. That is, you can reference the title or content from layout.html directly, just as you would in the body. This allows you to have a title tag that contains the title of the page, even though the title is in layout and the header displaying that may be in the index view. You will see that in my scaffolding if you open the layout.html file.

Layout Or No Layout?

Secondly, you don’t have to use only one template, or any template at all for that matter.  By default, layout.html is always rendered on top of whatever view you specify; that is if you render index.html it will become the {{=it.body}} part of the layout.html template. However, there’s many cases where you wouldn’t want that to be the case. For example, if you are loading some HTML via AJAX into another page, you don’t want to repeat the layout.html and only want the bit of HTML from your view. In that case, you can set a property called ‘layout’ in your template data and set it to false. So, if we applied this to the example that already exists in the project, we could do something like this:

app.get('/nolayout', function(req, res){
 var templateData = {title: "This title is from the template data JSON object",layout:false};
 res.render('index.html', templateData);
});

Which would produce the following in the browser:

Scaffolding showing template without layout
Scaffolding showing template without layout

Notice how the nav, css, and everything else is missing and only the contents of index.html are present without anything in layouts.html. We can do the same thing but change the ‘layouts’ property to a path to use a different layout instead of layout.html.

Definitions – reduce, reuse, recycle!

Definitions are blocks of HTML that you can reuse. They are incredibly powerful because they are available from the layout to be used in the view template. This is incredibly useful if you have a footer that is the same on every page but belongs inside the content div of most but not all of your views, just as an example. In that situation, you have to either use two different layouts which may be a hassle or you can simply define the footer as a definition block inside the layout and then simply reference it from your view. There are many other niche applications of this as well like serving a specific order of JavaScript files between the layout and view.

Final Word

This scaffolding is more or less tailored for my projects because I tend to be a bootstrap fanatic and I really love how simple and fast the doT template engine is, but there is a plethora of alternatives available. If your templating needs are bit more advanced I’d recommend looking into the jade template engine instead of doT. Likewise, bootstrap is not the only frontend web framework out there. Another really popular one is foundation. We live in a golden age of open source and free software I think, and you should definitely use that to your advantage. With so many choices available, make sure you chose what suits your needs best!

Helpful Links

 

1 Comment

Aman says:

Innovative Blog about Node.JS! thanks for sharing knowledge. i really appreciates you

Leave a Reply

Your email address will not be published.