Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
Let's include Pug in the Express App.
Express Documentation on Templating
Starter Code Snippet from Video
doctype html
html(lang="en")
head
title Landing Page
body
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
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
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