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". Lets create our custom files in that pages folder. 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#', `<title>${options.title}</title>`)
      .replace('#message#', `<h1>${options.message}</h1>`)
    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 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 The templating engine will give us the ability to use res.render() instead of res.send() res.render() res.send() res.engine() will decide what res.render() will send res.engine() res.render() 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". Lets create our custom files in that pages folder. Now its time to create our template engine. First we import required packages First const express = require("express");
const fs = require("fs"); 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#', `<title>${options.title}</title>`)
      .replace('#message#', `<h1>${options.message}</h1>`)
    return callback(null, rendered)
  })
}) 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#', `<title>${options.title}</title>`)
      .replace('#message#', `<h1>${options.message}</h1>`)
    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 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. res.render() app.get('/', (req, res) => {
  res.render('landingpage', { title: 'Hey', message: 'Hello there!' })
}) 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(); 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 @emrekanbay.en

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Vanilla JS Server Side Rendering

Visit My Website

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Template Engine For Express JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Regex Cheat Sheet - A Regular Expressions Guide

42 Stories To Learn About Expressjs

6 Reasons Why You Should Not Connect Express.js And AWS Lambda

A Beginner’s Guide to NPM Packages

A Practical Guide to Implementing User Authentication using JavaScript and Express

Regex Cheat Sheet - A Regular Expressions Guide

42 Stories To Learn About Expressjs

6 Reasons Why You Should Not Connect Express.js And AWS Lambda

A Beginner’s Guide to NPM Packages

A Practical Guide to Implementing User Authentication using JavaScript and Express

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps