Post
Ask Question

Creating Server And Host HTML Page Using Node.js

Today my mission is to explain about creating server in Node JS and hosting html pages on this server and accessing it from the web browser. For understanding about creating a server we have taken one example so follow the below steps.

  1. For creating server on Node JS we have used “http” module. For using any module in Node JS we have to use “require” module.   So fist we import the “http” module.
    1. var http=require("http");  
  1. Now we are creating a server. For creating the server we have to use ‘createServer ‘method of http module and this method takes 2 parametersing [request and response] as show below.
    1. var server = http.createServer(function(request, response) {});  
  1. After that we have to set the content type as plain text for sending response to the client. As shown in
    1. var server = http.createServer(function(request, response) {  
    2.     response.writeHead(200, {  
    3.         'Content-Type': 'text/plain'  
    4.     });  
    5. });  
    Here you can set any response type like plain text or html etc.
  1. Now for sending response to client we have to use response.write() method. And finally you have to call response.end() method for ending the response.
    1. var server = http.createServer(function(request, response) {  
    2.     response.writeHead(200, {  
    3.         'Content-Type': 'text/plain'  
    4.     });  
    5.     response.write("This is Test Message.");  
    6.     response.end();  
    7. });  
  1. Now we have to start listening to this server; on any http post you can use any port which is available (not used by any other application in your computer.) Here I have taken 8082 port.

    server.listen(8082);

Below I have given a full example.

serverExample.Js

  1. var http = require("http");  
  2. var server = http.createServer(function(request, response) {  
  3.     response.writeHead(200, {  
  4.         'Content-Type': 'text/plain'  
  5.     });  
  6.     response.write("This is Test Message.");  
  7.     response.end();  
  8. });  
  9. server.listen(8082);  

Now save this file and run it. And check the output.

Node.js

Now open any browser and type “localhost:8082” it will display result as below.

Node.js

As you see in above image, it  displays a static message on web page. Now we have to host the html page on Node JS server as below. For that we have used the above program and added some more things to it. For html page we have to use URL so for that in Node JS  “url” module has been used so we have to add this module in our program file. And then we can get the path of request URL as shown below.

  1. var url=require("url");  
  2. var path=url.parse(request.url).pathname;  

Now we have 2 html pages as shown below.

HtmlPage1.html

  1. <html>  
  2.   
  3. <head>  
  4.     <TITLE>HTML-1</TITLE>  
  5. </head>  
  6.   
  7. <body>  
  8.     <h1> This is HTML Page - 1 </h1>  
  9. </body>  
  10.   
  11. </html>  

HtmlPage2.html

  1. <html>  
  2.   
  3. <head>  
  4.     <TITLE>HTML-2</TITLE>  
  5. </head>  
  6.   
  7. <body>  
  8.     <h1> This is HTML Page - 2 </h1>  
  9. </body>  
  10.   
  11. </html>  

Now we are first checking which request the page is coming for. And after getting the request page path now we are using this request path name and we have to display its related html page. For that we have to first locate this html file and read them and send their html content in response to requester. For reading the html file we have to add one more module “fs” as shown below. And in response parameter you have to set content type to be “text/html”

  1. case '/HtmlPage1.html':  
  2.     fs.readFile(__dirname + path, function(data) {  
  3.         response.writeHead(200, {  
  4.             'Content-Type': 'text/html'  
  5.         });  
  6.         response.write(data);  
  7.         response.end();  
  8.     });  

Here also we have put error handling in function as shown in below. If any error occurs then we have to display it on client side in browser.

  1. case '/HtmlPage1.html':  
  2.     fs.readFile(__dirname + path, function(error, data) {  
  3.         if (error) {  
  4.             response.writeHead(404);  
  5.             response.write(error);  
  6.             response.end();  
  7.         } else {  
  8.             response.writeHead(200, {  
  9.                 'Content-Type': 'text/html'  
  10.             });  
  11.             response.write(data);  
  12.             response.end();  
  13.         }  
  14.     }); 

Now full code is as below.

ServerExample.js

  1. var http = require('http');  
  2. var url = require('url');  
  3. var fs = require('fs');  
  4. var server = http.createServer(function(request, response) {  
  5.     var path = url.parse(request.url).pathname;  
  6.     switch (path) {  
  7.         case '/':  
  8.             response.writeHead(200, {  
  9.                 'Content-Type': 'text/plain'  
  10.             });  
  11.             response.write("This is Test Message.");  
  12.             response.end();  
  13.             break;  
  14.         case '/HtmlPage1.html':  
  15.             fs.readFile(__dirname + path, function(error, data) {  
  16.                 if (error) {  
  17.                     response.writeHead(404);  
  18.                     response.write(error);  
  19.                     response.end();  
  20.                 } else {  
  21.                     response.writeHead(200, {  
  22.                         'Content-Type': 'text/html'  
  23.                     });  
  24.                     response.write(data);  
  25.                     response.end();  
  26.                 }  
  27.             });  
  28.             break;  
  29.         case '/HtmlPage2.html':  
  30.             fs.readFile(__dirname + path, function(error, data) {  
  31.                 if (error) {  
  32.                     response.writeHead(404);  
  33.                     response.write(error);  
  34.                     response.end();  
  35.                 } else {  
  36.                     response.writeHead(200, {  
  37.                         'Content-Type': 'text/html'  
  38.                     });  
  39.                     response.write(data);  
  40.                     response.end();  
  41.                 }  
  42.             });  
  43.             break;  
  44.         default:  
  45.             response.writeHead(404);  
  46.             response.write("opps this doesn't exist - 404");  
  47.             response.end();  
  48.             break;  
  49.     }  
  50. });  
  51. server.listen(8082);  

Now run this ServerExample.js and show the output as below

Type URL

http://localhost:8082/HtmlPage1.html

Node.js

Type URL

http://localhost:8082/HtmlPage2.html

Node.js

In this article you see how Node JS server is created and how we can access web page by this server.

If you have any query regarding this tutorial please ask me in comment box.


Similar Articles