Create A Simple Web Application With Express.js

I’ve recently been exploring other options when it comes to web frameworks. I come from a PHP ZendFramework background, but since having upgrading to ZendFramework 2, I’ve not been impressed.

Since then I’ve been exploring more of Node.js. However, like PHP, web programming often works best with a framework. This is why I’ve been exploring Node.js with Express as the framework.

Through my research, Express.js appears to be one of the best if not the best Node.js web framework available. It is lightweight, quick, and offers all the great functionality, such as routing and layouts that other frameworks offer. It also uses Jade as its template engine.

You might be like, what is Jade and why do I need to forget HTML markup to learn it? I thought the same initially, but it turns out to be much more convenient to use than HTML. We’ll get into that soon.

Let’s start by installing Express.js. I’m going to assume you already have Node.js and Node Package Manager (NPM) installed. If you don’t have it installed I suggest you stop here and go find documentation on how to install it. To install the necessary Express.js components, run the following:

sudo npm install -g express
sudo npm install -g express-generator

I used sudo because I’m on a Mac. If you’re using Windows, just omit that command.

With Express.js installed, let’s create a new project:

express TestProject

Because we installed the Express.js generator, we are left with a project and properly configured directory structure. With the project as your current directory it is time to install all the proper dependencies. This can be done by running:

npm install

You now have a very runnable project. Test out what you have by starting a local server:

npm start

If you navigate to http://localhost:3000 you’ll see your very basic web application.

Let’s look deeper at the project structure the Express.js generator left you with.

TestProject
    app.js
    bin
        www
    package.json
    public
        images
        javascripts
        stylesheets
            style.css
    routes
        index.js
        users.js
    views
        error.jade
        index.jade
        layout.jade

The routes are where all your JavaScript backend code goes and the views are where all your front end code goes in Jade markup.

Earlier I mentioned that Jade markup can be a bit weird. When I first saw Jade, it reminded me of Python and I hate Python specifically because of it being tab dependent.

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        block content

The above code is what we have in our views/layout.jade file. It is similar to HTML, but instead of tag characters we use indents to signify what is inside of a tag. I found this to increase my productivity and make my code easier to read.

block content

All our view content will get rendered in the above location.

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

Check out the above code. This represents the home page route, so in our scenario if we hit http://localhost:3000, then we will end up here. A variable title will be passed to our view for displaying. In this case our view is index.jade aka index.

If you’re planning on getting into Node.js for web development, I encourage you to check out Express.js. It is quick and easy and definitely fun to play around with.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.