How To Render HTML file in Express JS. ExpressJS framework of Node JS allows you to create a custom web server according to your need. You don’t need to install another package to handle HTML files. Express js provide the best way to create a web server and render HTML for different HTTP requests.

In this Express Js tutorial, I am going to explain how to render HTML files in Node Js using ExpressJS. For example, I will create a three-page website in this tutorial. Let start step by step:-

Setup Your Package.json file in your project directory

{
  "name": "nodewebsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Install Express Js

You can install Express Js using NPM. The below command will install the fresh version of Express Js framework in your OS globally so that every Node js application in your OS can use it.

npm install -g express

The below command will install a fresh version of express js locally to your application folder.

npm install express --save

Create express server

Create a file app.js in your application root folder for Express Js server like below:-

var express = require('express');
var app = express();

var server = app.listen(5000, function () {
    console.log('Node server is running on 5000');
});

Define Routes

I have created an object app in the above example. Now use this object to create different routes for your application. To create routes for HTTP GET, POST, PUT and DELETE request for your application, the app object provide get(), post(), put() and delete() methods to configure routes. See the bellow example:-

var express = require('express');
var app = express();
const path = require('path');

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname+'/index.html'));
});

app.get('/about', function (req, res) {
  res.sendFile(path.join(__dirname+'/about.html'));
  
})


app.get('/contact', function (req, res) {
  res.sendFile(path.join(__dirname+'/contact.html'));
  
})

app.post('/savedata', function (req, res) {
  res.send('Data saved successfully'));
  
})


// similarly we can for put and delete

var server = app.listen(5000, function () {
    console.log('Node server is running..');
});

In the above example, we are using sendFile() function to render HTML. ExpressJS provides sendFile() function to send HTML files to browser. The browser automatically interpreted the HTML files.

Create HTML Files

As described above I am going to create Three-page website. So let’s create HTML files home(index.html), about and contact. When we hit the main URL it will render the index.html file. So let’s create index.html file:-

  
Your Website
  
A responsive website created by You.


  Home
  About

  Contact 


  

    
About You
    
Photo of You:
    
Image
    
Some text about you in culpa qui officia deserunt mollit anim..
    
More Text
    
Lorem ipsum dolor sit ame.
    
Image


    
Image


    
Image
  
  

    
TITLE HEADING
    
Title description, July 7, 2019
    
Image
    
Some text..
    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    

    
TITLE HEADING
    
Title description, July 7, 2019
    
Image
    
Some text..
    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  



  
Footer

Similarly you can create other files like about.html and contact.html

Now run the below command to run your application.

node app.js

Now go to locahost:5000 to see the result. See the below screenshot for output.

Read Also How to Make HTTP POST request in Angular 8 and How to integrate adobe echo sign API in Laravel

How To Render HTML file in Express JS,handle html file in express js,handle html file in node js,render html file in node js,render html page in express js,render html content express js,render basic html view in node js express,render html file in express js,how to render html in express js,render html file in node js express,how to render html file in express,how to render html in express,how to render an html page in express,how to render html file in node js,how to render html in node js,how to load html file in express js,rendering html file in node js,how to render html page in express,using express to render html,render html in express js,how to render a html file in express,render html page in express js,nodejs render html file,render html file in node js express,node js render html file,use html in express js