0
1
00:00:00,360 --> 00:00:00,720
All right.
1

2
00:00:00,720 --> 00:00:08,000
So in the resources for this lesson, you should find a download link to the EJS challenge starting fires.
2

3
00:00:08,130 --> 00:00:13,710
And once you've downloaded it locally, you should see a zipped folder with the same name.
3

4
00:00:13,740 --> 00:00:20,310
So I want you to go ahead and unzip this folder and then open it up and then inside that folder you
4

5
00:00:20,310 --> 00:00:24,630
should see a project folder called ejs-challenge.
5

6
00:00:24,630 --> 00:00:28,950
Now I want you to take this folder to the location that you normally use for development.
6

7
00:00:28,950 --> 00:00:34,440
So in this case I'm just going to drag it onto my desktop but you might have say a development folder
7

8
00:00:34,470 --> 00:00:36,330
or anywhere else that you'd prefer.
8

9
00:00:36,570 --> 00:00:42,200
So once we've got this folder downloaded, we're going to go ahead and open up the app.
9

10
00:00:42,210 --> 00:00:42,820
js
10

11
00:00:42,900 --> 00:00:44,940
and we're going to open it inside at Atom.
11

12
00:00:45,030 --> 00:00:50,690
So if you don't see this little icon next to it then just right click on it and open with Atom.
12

13
00:00:50,700 --> 00:00:56,550
Now once you've opened up the project inside Atom then you should see all of the project files in the
13

14
00:00:56,550 --> 00:00:57,840
left hand pane.
14

15
00:00:57,840 --> 00:01:01,050
And in the middle we've got our app.js open.
15

16
00:01:01,050 --> 00:01:07,230
Now the first thing I want you to do is to go ahead and just expand all of these folders. And you can
16

17
00:01:07,230 --> 00:01:11,200
see that I've already created the project structure for you.
17

18
00:01:11,310 --> 00:01:19,080
Now we've got our app.js file which is our main server file but we've also got our views folder,
18

19
00:01:19,520 --> 00:01:20,800
our public folder
19

20
00:01:20,860 --> 00:01:23,440
and our css folder. Now
20

21
00:01:23,730 --> 00:01:29,120
inside each of these folders you'll find some of the files are already pre-populated.
21

22
00:01:29,130 --> 00:01:34,620
So for example for the styles.css I've already created all of the styles that we can apply to
22

23
00:01:34,620 --> 00:01:42,540
our Web page. But for others such as our home.ejs or our contact.ejs or any of these page files,
23

24
00:01:42,690 --> 00:01:48,540
I've left completely empty. And you're going to be populating these pages throughout the coming challenges
24

25
00:01:48,870 --> 00:01:52,730
until we build up our final app product.
25

26
00:01:52,800 --> 00:01:55,670
Now you'll also see scattered through here
26

27
00:01:55,800 --> 00:02:03,720
some of these DS_Store files. And these are simply just files that gets created on the Mac and it specifies
27

28
00:02:03,780 --> 00:02:10,620
a user's preferences in terms of things such as icon sizes or how or what rules to sort them by and
28

29
00:02:10,620 --> 00:02:14,070
is completely irrelevant to our project.
29

30
00:02:14,070 --> 00:02:19,500
So if you wish, you can actually just select them, hold down SHIFT or hold down CONTROL and then just
30

31
00:02:19,500 --> 00:02:23,250
delete all of these and it will not affect your project.
31

32
00:02:23,310 --> 00:02:27,500
If you want to just ignore them that's completely fine as well.
32

33
00:02:27,570 --> 00:02:34,980
So the next thing I want to show you is that inside the views folder there's a header and a footer. And
33

34
00:02:34,980 --> 00:02:41,820
they already contain some HTML code that we're going to apply to our Web pages through the use of
34

35
00:02:41,910 --> 00:02:43,450
EJS partials.
35

36
00:02:43,600 --> 00:02:46,380
And this is what we learned in the last module
36

37
00:02:46,380 --> 00:02:51,480
and in one of the challenges, you're going to be completing that challenge by yourself.
37

38
00:02:51,510 --> 00:02:57,330
Now the other file that already contains some code is our app.js. So you can see that I've already
38

39
00:02:57,330 --> 00:02:59,570
put on the linter silencer up there,
39

40
00:02:59,580 --> 00:03:06,420
I've created a bunch of constants to import our modules that were going to be using inside this project
40

41
00:03:06,510 --> 00:03:09,410
which is express, body-parser and ejs,
41

42
00:03:09,420 --> 00:03:11,260
so pretty simple, pretty straightforward.
42

43
00:03:11,370 --> 00:03:13,240
Same as what we've done before.
43

44
00:03:13,440 --> 00:03:20,340
And then there are some constants here which is just a bunch of text that we can insert into our pages
44

45
00:03:20,370 --> 00:03:25,870
the home page, the about page, the contact page through the use of EJS. Next
45

46
00:03:25,890 --> 00:03:29,100
there's a line that creates our app using Express,
46

47
00:03:29,160 --> 00:03:31,390
we set the view engine using ejs
47

48
00:03:31,590 --> 00:03:37,800
and then we use body-parser and we tell express that our static files are held inside the public folder.
48

49
00:03:37,800 --> 00:03:42,270
And finally we've got our app.listen on port 3000 and once
49

50
00:03:42,270 --> 00:03:43,190
the server is running,
50

51
00:03:43,200 --> 00:03:45,280
we're going to log in our console
51

52
00:03:45,300 --> 00:03:47,630
the Server started on port 3000.
52

53
00:03:47,640 --> 00:03:53,070
So all of this should be incredibly familiar to you and you've done it several times by now,
53

54
00:03:53,070 --> 00:03:59,850
so I'm not expecting you to repeat the same stuff. But we'll be challenging you mostly on the stuff that
54

55
00:03:59,850 --> 00:04:02,010
you learned in the last module.
55

56
00:04:02,160 --> 00:04:06,780
But in order to complete it you obviously have to review some of the stuff you learn in the Express
56

57
00:04:06,780 --> 00:04:08,710
module or in the Node module.
57

58
00:04:08,970 --> 00:04:13,170
Finally before we get started, let's take a look inside the package.
58

59
00:04:13,220 --> 00:04:18,530
json. So you can see that I've already initialized NPM in this project folder
59

60
00:04:18,570 --> 00:04:22,080
so you don't have the right npm init and hit enter several times.
60

61
00:04:22,170 --> 00:04:24,020
That's already been done.
61

62
00:04:24,060 --> 00:04:29,970
Now if you have a look inside the dependencies, I've also specified the NPM modules that we're going
62

63
00:04:29,970 --> 00:04:36,230
to be incorporating into this particular project and also the version that we're going to be using.
63

64
00:04:36,660 --> 00:04:44,160
But if you are eagle eyed, you'd have spotted that inside this project folder unlike the other project
64

65
00:04:44,160 --> 00:04:47,870
folders, we don't have a folder that's called Node modules.
65

66
00:04:48,090 --> 00:04:53,580
And that's because when you come across projects that are shared for example over GitHub, you will
66

67
00:04:53,580 --> 00:04:58,840
see that all of these projects, the Node modules tend to be gitignored.
67

68
00:04:58,860 --> 00:05:03,840
So you don't have to load a massive file over the internet. And when people download it
68

69
00:05:03,840 --> 00:05:10,710
it's also relatively small. But if you have a look inside that package.json they would have specified
69

70
00:05:10,800 --> 00:05:14,940
the dependencies that are required for the projects to work.
70

71
00:05:14,940 --> 00:05:17,200
And that's exactly what we've got here.
71

72
00:05:17,220 --> 00:05:19,770
So this is pretty much a real life scenario.
72

73
00:05:19,770 --> 00:05:26,850
Say if you had to git cloned or basically copied this project off of GitHub and you wanted to add some
73

74
00:05:26,880 --> 00:05:30,180
extra features or personalize it to make it your own,
74

75
00:05:30,180 --> 00:05:33,540
this is the state that you would discover it in real life.
75

76
00:05:33,690 --> 00:05:40,480
So the next thing I want to show you is how you can install those Node modules locally
76

77
00:05:40,620 --> 00:05:45,190
given that we've already got the dependencies inside our package.json.
77

78
00:05:45,540 --> 00:05:51,240
So first things first. Of course we're going to open up our terminal through hyper and I'm going to cd
78

79
00:05:51,250 --> 00:05:56,180
over either if you know the path or I'm just going to drag it over to terminal.
79

80
00:05:56,220 --> 00:06:01,150
So we're now inside our ejs-challenges directory
80

81
00:06:01,460 --> 00:06:05,960
and here we're going to issue the command npm install.
81

82
00:06:06,120 --> 00:06:09,350
So you'll notice that after install, there's no other keywords,
82

83
00:06:09,390 --> 00:06:15,900
I'm not specifying a particular module. But if I go ahead and hit enter now, then you'll see that it'll
83

84
00:06:15,900 --> 00:06:22,140
go through our package.json and install all of the dependencies that we've already specified.
84

85
00:06:22,170 --> 00:06:28,500
So now you can see this brand new node modules folder gets created and it contains all of our dependencies
85

86
00:06:28,620 --> 00:06:36,720
to use body-parser, ejs, and express. And this is what you would do if you had to say downloaded an example
86

87
00:06:36,720 --> 00:06:42,020
project off GitHub, say you git cloned it or you just download it as a zip.
87

88
00:06:42,060 --> 00:06:48,900
The first thing you would do is to run NPM install on it to install all of the required modules.
88

89
00:06:48,900 --> 00:06:54,060
So now that we're up and running and you've installed the node modules required, so just check to make
89

90
00:06:54,060 --> 00:06:57,700
sure that you've got that folder showing up inside your project folder,
90

91
00:06:57,930 --> 00:07:01,190
then it's time to head over to the next lesson
91

92
00:07:01,290 --> 00:07:04,040
where are you going to be facing your very first challenge.
92

93
00:07:04,120 --> 00:07:05,360
So I'll see you over there.