How to Render Static and Dynamic Files in Express with Handlebars

What is meant by static file and dynamic file?

Static means pre-rendered web pages that do not change on time. Dynamic means it is generated in real-time at the time of the request by the server.

Throughout this article you will learn:

• Render a static file, just using node modules
• Render a dynamic file with hbs package
• Render files with different extensions

For this you need to have some knowledge about JavaScript and HTML, and should know how to build an application with Node.js and Express. If you are not familiar with that please refer to my previous article.

However, let’s provide a quick recap here.

1. Initiate the NPM for your project:

npm init

2. Install the required packages (Express, nodemon):

npm install express nodemon

3. Start the server on port 5000:

app.listen(5000, ()=> {
     console.log(`server is running in port 5000`);
})

Render a static file with Node.js and express

First of all, create a folder called views in the root directory to put your files that are going to be rendered. Then, create the HTML file that you want to render.

index.html

I am not concerned about the frontend, since we are focusing on the backend.

After creating this file you need to import the path node module.

const path = require("path");

Then you can render that HTML file using the following command.

app.use(express.static(path.join(__dirname, “/views”)));

The output will look like this:

index.js

Render a dynamic file

There are several templates such as pug, handlebars, ejs, etc to render dynamic web pages. But we are going to use handlebars for our project.

So, we need to install hbs package:

npm install hbs

Then, import the package:

const hbs = require('hbs');

The view engine enables rendering of dynamic web pages using specific templates.

We need to set the view engine as hbs:

app.set("view engine", "hbs");

To avoid confusion, we need to tell the view engine about the path of views:

app.set("views", path.join(__dirname,"/public"));

Here, the public is the folder name that we are using to store our files. So, create a new file named index with the extension of .hbs

.hbs is the extension of handlebars.

Now, the folder structure looks like this:

Add the below code segment to the index.hbs file.

Then, create a route with get method to render index.hbs file.

You can use the res.render() function to render the file and with that, you then need to pass the dynamic data.

According to this name and age:

app.get("/", (req, res) => {
    res.render("index", {
    name: "Kushan", age: 24
});});

Output:

index.js

Render files with different extensions

So far, we have only demonstrated out to render files with the .hbs extension.

So let’s see how to render a file with a different extension.

You just need to do some changes to the above code of index.js. Then create a file in a public folder called index.html (with .html extension). Type whatever you want to display in that file.

app.set("view engine", "html");
app.engine('html', hbs.__express);

Summary

We started the article by mentioning the difference between static and dynamic files. Then, we talked about rendering a static file without any package. After we learnt how to render a dynamic file with handlebars and then render a file with a .html extension.

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos

Learn more

How We Build Micro Frontends

How we Build a Component Design System

How to reuse React components across your projects

5 Ways to Build a React Monorepo