How To Render HTML file in Express JS,handle html file in express js, handle html file in node js, render html file in express 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 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:-


<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}
.header h1 {
  font-size: 40px;
}
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}
.navbar a.right {
  float: right;
}
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #666;
  color: white;
}

.row {  
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.side {
  -ms-flex: 30%;
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
.main {   
  -ms-flex: 70%;
  flex: 70%;
  background-color: white;
  padding: 20px;
}
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
<h1>Your Website</h1>
A <b>responsive</b> website created by You.

</div>
<div class="navbar">
  <a href="/about" class="active">Home</a>
  <a href="/">About</a>

  <a href="#">Contact</a>
</div>
<div class="row">
<div class="side">
<h2>About You</h2>
<h5>Photo of You:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
Some text about you in culpa qui officia deserunt mollit anim..

<h3>More Text</h3>
Lorem ipsum dolor sit ame.

<div class="fakeimg" style="height:60px;">Image</div>


<div class="fakeimg" style="height:60px;">Image</div>


<div class="fakeimg" style="height:60px;">Image</div>

</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, July 7, 2019</h5>
<div class="fakeimg" style="height:200px;">Image</div>
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.



<h2>TITLE HEADING</h2>
<h5>Title description, July 7, 2019</h5>
<div class="fakeimg" style="height:200px;">Image</div>
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.


</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>

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

Post Created 43

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top