Your resource for web content, online publishing
and the distribution of digital products.
S M T W T F S
 
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
 
 
 
 
 
 
 
 
19
 
20
 
21
 
22
 
23
 
24
 
25
 
26
 
27
 
28
 
29
 
30
 

Template Engine For Express JS

DATE POSTED:October 2, 2024
TL;DR
  • The templating engine will give us the ability to use res.render() instead of res.send()
  • res.engine() will decide what res.render() will send
Start Here

We will create a directory which will contain our custom files inside. We will give it custom extension. In this tutorial, my extension will be "kanby".

express js files and folders

Lets create our custom files in that pages folder.

express js custom pages

\ Now its time to create our template engine.

\ First we import required packages

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

\ Then write that how you want your template engine to work

app.engine('kanby', (filePath, options, callback) => { fs.readFile(filePath, (err, content) => { // Error handler if (err) return callback(err) // process the content of file here // you can custumize however you want // this will change only #title# and #message# // but you can do advenced stuff with regular expressions. // this example is the example used in express js docs const rendered = content.toString() .replace('#title#', `${options.title}`) .replace('#message#', `

${options.message}

`) return callback(null, rendered) }) })

\ After that, you need to define 2 more setting.

app.set('views', './pages') // specify the directory for pages app.set('view engine', 'kanby') // register the template engine

Then you are ready !

\ You can use res.render() function to render your own files.

app.get('/', (req, res) => { res.render('landingpage', { title: 'Hey', message: 'Hello there!' }) })

\ First it will render landingpage.kanby, the it will send rendered content to client. please do not forget to add status code

res.status(200).render(); Future Plans

This is basically an entrance for templating engine development. This is so simple.

\ In my further blogs, i am thinking to create an advanced (usable) template engine for express JS.

If you have any questions, Here is my Instagram @emrekanbay.en