Welcome folks today in this blog post we will be showing the static and dynamic images in browser using handlebars library in node.js and express. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new node.js
project by using the below command as shown below
npm init -y
npm i express
npm i express-handlebars
As you can see we are installing the express
library which will be the web server for this application and also express-handlebars library which will act as the view engine
for the application.
Directory Structure of the App
Now guys just see the below directory structure of the node.js express
app in handlebars view engine
Making the express
app
Now guys we will be starting the express
app at the port number 3000.
1 2 3 4 5 6 7 8 9 10 |
//importing modules const express = require('express') // Express server's instance const app = express(); const PORT = process.env.PORT || 3000; // listening app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`)); |
As you can see in the above code we are importing the express
library and then we are making the new express app. And after that we are setting the port
number of the express app. And then we are using the listen()
method of the express to start the app at the port number 3000.
Setting the Handlebars as View Engine
Now guys we will be setting the view engine of the express app as handlebars. For this first of all we will be importing the handlebars
library and then we will be setting the view engine as shown below
1 2 3 4 |
const {engine} = require('express-handlebars') app.engine('.hbs', engine({ extname: '.hbs',defaultLayout:false,layoutsDir:'views'})); app.set("view engine", "hbs"); |
As you can see we are also disabling the defaultLayout
and also we are providing the directory
path where the views will be stored. For this we need to make the views
directory
And also we need to make the public
directory inside this application as the static directory. Here in this directory all the images will be stored which will be displayed in the application. You can use the express.static()
method to do this as shown below
1 |
app.use(express.static('public')); |
Now we need to make the get
request of the /static
route as shown below
1 2 3 4 |
// Route to display static src images app.get("/static", (req, res) => { res.render("static"); }); |
As you can see that we are loading the static.hbs
template which is stored inside the views
directory
views/static.hbs
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <title>Handlebars Images Demo</title> </head> <body> <h1>Display Static Images Using Handlebars In NodeJS</h1> <br> <img src="images/profile.jpg" alt=""> </body> <html> |
As you can see we are displaying the profile.jpg
image which is stored inside the public directory. As we already made the public
directory as static in express. Now if you open the browser and go to http://localhost:3000/static
you will see the image rendered as shown below
Serving Dynamic Images in Handlebars
Now we will be writing another get
request to the route
/dynamic. And this time we will be providing the images dynamically by passing it to the handlebars template as shown below
1 2 3 4 5 6 7 8 |
// Route to display dynamic src images app.get("/dynamic", (req, res) => { imageList = []; imageList.push({ src: "icons/facebook.webp", name: "facebook" }); imageList.push({ src: "icons/linkedin.png", name: "linkedin" }); imageList.push({ src: "icons/youtube.png", name: "youtube" }) res.render("dynamic", { imageList: imageList }); }); |
As you can see that we have the imageList
variable in which we are pushing the images
which are stored inside the icons
folder and then we are using the render()
method to render the handlebars
template of dynamic.hbs
and passing the images as data.
Displaying Dynamic Images in Handlebar Template
Now we need to make the dynamic.hbs
file where we will be rendering the dynamic images passed to this handlebar template as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Handlebars Images Demo</title> </head> <body> <h1>Display Dynamic Images Using Handlebars In NodeJS</h1> <br> <div class="row"> {{#each imageList}} <div class="col-md-4"> <div class="text-success" style="font-size: large; font-weight: 700;">{{this.name}}</div> <img src="{{this.src}}"> </div> {{/each}} </div> </body> <html> |
As you can see in the above handlebar
template we are using the each
loop to render all the images passed and display it using the img
tag as shown above.
Now if you open the browser
and go to http://localhost:3000/dynamic
you will see the below images displayed
Wrapping the blog post this is the full source code of the index.js
file as shown below
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//importing modules const express = require('express') const {engine} = require('express-handlebars') // Express server's instance const app = express(); app.engine('.hbs', engine({ extname: '.hbs',defaultLayout:false,layoutsDir:'views'})); app.set("view engine", "hbs"); app.use(express.static('public')); // Route to display static src images app.get("/static", (req, res) => { res.render("static"); }); // Route to display dynamic src images app.get("/dynamic", (req, res) => { imageList = []; imageList.push({ src: "icons/facebook.webp", name: "facebook" }); imageList.push({ src: "icons/linkedin.png", name: "linkedin" }); imageList.push({ src: "icons/youtube.png", name: "youtube" }) res.render("dynamic", { imageList: imageList }); }); const PORT = process.env.PORT || 3000; // listening app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`)); |