Creating Node.js web app with Express

Note : This article is updated for Latest release of Express 4.0

Introduction

This article shows the creation of Node.js app using Express web framework on Debian based system.

Node.js is platform for building server side using the event-driven i/o with JavaScript language. NPM is Node Package Manager, it is for handling the dependencies for node applications. I assume basic understanding of NodeJS and NPM for this article.

Express is web development framework for Node providing the lot of features.

Following are features of Express

  • Built based on Connect and inspired by Sinatra in Ruby world
  • Command line interface (CLI) support
  • Templating and view rendering with jade and many others
  • Dynamic CSS support with LESS and stylus
  • Robust Routing
  • Environment based configuration
  • Session Management
  • Logging in applications

Installation of packages

Following are the installation instructions based on the Ubuntu or any Debian based system. Before starting with Express installation, you need to install the Node and NPM.

Node and NPM

For installation of the latest version of Node package on Ubuntu or any Debian based system, there exists package from Chris Lea  from his PPA (personal package archive) repo which includes installation both latest Node and NPM.

Lets go ahead and execute the following set of commands on bash

sudo apt-get update
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update

After that  lets install the NodeJS

sudo apt-get install nodejs

To check for correct installation, check for the version number on the each of them. Hit the following commands on the bash for same

$ > nodejs -v
v0.10.12
$ > npm -v
1.2.32

Version number will vary based on when you install the packages

Express

For Express 3.x,

Now, installation of the express is easy with npm as shown in following command,

sudo npm install -g express@3

Note that, in above particularly, in ‘express@3′. the no. after @ indicates the major version of express to be installed. which for us 3.x

This installs express 3.x node module along with its CLI globally ( -g switch) meaning that it can be available from anywhere.

Now, check for successful installation.

$ > express -V (note ‘v’ in caps)
3.9.0

For Lastest Express 4.x,

sudo npm install -g express

Express 4.x has significant changes in it, one them is that it does not has ‘express’ binary cli by default installed as core ‘core express npm module’.

It is separated in another npm module, called ‘express-generator’, which we can install using as follows-

sudo npm install -g express-generator

Now, we have express module installed as globally, we can check for successful installation as follows-


$ > express -V (note ‘v’ in caps)
4.4.0

Creation of application using express CLI

After successful installation, you will have express CLI in form of express command itself.

Now, if you do express with  help switch (-h), it lists out the possible usage of express command

$ > express -h
Usage: express [options]
Options:
    -h, --help       output usage information
    -V, --version    output the version number
    -s, --sessions   add session support
    -e, --ejs        add ejs engine support (defaults to jade)
    -J, --jshtml     add jshtml engine support (defaults to jade)
    -H, --hogan      add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus) (defaults to plain css)
    -f, --force      force on non-empty directory

Lets create the Express default project using express command by passing the name of project, as shown in follows

$ > express helloexpress
    create : helloexpress
    create : helloexpress/package.json
    create : helloexpress/app.js
    create : helloexpress/public
    create : helloexpress/public/javascripts
    create : helloexpress/public/images
    create : helloexpress/public/stylesheets
    create : helloexpress/public/stylesheets/style.css
    create : helloexpress/routes
    create : helloexpress/routes/index.js
    create : helloexpress/routes/user.js
    create : helloexpress/views
    create : helloexpress/views/layout.jade
    create : helloexpress/views/index.jade
   install dependencies:
       $ cd helloexpress & npm install
   run the app:
      $ node app

It creates the some directories and files in the directory named helloexpress.

Change directory to helloexpress and install the dependencies with npm,  as shown in follows

cd  helloexpress
sudo npm install

Above commands creates the default Express project with server ready to listen onto port 3000.

Now, lets start the server with following

If you installed express version 3.x then run the application using following command


$ > node app
Express server listening on port 3000

or second option as -

$ > npm start
> application-name@0.0.1 start /home/siddhi/workspace/exp3
> node app.js

Express server listening on port 3000

For Express 4.x, you need to start application using second option.

 

Now, we start our web application, lets open the browser hit the URL.  http://localhost:3000

You will see something like following in browser

Congratulations! You just created the first NodeJS Web app with Express web framework.

About these ads

2 thoughts on “Creating Node.js web app with Express

  1. module.js:340
    throw err;
    ^
    Error: Cannot find module 'express'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object. (/mnt/dev/nodejs/helloexpress/app.js:6:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

  2. @Julien Hautefeuille After creating the app using express CLI, you need to install dependencies using sudo npm install by running it in application directory.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s