Build a photo gallery using Handlebars views.
- Understanding server-side rendering with Handlebars.
- Practice dividing up a page into views, layouts, and partials.
- Practice testing routes.
- After cloning this repo, install dependencies with
npm install - To start the server :
npm start - To debug the server (and have it reload with Nodemon after changes):
npm run dev - To run the tests:
npm test
When you're learning a new technology, make sure you start simple and get that working before layering on too much complexity.
- Start by creating a new home route,
/in the server
- Make sure it's working by having it send something like
res.send('Hello, world!')
- Express Handlebars requires a default layout in order to render templates.
- Create a layout file in
views/layouts, default ismain.hbs(see the docs for more on layouts). It should look just like a standard HTML page, but with{{{body}}}between the<body></body>tags (notice there's three sets of curly braces there, not two)! - You can include whatever CSS you like: perhaps Skeleton from a CDN if you just want a quick start?
- We've provided a single
home.hbstemplate in the views folder for you. Instead ofres.send, now useres.renderto renderhome.hbstemplate when anyone visits the/route.
- When you reload the page, you should see the text change to, 'Hello, templates!'
- Create an object in your route definition with the property
title, like so:
const viewData = {
title: 'Gallery'
}- Pass the object as the second argument to render:
const template = 'home'
res.render(template, viewData)- Alter
home.hbsto refer to the property using{{title}}. Maybe put it inside<h1></h1>tags?
- Reload the page: does it work?
You'll find this pattern repeating throughout your exploration of server-side rendering:
- get some data and put it in an object
- pass that object to
res.render - modify the
.hbstemplate to make use of the data
The rest of this exercise should follow the same arc - gradually layering up detail and complexity.
Did you know you could require JSON? Pretty handy when you need a bit of configuration data! You can't leave the extension off like you can with
.js, though.
We want you to be exploring and understanding template rendering today, so we've provided you with some data to use that shouldn't take much effort to work with. It's an array of objects brought into the program using require. Each object represents a piece of art.
The objects look like this:
{
"id": 1,
"title": "Kea in Flight",
"comments": [
"Very arty."
],
"artwork": "images/kea.jpg",
"artist": {
"name": "Ben",
"url": "https://www.flickr.com/photos/seabirdnz/"
},
"license": {
"name": "CC BY-ND 2.0",
"url": "https://creativecommons.org/licenses/by-nd/2.0/"
}
},Any time you want to use this data, you can just const art = require('./art.json') at the top of the file you want to use it in. Remember, art is an array and Handlebars expects you to pass it an object, so you might need to do something like this:
const viewData = {
title: 'Gallery',
art: art
}- As a user, I want to see a list of artwork titles on the home page so I can see what's available.
- Remember, you can do something for each element in the
artarray using{{#each}}. - We suggest using an unordered list, where each artwork titles could be listed using
<li>{{title}}</li>.
- As a user, I want to see who each artwork is by so I can give them credit.
- Since you already have the title, this should be pretty easy! Do the same thing for the license. (You could even make it a link if you like: the URL property is also included.)
- As a user, I want to see what license the artwork is under so I know if I can copy it or not.
- This
{{#each}}block is getting a bit complicated. Let's add a partial! The{{#each}}will stay the same, but you'll move all the code inside it to the partial file (artwork-summary.hbs, for example).
- As a user, I want to see a header at the top of the page displaying the page title so I know where I am.
- We could just "hard-code" this in the template, but to keep our design flexible let's use a partial and we can include a
titleproperty on every data object we pass tores.render. - Create a
header.hbspartial. Make it look however you like, but be sure it has a{{title}}in there somewhere.
- As a user, I want to see a footer at the bottom of the page displaying contact details so that I can contact the people responsible for the site.
- Repetition can be a wonderful thing. Create a
footer.hbspartial and include it in your home template. - Hint: Move the
headerandfooterpartials into themain.hbslayout file, and they'll be used for every template view you create from now on.
- As a user, I want to see an artwork displayed when I visit
/artworks/:idso that I can view the image.
- Create
artworks.hbs. It doesn't have to be complicated: just a singleimgtag with itssrcattribute set to{{artwork}}will do nicely - Create a new route in server.js. In the route, you'll need to find the correct artwork using
req.params.id. Hint:art.find()(see MDN) - Send the artwork to the
res.render()call
- As a user, I want to be able to click on the artwork title on the home page and be taken to the image view.
- Time to link it up! In your
artwork-summary.hbs(or whatever you called it) partial, turn the artwork title into a link. You'll need to make use of theidproperty of the artwork object to build your links.
- As a user, I want a link to the home page home from the image view so that I don't need to use the browser back button.
- Here's another good partial opportunity! What we need is a simple partial that can be inserted anytime we need a link to the home page.
- As a user, I want to see all the details on the image view so that I can easily see information about the artist and licence.
- Although you don't strictly need to create another partial here, it might be a good opportunity to practice. You can even do partials within partials! For example, you could use a
comment.hbspartial for each element in thecommentsarray, and use that from anartwork-details.hbspartial.
Write some tests for your routes with Supertest and Cheerio. These testing libraries have already been installed for you - create a server.test.js and test away! Particularly testing both sides of any {{#if}}s you have, and that your {{#each}}s loop correctly, would be a great start!
Take the chance to explore, play, experiment. Ask lots of questions!
Including the title in the data object passed to res.render each time works ok, but what if some developer in the future forgets to pass it? It'd be great if there was some way in the template of providing a default title... maybe there's a way using the {{#if}} helper?
You could shift the data access of our art object to a data.js file, and only export utility functions with names like getAll and getById(1).
Did you know you can define your own Handlebars helpers, like {{#if}} and {{#each}}? Try writing a simple helper that (for example) truncates numbers to display only two decimal places.
For more information, check out these links: