How to Render HTML File in Node JS Express

Render html file data in node js express; Through this tutorial, we will learn how to render html file in node js express.

How to Render HTML File in Node JS Express

Follow the following steps to render html file data or plain html in node js express:

Step 1 – Create Node JS App
Step 2 – Install Express
Step 3 – Create Server.js File
Step 4 – Create index.html File
Step 5 – Start Development Server

Step 1 – Create Node JS App

Execute the following command on terminal to install node js app:

mkdir my-app
cd my-app
npm init -y

Step 2 – Install Express

In this step, open again your terminal and execute the following command to install express in node js app:

npm install express

Step 3 – Create Server.js File

In this step, you need to create server.js file and add the following code into it:

var express = require('express');
var app = express();
  
app.get('/',function(req,res) {
  res.sendFile(__dirname + '/index.html');
});
   
app.listen(3000, () => console.log(`App listening on port 3000`))

Step 4 – Create index.html File

In this step, create index.html file and update the following code into it:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  
<p>This is sample html file -  Tutsmake.com!</p>
  
</body>
</html>

Step 5 – Start Development Server

You can use the following command to run development server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

That’s it; Through this tutorial, we have learned how to render html file in node js express.

How to Render HTML File in Node JS Express