NODEJS - CREATE STATIC SERVER WITH EXPRESS MIDDLEWARE

About NodJs

One of the great things about Node.js is that it has a built in HTTP server. This means you don't need Apache or nginx. This means serving a static site can be done in few lines of code. This article goes into how this can be achieved.

Express Static Middleware

Express has become the defacto Node.js web framework and it has great built in capabilities to serve static content. The nice thing is that not only can you serve static content you can also gzip compress it and cache it. But let's just start with the required package.json and a basic static server.

Let's start

1. Set up package.json file

Use command $npm init for creating package.json file

D:\static>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (static) static-server
version: (0.0.0) 0.0.1
description: this is an example how to create static server with nodejs
entry point: (index.js)
test command:
git repository:
keywords:
author: ducnguyen
license: (ISC)
About to write to D:\static\package.json:

{
  "name": "static-server",
  "version": "0.0.1",
  "description": "this is an example how to create static server with nodejs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ducnguyen",
  "license": "ISC"
}


Is this ok? (yes) yes

D:\static>

After init we will have the contain of package.json file

{
  "name": "static-server",
  "version": "0.0.1",
  "description": "this is an example how to create static server with nodejs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ducnguyen",
  "license": "ISC"
}

2. Install express module

Using command $npm install expess

Add contains for index.js file:

var express = require('express');
var app = express();
var http = require('http');
app.use(express.static(__dirname + '/public'));
var server = http.createServer(app).listen(3000, function () {
 console.log('server is listenning on localhost:3000');
});

The above code is very simple, it creates an Express server, adds the static middleware and finally starts listening on port 3000 .

The static middleware handles serving up the content from a directory. In this case the 'public' directory is served up and any content (HTML, CSS, JavaScript) will be available. This means if the public directory looks like:
index.html
js/boostrap.min.js
css/boostrap.min.css

Then you can request the root route '/' and you'll get index.html file and the index.html also load the css and js file of boostrap. This is all expected from a static server.
Now just start the server by type command in command line promt $node index.js, and go to bowser hit http://localhost:3000/

We can also specify the url of static server:

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

Now  instead of type http://localhost:3000/ we will have our static page at http://localhost:3000/static/

Command for checkout :

vanduc@VGN-FZ290E:~/test2$ git clone --depth=10 https://github.com/vanduc1102/nodejs-example.git
vanduc@VGN-FZ290E:~/test2$ cd nodejs-example/
vanduc@VGN-FZ290E:~/test2/nodejs-example$ git checkout -f 1-static
vanduc@VGN-FZ290E:~/test2/nodejs-example$ npm install
vanduc@VGN-FZ290E:~/test2/nodejs-example$ node index.js

1. You will clone my repository at depth=10 means you will get last 10 commits
2. Change your directory working directory nodejs-example
3. Change the checkout to the 1-static, this was the tags with for static version.
4. Installing nodejs module need to run my application.
5. Start the application and enjoy.

Next Post