Fastify Js - Using Templating Engine and serving static files

Point Of Views

I do remember telling that fastify is very ideal for API development and that is true, but for this Blog let's talk about using any template engine to implement Server Side Rendering.

Setup

Let's create a project and install everything we need.

mkdir fastify_pov_ejs
cd fastify_pov_ejs
npm init --yes
npm i fastify

We are going to use Point of view that will help us register express template engines like ejs, hbs and pug.

In production mode, point-of-view will heavily cache the templates file and functions, while in development will reload every time the template file and function.

Learn more about point of view (opens in a new tab)

I am also going to use ejs as the template library here, but feel free to choose anything else. Just remember that some may have some specific requirements, so check out the documentation of Point of view once.

npm i ejs point-of-view

Let's just setup a basic server.

const fastify = require('fastify')();
 
fastify.get('/', (req, res) => {
    res.send("Hello World !");
});
 
const PORT = 5000;
fastify.listen(PORT, () => {
    console.log("Server Started !")
});

Now we will register point-of-view and will use it to set template engine.

fastify.register(require("point-of-view"), {
  engine: {
    ejs: require("ejs"),
  },
});

We will create a directory named templates and a ejs file named index.ejs. As of now, Add some basic HTMl code in it. You can refer to my github repo (opens in a new tab) for the source code.

Now for a route, we can render this ejs template, using the view method as shown below.

return res.view("/templates/index.ejs");

Now our '/' route looks like like this.

app.get('/', (req, res) => {
    return res.view("/templates/index.ejs");
});

Run this code and you will see Welcome from ejs in your browser, which is compiled html.

Let's add an h1 that says welcome {name}, where name will be provided as a variable to our template. So, the ejs looks like this

<h1>Welcome <%= name %></h1>

and let's pass the variable while rendering our view,

return res.view("/templates/index.ejs", { name : "Desi Programmer" });

Let's run this and we will see Hello Desi Programmer in the browser.

Serving static files