1
00:00:00,430 --> 00:00:04,070
Adding Pug templates to
an Express app is easy.

2
00:00:04,070 --> 00:00:07,900
Simply add a few lines of code and
some configuration options, and

3
00:00:07,900 --> 00:00:09,620
you're ready to go.

4
00:00:09,620 --> 00:00:10,925
Let me show you how that's done.

5
00:00:10,925 --> 00:00:15,947
[SOUND] To use Pug in our app,
we'll follow these steps.

6
00:00:15,947 --> 00:00:19,172
First, we'll download Pug from npm.

7
00:00:19,172 --> 00:00:24,127
Then, we'll write a few lines of
code in the app.js file to let

8
00:00:24,127 --> 00:00:26,942
Express know we're gonna use Pug.

9
00:00:26,942 --> 00:00:29,651
After that we'll create
the template files.

10
00:00:29,651 --> 00:00:34,322
Finally we'll render and
serve the templates to the user.

11
00:00:34,322 --> 00:00:36,120
Let's get started.

12
00:00:37,650 --> 00:00:41,570
To use Pug in our application,
we first need to install it.

13
00:00:42,900 --> 00:00:48,140
Jumping into a new terminal, I see that
I'm in the root of my application.

14
00:00:49,280 --> 00:00:56,581
Now I can add the Pug engine to our
project by typing npm install pug --save.

15
00:01:00,658 --> 00:01:05,260
I see in my package.json file
that Pug has been added.

16
00:01:05,260 --> 00:01:11,654
Now I can tell Express to use Pug
by opening up the app.js file and

17
00:01:11,654 --> 00:01:17,110
then using the app.set method
to set the view engine,

18
00:01:22,132 --> 00:01:23,400
To the parameter pug.

19
00:01:26,690 --> 00:01:31,910
The app.set method defines
different settings in Express.

20
00:01:31,910 --> 00:01:36,970
This line, just tells Express
which template engine to use.

21
00:01:36,970 --> 00:01:42,960
By default, Express will look in a folder
called Views in the root of your project.

22
00:01:42,960 --> 00:01:47,920
If you want to name your folder something
else, or nest it into another folder...

23
00:01:47,920 --> 00:01:53,430
You'll need to define the view setting and
point Express to the right place.

24
00:01:53,430 --> 00:01:54,921
Look for more info in the teacher's notes.

25
00:01:56,546 --> 00:02:03,745
Let's create the views folder Anytime we

26
00:02:03,745 --> 00:02:09,480
ask express to render a template response,
it will grab the template from here.

27
00:02:09,480 --> 00:02:12,580
Inside this folder,
let's create our first Pug file.

28
00:02:16,288 --> 00:02:19,416
We'll call it, index.pug.

29
00:02:19,416 --> 00:02:27,520
This is the template that will render
when the user visits the root URL.

30
00:02:27,520 --> 00:02:31,180
I'm going to copy and
paste some boiler plate Pug code.

31
00:02:31,180 --> 00:02:33,575
This sets up the basic code for
any web page.

32
00:02:33,575 --> 00:02:41,330
The doc type, HTML, head and body text.

33
00:02:41,330 --> 00:02:45,310
This same snippet is in the teacher's
notes.if you want to copy and

34
00:02:45,310 --> 00:02:47,510
paste it into your file.

35
00:02:47,510 --> 00:02:52,145
In the body tag, I'll add

36
00:02:52,145 --> 00:02:57,622
an h1 tag and give it the text,

37
00:02:57,622 --> 00:03:04,600
The Future Home of Something Magical.

38
00:03:04,600 --> 00:03:07,620
Let's also create a paragraph tag.

39
00:03:07,620 --> 00:03:11,580
I'll copy and
paste some random text for filler.

40
00:03:11,580 --> 00:03:15,760
This was generated from a free
site called Barnyard Ipsum,

41
00:03:15,760 --> 00:03:19,760
which refers to lorem ipsum,
a classic filler text.

42
00:03:19,760 --> 00:03:22,170
Feel free to use text of your own choice,
or

43
00:03:22,170 --> 00:03:25,870
type an actual paragraph
of text if you'd like.

44
00:03:25,870 --> 00:03:31,838
Now, to use the template we just created,
we can replace the res.send

45
00:03:31,838 --> 00:03:37,900
method with res.render
method in our index route.

46
00:03:39,320 --> 00:03:40,670
For this render method,

47
00:03:40,670 --> 00:03:44,840
I can enter the name of my Pug
template as a parameter, index.

48
00:03:46,190 --> 00:03:49,280
You don't need to specify
the file extension here.

49
00:03:50,440 --> 00:03:55,130
Since you already set the view engine
to pug, Express knows to look for

50
00:03:55,130 --> 00:03:56,870
files with the pug extension.

51
00:03:57,930 --> 00:04:00,020
Let's see if this works.

52
00:04:00,020 --> 00:04:03,690
Refresh your browser and
it does work, awesome.

53
00:04:03,690 --> 00:04:04,190
There it is.

54
00:04:05,420 --> 00:04:08,300
Open up dev tools if they're
not open already, and

55
00:04:08,300 --> 00:04:12,310
let's look at the HTML that's
rendered from the pug template.

56
00:04:12,310 --> 00:04:15,250
If you go to sources, and

57
00:04:15,250 --> 00:04:19,570
then index, you'll see it's been
all smushed up onto one line.

58
00:04:20,640 --> 00:04:25,020
I can just click these
curly braces here and

59
00:04:25,020 --> 00:04:28,000
it's rendered in a much
easier formatted way.

60
00:04:29,280 --> 00:04:31,860
It looks like all the content is there,
cool.

61
00:04:32,970 --> 00:04:35,660
Before we start the next video,

62
00:04:35,660 --> 00:04:39,840
try to modify the page to
render different HTML elements.

63
00:04:39,840 --> 00:04:41,930
You could add a heading 2 element or

64
00:04:41,930 --> 00:04:44,850
create a table to practice
nesting elements.

65
00:04:44,850 --> 00:04:49,190
You can open up DevTools for
an idea on how they're being nested.

66
00:04:49,190 --> 00:04:53,250
Next, we're going to take a deeper look
into the response dot render method.