AppDividend
Latest Code Tutorials

How To Use Template Engines With Express

107

Get real time updates directly on you device, subscribe now.

In this example, we will see How To Use Template Engines With Express.  A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page. The significant benefit of such approach when it comes to templates is explicitly being able to render HTML on the server side. So, we can do the SEO easily, and we are not rendering the JSON data. In this article, I want to look at some of the most popular JavaScript templating engines.

How To Use Template Engines With Express

Now, first we install the express web framework, and then we start implementing different template engines in our node.js application.

#1: Create Node.js Express server

First, create a node.js project directory.

mkdir exptemplate

Now, go inside the folder and initialize the package.json file.

npm init -y

Next step is to install the express framework.

npm install express --save

Now, create a file inside the root called server.js and add the following code.

// server.js

const app = require('express')();
const PORT = process.env.PORT = 4000;

app.listen(PORT, () => {
  console.log('The server is running on port',PORT);
});

We can use the nodemon server for development. So let us install it using the following command.

npm install nodemon --save

Now, start the server using the following command.

nodemon server

 

How To Use Template Engines With Express

#2: Install and configure Pug templating engine

Okay, now install our First templating engine Pug using the following command.

npm install pug --save

Create one folder inside the root called views.

Now that Pug is installed set it as the templating engine for your app. You don’t need to ‘require’ it. Add the following code to your server.js file.

// server.js

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

Here, we have defined the template engine Pug.

Also, we have defined the directory from which these template files can load in our application.

So, when the request comes from the client, it will go to the router and then router redirect to one of the pages inside the views folder, and then that page will be rendered.

Next step is to create a file inside the views folder called template.pug and add the following code.

// template.pug

doctype html
html
   head
      title Hello From Pug Templating Engine
   body
      p.greetings#peopleHello Hello From Pug Templating Engine!

It is the pug syntax to write the HTML.

To run this page, add the following route to your server.js file.

// server.js

app.get('/template', function(req, res){
  res.render('template');
});

So, our final server.js file looks like below code.

// server.js

const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;

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

app.get('/template', function(req, res){
  res.render('template');
});

app.listen(PORT, () => {
  console.log('The server is running on port',PORT);
});

Save the file and see the console, if we are running with errors and then if not then make sure your nodemon server is running. If everything looks great, then go to the browser and switch to the following URL.

Related Posts
1 of 17

http://localhost:4000/template

You can see that our HTML is rendering and we have successfully integrated the Pug templating engine.

#3: Install and configure Mustache template

We can use the Mustache templating engine in Express; you first install the mustache-express package.

npm i mustache-express

Now, require and configure the module. I have written the final server.js file for implementing the mustache-express module.

// server.js

const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;
const mustacheExpress = require('mustache-express');

app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views',path.join(__dirname, 'views'));

app.get('/template', function(req, res){
  res.render('index.html', {yourdata: 'Hello from Mustache Template'});
});

app.listen(PORT, () => {
  console.log('The server is running on port',PORT);
});

Also, we need to create a file inside the views folder called index.html and write the following HTML code inside the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mustache Template Engine</title>
</head>
<body>
  <div>
    {{ yourdata}}
  </div>
</body>
</html>

Save the file and go to the browser and navigate to the following URL.

http://localhost:4000/template

You can see that we have successfully integrated the Mustache template in Express.

#4: Install and configure EJS template

We can install the EJS(Embedded Javascript) template using the following command.

npm install ejs --save

Now, import the ejs template as well as configure the ejs template.

Write the final code inside the server.js file.

// server.js

const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;
const ejs = require('ejs');

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

app.get('/template', function(req, res){
  res.render('welcome.ejs', {yourdata: 'Hello from EJS Template'});
});

app.listen(PORT, () => {
  console.log('The server is running on port',PORT);
});

So, here we have set the template engine to ejs. Now create a file called the welcome.ejs inside the views folder.

<!-- welcome.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>EJS Template</title>
</head>
<body>
  <%= yourdata %>
</body>
</html>

Save the file and go to the browser and switch to the following URL.

http://localhost:4000/template

Now, we have successfully integrated the EJS template.

Finally, How To Use Template Engines With Express Tutorial with Example is over. Thanks for taking.

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.