Static Website With Node js Webserver Step By Step – Source Code on GitHub

In this article, we will see how we can build a Static Website with Node JS Webserver. The Node.js has changed many programming paradigms and made Javascript as one of the most sought-after programming languages.

Build Static Website With Node JS Webserver:

Node.js is an asynchronous event-driven JavaScript runtime built on Chromexs V8 JavaScript engine. With Node, you can build all types of applications from desktop to web. Letxs build a Static Website with Node JS Webserver

Softwares used

• Node.js
• NPM
• Express
• VS Code

Node comes with NPM, which is package manager for JavaScript. NPM allows the discovery and usage of common packages functionality.

As mentioned above, for demonstration purpose we will use the Express framework. Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Environment Setup

Download Node.js installable setup from its official site and install with default options. After installation, you will be able to run node and npm on the command line.

Create a folder named node-web-server. Navigate to this folder and in command prompt and run a command as-

npm init -y

This command will initialize the folder to be a node project and create package.json. This file holds the node js project configuration.

As we are going to use the single external framework xexpressx, we will install this dependency package in our project with below command-

npm install express --save

Once we install this our package.json will be something like this.

{
  "name": "node-web-server",
  "version": "1.0.0",
  "description": "A minimalist Web Server with Node.js",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" xx exit 1"
  },
  "keywords": [],
  "author": "Pavan Solapure",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  }
}

Prepare Static Contents

Now it can be anything that you want to the server through your webserver. For our example we will prepare a couple of HTML pages with Bootstrap support. All these fill will be present in a folder named xpublicx in our project structure.

We will not install any bootstrap file but will use them from free CDN. Our HTML files will have below references

x!-- Latest compiled and minified CSS --x
xlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"x

x!-- jQuery library --x
xscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"xx/scriptx

x!-- Popper JS --x
xscript src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"xx/scriptx

x!-- Latest compiled JavaScript --x
xscript src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"xx/scriptx

Writing Server

The server.js will be our main file that will create and run a webserver instance.  As mentioned we are using Express for this. Below is the code which will let you initialize and start express.

var express = require("express");

var app = express();

Now Express comes with an out of the box functionality that lets you render your static contents. You just have to configure the directory with below command.

app.use(express.static('public'));

As an add-on, if you need to use your custom CSS or JS files you can place them in a directory and configure it in express as

//make way for some custom css, js and images
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/images', express.static(__dirname + '/public/images'));

once you configured this, you can refer your custom files as

xlink href="/css/sticky-footer-navbar.css" rel="stylesheet"x

In the end, you will configure your express app to listen on a port. So our complete server.js will look like-

var express = require("express");

var app = express();

app.use(express.static('public'));

//make way for some custom css, js and images
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/images', express.static(__dirname + '/public/images'));

var server = app.listen(8081, function(){
    var port = server.address().port;
    console.log("Server started at http://localhost:%s", port);
});

Starting the Node JS Webserver

Starting the server is as simple as running below command.

node server.js

Thatxs it, your server is up and running on port 8081.

Conclusion

In this article, we have seen how easy it is to host a node js webserver and start serving your static content. This can be useful for local developments or you plan to host a minimal site to share information about your project company.

The complete code is available at our GitHub repo. Please feel free to download and try.

Download Code