Mike Valstar

Coding with Node.js: Part 1; Getting started with Express.

Posted on November 11, 2011 - 12:00 AM

I have once again decided to rewrite and this time in node.js, I have rewritten the site both as a tutorial for new node.js developers as well as a personal blog and project page.

Since college I have primarily been a PHP developer, building OOP websites with a combination of PHP, Smarty, PDO and other good practice techniques; however since the birth of node I followed the development of the project and more recently started using node for my production projects. Node has proved to be a great tool for rapidly creating websites both semi-static and highly interactional; it is highly responsive and is a better fit for progressively loaded pages over PHP and most other languages I have used in the past.

When I started coding websites in the late 90s webpages were primarily rendered and produced by the web server and very little was done on the client side (flash and java applets not withstanding). In recent years with the proliferation of advanced javascript libraries such as jQuery and the browser wars re-igniting has brought forth an array of new techniques for client-side manipulation and rendering of a website. This has created shorter code-paths on the server-side pages and increased the request count for any given "page" on a website. Node.js has been built with this in mind and personally I feel is a great fit for this new and emerging web.

So here we are building a new website in node.js, we will use Express and later Mongoose with MongoDB for the creation and maintenance of this website. Heavy emphasis will be placed on progressive page loading, external tools for items like blog comments and as we progress, high availability and large traffic handling.

Getting Started

To begin we are going to start with a basic website that allows for statically coded blog posts to be used and a few pages static pages designed. A simple site to be sure but something to build on later.

For reference this project we are using the following:

• Node.js v0.6.0 - Installation Instructions
• NPM v1.0.105 - Installation Instructions
• Express v2.5.0 - Installation Instructions

To begin we will have express generate a simple website structure including a basic template and app.js file:

$ express /www/website && cd /www/website

And install the dependancies

$ npm install -d

Running the App

Running your app with the base express install is easy:

$ node app.js

And you are all set, it should spit out the port the new website is running at (usually 3000) and you can surf to http://localhost:3000 to view your new website.

For production you will need to run your web server using the following command:

$ NODE_ENV=production node app.js

This will allow for things like caching and we will take advantage of later to suppress errors and other useful things in the future.

Building the Layout

For this site I'm going to use every new technique and buzzword technique possible on the front end to better demonstrate how to code for these designs.

For the navigation of the website we will be using the hashbang technique for traffic routing and dynamic content loading without a full page refresh while at the same time making sure all pages have a permalink and is fully navigable by the google crawlers.

The layout of the site is going to be using Responsive Design (yay css selectors) for the layout of the site in order to better serve larger screens and mobile devices.

And later we will be implementing Lazy Loading of images and some content in order to reduce bandwidth and page loading times.

The use of these design techniques do not really apply directly to the backend coding so I will cover these in separate tutorials at a later date. For the purpose of this tutorial lets stick with a simple design.

The base express install comes with a simple layout & page combo to get you started. Lets start by modifying them slightly:

layout.jade

index.jade

Writing a Simple Page Router

To start lets build a simple static page router for a few more pages of the site:

lib/StaticPages.js

And alter app.js to use this new router.

app.js

What we are doing now is loading up the StaticPage.js file as a variable "static_pages" and calling the initPages() function in order to init these new routes.

feel free to add more static pages as needed and to add the corresponding jade files

A Simple Dynamic Route

Now that we have the basic pages setup we can add in a semi-dynamic route for our blog pages.

lib/StaticPages.js

The ":id" and ":title" variables allow us to use portions of the URI in order to determine content and we are using them to load the blog posts from the posts folder located in the views directory

The Code

All code created for this website is available on the github page and this tutorial specifically is available here: https://github.com/mikevalstar/mikevalstar_com/tree/Node_Tutorial_pt1

Next Time

In the next part of this series we will be adding in custom error pages. Please Stay Tuned...

Transalations

A special thanks to Jovana Milutinovich from Webhostinggeeks.com for translating this article to Serbo-Croatian