Preview
Video Player
00:00
00:00
Introducing the Practice
7:01This video introduces the challenge relating to "Using Data with Pug Templates" that you'll be working to complete.
[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