Introduction
In this tutorial, we will be discussing how to host a static webpage using Node.js. We will be hosting a simple HTML webpage on our first Node.js server. So let’s get started with the tutorial.
Downloading Node.js
The first step will be to download Node.js. You can visit the official website by clicking here.
So, after visiting the website, first, click on LTS option. This is the version that is most recommended for users, as it’s the most tested version of Node.js and is free of bugs. Next, we click on the Windows Installer for installing on a Windows device. If you have a Mac, you can use the macOS installer.
Once the installation is done, let’s start with creating our webserver.
Creating a Node.js web server
First, let us take a look at our file system.
node Webserver | |--app.js |--main.html
The file system consists of a JavaScript file for our node.js web server, and the HTML file that we are going to host. So first, let’s look at the contents of our HTML file. The code is as follows:
HTML Code
<html>
<head>
<title>Hello World</title>
</head>
<style>
body{
background-color: blanchedalmond;
}
.text{
text-align: center;
background-color: aliceblue;
}
</style>
<body>
<div class = "text">
<h1>Hello World!</h1>
<p>Your first node.js hosted website!</p>
</div>
</body>
</html>
This is our HTML code. It’s a basic webpage displaying Hello World! along with some text. We have also used some basic CSS for the background-colour, as well as for aligning the text to the center.
Next, let’s look at the contents of our JavaScript file. The complete code is as follows:
JavaScript code
const http = require('http')
const fs = require('fs')
const port = 3000
const server = http.createServer(function(req,res) {
res.writeHead(200, {'Content-Type':'text/html'})
fs.readFile('main.html', function(error, data){
if(error){
res.writeHead(404)
res.write('Error: File not found')
}else{
res.write(data)
}
res.end()
})
})
server.listen(port, function(error) {
if (error) {
console.log('An error has occured', error)
} else {
console.log('Server is running on port ' + port)
}
})
require(‘http’): In order to transfer data over the Hyper Text Transfer Protocol (HTTP), we use the built-in “http” module of node.js. We can include it in our code using the require() function.
require(‘fs’): As we discussed earlier, we are using a file system with all the necessary files for hosting our webpage. In order to work with this file system, node.js provides us with an in-built file system module. We can include it by using the require(‘fs’) function.
Next, we declare the port number as 3000
Creating the HTTP Server
http.createServer(): Following this, we create a HTTP Server Object by using the function http.createServer(). Next, we give a function as the argument of the http.createServer() function. This function gets executed every time the server gets a request. Hence, this function is called the requestListener as it handles requests from users, as well as responds back to the user.
function(req,res) : The req object represents the HTTP request and the res object represents the HTTP response
res.writeHead(): This function sends a response header to the request. It takes a status code as the first argument. We give the status code 200 to indicate that the request has succeeded. Following this, we give {‘Content-Type’:’text/html’} as next argument. This is to indicate that the content is HTML.
fs.readFile(): This function is used to read the file. In our case, we need to read our HTML file. So we give the name of our HTML file as the first argument of the function. As the second argument, we give a function that has an error object and data object as its parameters. In case an error occurs, we use the status code 404 using the res.writeHead() function and display an error message using the res.write() function. In case of no error, we display the contents of the HTML page using res.write(data) function. Finally, we end the response process using res.end() function.
server.listen(): Using this function, we create a server that listens to a specific port. We use this function to test whether the server is working properly. We give the port number and an error function as the arguments. If an error occurs, the console will display the error message. If no error occurs, the console will display “Server is running on port 3000“
Starting the node.js webserver
First, open the command prompt.
Next, change the directory to your file system. For this type in “cd” followed by the path of your file system as shown below:
After changing the directory, type “node” followed by the name of your JavaScript file as shown below:
Next, open a browser, preferably Google Chrome, and type in the URL section – http://localhost:3000
If your webpage appears, then the hosting has been successful.
