How to render HTML file in Express.js

In this tutorial, we will learn how to render HTML file Express.js

There are many ways to render HTML in Express.js. Here, we see 3 ways to do it. First Create a new Folder.

Rendering HTML file in Express.js

Requirements

  • Node
  • Express – use npm i express to install the package
  • path – use npm i path to install the package

Create a new file server.js. Write the below code in it.

const express = require("express");
const path = require("path");

let app = express();

const port = 3000;

app.use(express.static(path.join(__dirname,'views')))

app.get('/',(req,res)=>{
  res.sendFile('index.html')
})

app.listen(port, () => {
  console.log(`Express is running on port ${port}`);
});

Create a folder named views. Create an index.html file in the views folder and Write the below code in it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tutorial</title>
  </head>
  <body>
    <h1>How to render HTML file in Express.js</h1>
  </body>
</html>

Here we are using express.static() method to handle static HTML files. We are sending the HTML file as a response to the GET request received.

Output:

node server.js

How to render HTML file in Express.js

Rendering HTML ejs file in Express.js

Requirements

  • Node
  • express – use npm i express to install the package
  • path – use npm i path to install the package
  • ejs – use npm i ejs to install the package

Create a new file server.js. Write the below code in it.

const express = require("express");
const path = require("path");

let app = express();

const port = 3000;

app.set("views", path.join(__dirname, "views"));
app.set('view engine','ejs')

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(port, () => {
  console.log(`Express is running on port ${port}`);
});

Create a folder named views. Create an index.ejs file in the views folder and Write the below code in it.

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial</title>
  </head>
  <body>
    <h1>How to render HTML ejs file in Express.js</h1>
  </body>
</html>

Here we are setting the view engine to ejs (embedded javascript). You can embed javascript in HTML using <%= variable name / loop %> in ejs.

Output:

node server.js

Rendering HTML ejs file in Express.js

Rendering HTML jade file in Express.js

Requirements

  • Node
  • express – use npm i express to install the package
  • path – use npm i path to install the package
  • jade – use npm i jade to install the package

Create a new server.js and Write the below code in it.

const express = require("express");
const path = require("path");

let app = express();

const port = 3000;

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "jade");

app.get("/", (req, res) => {
  res.render("index");
});

app.listen(port, () => {
  console.log(`Express is running on port ${port}`);
});

Create a folder named views. Create an index.jade file in the views folder and Write the below code in it.

doctype html 
html 
  head 
    title Tutorial 
  body 
    h1 How to render HTML jade file using Express.js

Jade is a high-performance template engine for Node and browsers that is largely influenced by Yaml. For writing HTML, Jade is a simple, whitespace-sensitive grammar.

Output:

node server.js

Rendering HTML jade file in Express.js

Leave a Reply

Your email address will not be published.