- What is Template Rendering? 2:35
- Review: What is Template Rendering 5 questions
- What is Pug? 3:00
- Using Pug in Your Express App 4:53
- Review: Pug Basics 5 questions
- Express’s Response.render Method 7:42
- Review Response.render 2 objectives
- Using Logic in Pug 6:12
- Breaking Your Project’s Templates into Partials 7:29
- Review: Pug Inheritance & Logic 5 questions
Preview
Video Player
00:00
00:00
Using Pug in Your Express App
4:53Let's include Pug in the Express App.
Adding Pug templates to
an Express app is easy.
0:00
Simply add a few lines of code and
some configuration options, and
0:04
you're ready to go.
0:07
Let me show you how that's done.
0:09
[SOUND] To use Pug in our app,
we'll follow these steps.
0:10
First, we'll download Pug from npm.
0:15
Then, we'll write a few lines of
code in the app.js file to let
0:19
Express know we're gonna use Pug.
0:24
After that we'll create
the template files.
0:26
Finally we'll render and
serve the templates to the user.
0:29
Let's get started.
0:34
To use Pug in our application,
we first need to install it.
0:37
Jumping into a new terminal, I see that
I'm in the root of my application.
0:42
Now I can add the Pug engine to our
project by typing npm install pug --save.
0:49
I see in my package.json file
that Pug has been added.
1:00
Now I can tell Express to use Pug
by opening up the app.js file and
1:05
then using the app.set method
to set the view engine,
1:11
To the parameter pug.
1:22
The app.set method defines
different settings in Express.
1:26
This line, just tells Express
which template engine to use.
1:31
By default, Express will look in a folder
called Views in the root of your project.
1:36
If you want to name your folder something
else, or nest it into another folder...
1:42
You'll need to define the view setting and
point Express to the right place.
1:47
Look for more info in the teacher's notes.
1:53
Let's create the views folder Anytime we
1:56
ask express to render a template response,
it will grab the template from here.
2:03
Inside this folder,
let's create our first Pug file.
2:09
We'll call it, index.pug.
2:16
This is the template that will render
when the user visits the root URL.
2:19
I'm going to copy and
paste some boiler plate Pug code.
2:27
This sets up the basic code for
any web page.
2:31
The doc type, HTML, head and body text.
2:33
This same snippet is in the teacher's
notes.if you want to copy and
2:41
paste it into your file.
2:45
In the body tag, I'll add
2:47
an h1 tag and give it the text,
2:52
The Future Home of Something Magical.
2:57
Let's also create a paragraph tag.
3:04
I'll copy and
paste some random text for filler.
3:07
This was generated from a free
site called Barnyard Ipsum,
3:11
which refers to lorem ipsum,
a classic filler text.
3:15
Feel free to use text of your own choice,
or
3:19
type an actual paragraph
of text if you'd like.
3:22
Now, to use the template we just created,
we can replace the res.send
3:25
method with res.render
method in our index route.
3:31
For this render method,
3:39
I can enter the name of my Pug
template as a parameter, index.
3:40
You don't need to specify
the file extension here.
3:46
Since you already set the view engine
to pug, Express knows to look for
3:50
files with the pug extension.
3:55
Let's see if this works.
3:57
Refresh your browser and
it does work, awesome.
4:00
There it is.
4:03
Open up dev tools if they're
not open already, and
4:05
let's look at the HTML that's
rendered from the pug template.
4:08
If you go to sources, and
4:12
then index, you'll see it's been
all smushed up onto one line.
4:15
I can just click these
curly braces here and
4:20
it's rendered in a much
easier formatted way.
4:25
It looks like all the content is there,
cool.
4:29
Before we start the next video,
4:32
try to modify the page to
render different HTML elements.
4:35
You could add a heading 2 element or
4:39
create a table to practice
nesting elements.
4:41
You can open up DevTools for
an idea on how they're being nested.
4:44
Next, we're going to take a deeper look
into the response dot render method.
4:49