Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to "Using Data with Pug Templates" that you'll be working to complete.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone, Guil here.
0:09
In this practice session you
will ramp up your Node,js and
0:10
Express skills by practicing the basics
of using data within Pug templates.
0:13
You've learned that in Express the view or
HTML served from the app to its users
0:18
is often handled by a server
side templating engine.
0:23
Pug is one of the most popular templating
engines, it's commonly used with Express
0:25
and it's the template engine of choice for
many developers.
0:30
Code written in a .pug file compiles or
translates to HTML so
0:33
that it can be displayed by the browser.
0:38
The power of Pug templates comes into
play when using variables to inject
0:40
custom content into the render
view sent to the client.
0:43
In this session, you're going to work
on this simple recipe collection app.
0:46
You will use Express routes to pass data
into Pug templates that render recipes.
0:50
To get started, download the project
files with this video and
0:55
open them in your favorite text editor.
0:57
The project files consist of a small and
simple Express app
0:59
created using the Express application
generator and slightly modified.
1:02
In routes > index.js, you'll see that
the app is made up of two routes.
1:05
A home or a root route which
displays a title, description, and
1:11
each recipe in the collection.
1:16
And a recipes/id route which will
display the individual recipes.
1:18
All the recipe information is stored
in the data folders, data.json file.
1:24
In the views folder, the Pug
templates are already in place, but
1:31
currently contain placeholder data only.
1:34
The two templates you will work with
in this exercise are index.pug and
1:37
recipe.pug.
1:43
The index.pug template is used
when the page first loads and
1:44
shows each recipe in the collection.
1:48
And the recipe.pug template is
used to display information for
1:51
each individual recipe.
1:55
As you can see in app.js,
Pug is already set up as the view engine.
1:58
Now that you have the project open,
2:06
navigate to the project directory
using your terminal or console app.
2:08
Run npm install to install
all the project dependencies,
2:14
then run npm start to start the app.
2:19
You can view the app in the browser
on localhost, port 3000.
2:22
In the browser, you should see the default
index view which displays a heading,
2:27
description, and
a placeholder recipe item for now.
2:31
Currently, the app is not styled with CSS,
2:35
aside from some simple inline styles to
resize the images, but you'll in fact,
2:37
add the CSS in a future practice
session on serving static files.
2:42
Now let's go over what you'll need to do
following the instructions in index.js,
2:46
index.pug, and recipe.pug.
2:50
Starting with routes > index.js this file
contains comments with instructions for
2:53
the code you'll need to add.
2:58
I've already required
the data.json file at the top, so
3:00
that each route can access the data and
pass it to the Pug templates.
3:03
I used destructuring assignment
to unpack the recipes array and
3:07
the data.json file and
assign it to the variable recipes.
3:12
So first, in the root get method routes,
you need to make all the recipe data
3:16
available to the index.pub template,
this will be the array of recipe objects.
3:21
Just below in the get method route for
3:27
an individual recipe I've
added two constant variables,
3:30
recipeId stores the value of an ID
route parameter with rec.params.id.
3:34
In other words, the recipe ID
values specified in the URL path,
3:40
and recipe holds the recipe
object to pass into the view.
3:45
I'm using the find method to return
the recipe object whose ID value
3:50
matches the ID parameter.
3:54
So here, you will need to pass the recipe
data into the recipe.pug view so
3:57
that it can render the recipe
information if it's available.
4:03
Next up, follow the instructions
in the file views > index.pug.
4:08
You'll first use Pug's each iterator
to iterate over the recipes and
4:13
the array passed into the view.
4:19
For each recipe item,
the view should render an anchor element
4:21
that's a parent of an H2 and
an image element.
4:25
Remember using Pug's iteration syntax
means that you'll need to adjust
4:28
the indentation of these elements.
4:32
Next, you'll need to generate
the HREF value for each anchor
4:35
element using the local variable and
recipe ID properties passed into the view.
4:40
A URL for example,
might be recipes/1 or recipes/2.
4:45
You can use string interpolation or
concatenation to generate the HREF value.
4:50
Then you'll dynamically render
the recipe name as an h2
4:56
using the data passed into the view.
4:59
And just like a link HREF attribute,
5:01
you'll dynamically generate
the source attribute of each image.
5:04
You'll replace the placeholder source
value with a value that references
5:09
the image URL property of a recipe object.
5:13
Finally, follow the instruction
comments in views > recipe.pug.
5:18
First, you'll use the data
passed to this view to
5:24
dynamically generate
the recipe name as an h1.
5:28
Right below in the image element,
you'll again,
5:31
replace the placeholder source value
with a dynamically generated value.
5:34
Next, you'll display the recipe
description as paragraph text.
5:39
Then use an each iterator,
5:45
to dynamically replace the hard coded list
item tags and the ingredients section,
5:48
with each ingredient specified in
the ingredients property of an object.
5:54
And finally, just like the ingredients,
you'll use an each iterator
6:00
to dynamically replace the list
item tags in these step section,
6:04
with each step defined in the array
assigned to the steps property.
6:08
The goal is to get the app to display
each recipe in the recipes list,
6:15
when you click on a recipe,
the app navigates to the recipes/ ID path
6:19
displaying the individual
recipe information.
6:24
Now having worked with Pug you'll
know that unlike JavaScript,
6:29
Pug is very particular about
indentation and white space.
6:32
That means if the formatting of a template
is off, it can cause rendering problems.
6:36
So keep in mind that some of the
indentation in the original templates will
6:40
need to be adjusted when using
the each iterator for example.
6:44
To be successful in this practice session,
6:47
you should have completed our lessons
on using templates with Express.
6:49
I've posted a link to the lessons in
the teachers notes with this video
6:53
as well as additional resources.
6:56
Good luck, have fun, and in the next
video, I'll walk you through one solution.
6:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up