res.render(view [,
locals] [, callback])
Render the view and send the rendered html content to the
client.
In this post, I am going to explain how to integrate
express with EJS (Embedded JavaScript templates, templates are used to separate
the presentation from the business logic). EJS is one of the popular view
engine.
First step is to install ejs module by executing below
statement.
npm install ejs
We should inform the express application that we are
using EJS view engine. You can specify that by adding below statements in
express application.
app.set("views", path.resolve(__dirname,
"views"));
app.set("view engine", "ejs");
First statement checks for the views in /views directory.
For example, below snippet maps the home page to hello.js
file. As you see first argument of response.render() method is
"hello", that means, view engine look for the file hello.ejs and
render it.
app.get('/', (request, response) =>
response.render("hello", {
message:
"Hey everyone! This is my webpage."
})
);
You can access the 'message' property defined in render
method from hello.ejs file like below.
<%= message %>
Project structure looks like below.
hello.ejs
<html> <head> <title>Express and EJS integration</title> <meta charset="utf-8"> </head> <body> <h1> <%= message %> </h1> </body> </html>
HelloWorld.js
//Load express module const express = require('express'); const path = require('path'); //Put new Express application inside app variable const app = express(); //Set views property and views engine app.set("views", path.resolve(__dirname, "views")); app.set("view engine", "ejs"); const port = 8080; //When user hits the home page, then the message prints in browser. app.get('/', (request, response) => response.render("hello", { message: "Welcome to express and ejs 'Hello World' application" }) ); // Start the express application on port 8080 and print server start message to console. app.listen(port, () => console.log(`Application started listening on port ${port}!`));
Run HelloWorld.js by executing below command.
node HelloWorld.js
Open browser and hit the url
'http://localhost:8080/', you can see below message in the browser.
No comments:
Post a Comment