Server-Side Image Rendering with Express Handlebars

gravity well
Nov 18, 2019 · 5 min read
Photo by Cristina Gottardi on Unsplash

If you are new to Handlebars, one of my favorite server-side rendering tools, you may not be used to rendering images server-side.

In this article, I will show you a quick way to handle images when doing server-side rendering.

Just to note, I am using express handlebars, but the command, is not specific to Handlebars.

Assumptions

I want to keep this article short. I will be writing a longer article on server-side rendering at a later time. So I will assume you are already using Handlebars or just getting started, have some experience with node.js and using VS Code. I will be Focusing mainly on two parts of the code that follows. But will be briefly explaining other parts as well so you may pick up some additional things.

Even though this is not a tutorial on Handlebars or server-side rendering, you may pick up a thing or two.

My focus will be on displaying an image on an index and about page. Why just focus on an image? because I have noticed the displaying of images being addressed in ways I feel are too complex. This is very simple.

What We Will Do

  • Setup a node web server
  • Install express
  • Install express-handlebars
  • Create a basic Handlebars folder structure
  • Create three pages, index.handlebars, about.handlebars and the main.handlebars.

Let’ Get Started

  1. Create directory called displayimage.
  2. Because we will need them, create under an folder, folder and under views a.
Folder Structure

3. Start VS Code and open the displayimage folder

4. Open a new Terminal and type,
to create the package.json. Accept the defaults except change the default page to instead of index.js. That will keep it in line with mine.

5. In the Terminal window type,
to install the lightweight web framework.

6. In the Terminal window type
to install the Handlebars server-side rendering view engine.

7. Type the following to set up a web server on port 5005.

Basic node web server

8. In the Terminal, hit F5 to start the web server. You should get the message in the above image.

We want an page and an page. Remember, these are being rendered on the server-side. Each page will display the same image. But first we will make sure they work.

9. Add the following code to app.js after line 10 above. It is this line 13 that I want to bring your attention to.

With line 13, you are telling the app where your images will be stored. You will not have to specify a messy path to your image in your <img> element.

As with everything, there is always more, so use things like app.use() or express.static, to learn more.

We will be adding (default) and . Each will display the image and some text. For now, let’s add the for these.

The , in the layout folder, as usual will contain what you want to show on each page. Typically this might be something like a bootstrap navbar.

app.js should look as follows.

app.js

We have routes to get to index (‘/’) and about (‘/about’).

Creating Our Three Pages

index.handlebars

In the folder I added the following

index.handlebars

If you are just getting started with Handlebars, notice {{greeting}} and notice that in app.js as well. Nothing special about the name “greeting”, it could be anything. The route in app.js will populate the {{greeting}} placeholder with an with the text we send to it.

about.handlebars

Exact same code, for simplicity, as index.handlebars

about.handlebars

main.handlebars

In the views/layout folder create.

main.handlebars

If you are new to Handlebars, {{{body}}} is a placeholder that says, “for each page, in the body, put what is sent to that page.”

In out case, it is a greeting.

Make sure your web server is running and refresh it if necessary.

Run your application in the browser and test the routes to and by going to to get index and to get the about page.

Now For The Image

Kind of a let down because I’m not doing anything special. Line 13 of app.js took care of that. I’m just including an <img> element in my main.handlebars so it will be on each page.

If I wanted the image on just one page we could put the <img> on just that page instead of on main.handlebars.

The important thing is that <img> it knows where to find our images because of line 13 of app.js.

Modify index.handlebars to have the following <img> in line 13

main.handlebars

Refresh your web server and browser and the image should show when you visit index and about.

index
about

Conclusion

For images referenced in web pages that are server-side rendered, one option is to use express.static.

Along the way we saw how node can be used with express to set up a node web server, how Handelbars can be used for of web pages and a glimpse of .

The last two items I plan on spending more time on in future articles.

Thank you for reading and happy coding!

JavaScript in Plain English

Learn the web's most important programming language.

gravity well

Written by

Self-Employed Software Developer, Trainer, Consultant. Keeping up to date. I’ve noticed in over 28 years of programming, one’s current skills have a shelf life.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade