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 Chrome’s V8 JavaScript engine. With Node, you can build all types of applications from desktop to web. Let’s build a Static Website with Node JS Webserver

Softwares used

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-

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 “express”, we will install this dependency package in our project with below command-

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

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 “public” 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

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.

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.

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

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

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

Starting the Node JS Webserver

Starting the server is as simple as running below command.

That’s it, your server is up and running on port 8081.static website with node js

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
7 Comments
  1. Nandini Agarwal
    April 14, 2020 | Reply
  2. Ernest
    November 25, 2019 | Reply
    • Pavan
      November 27, 2019 | Reply
  3. curious_human
    November 20, 2019 | Reply
    • Pavan
      November 27, 2019 | Reply
  4. March 8, 2019 | Reply
  5. Izzuddin Natsir
    February 2, 2019 | Reply

Add a Comment

Your email address will not be published. Required fields are marked *