All right. 1
So in the resources for this lesson, you should find a download link to the EJS challenge starting fires. 2
And once you've downloaded it locally, you should see a zipped folder with the same name. 3
So I want you to go ahead and unzip this folder and then open it up and then inside that folder you 4
should see a project folder called ejs-challenge. 5
Now I want you to take this folder to the location that you normally use for development. 6
So in this case I'm just going to drag it onto my desktop but you might have say a development folder 7
or anywhere else that you'd prefer. 8
So once we've got this folder downloaded, we're going to go ahead and open up the app. 9
js 10
and we're going to open it inside at Atom. 11
So if you don't see this little icon next to it then just right click on it and open with Atom. 12
Now once you've opened up the project inside Atom then you should see all of the project files in the 13
left hand pane. 14
And in the middle we've got our app.js open. 15
Now the first thing I want you to do is to go ahead and just expand all of these folders. And you can 16
see that I've already created the project structure for you. 17
Now we've got our app.js file which is our main server file but we've also got our views folder, 18
our public folder 19
and our css folder. Now 20
inside each of these folders you'll find some of the files are already pre-populated. 21
So for example for the styles.css I've already created all of the styles that we can apply to 22
our Web page. But for others such as our home.ejs or our contact.ejs or any of these page files, 23
I've left completely empty. And you're going to be populating these pages throughout the coming challenges 24
until we build up our final app product. 25
Now you'll also see scattered through here 26
some of these DS_Store files. And these are simply just files that gets created on the Mac and it specifies 27
a user's preferences in terms of things such as icon sizes or how or what rules to sort them by and 28
is completely irrelevant to our project. 29
So if you wish, you can actually just select them, hold down SHIFT or hold down CONTROL and then just 30
delete all of these and it will not affect your project. 31
If you want to just ignore them that's completely fine as well. 32
So the next thing I want to show you is that inside the views folder there's a header and a footer. And 33
they already contain some HTML code that we're going to apply to our Web pages through the use of 34
EJS partials. 35
And this is what we learned in the last module 36
and in one of the challenges, you're going to be completing that challenge by yourself. 37
Now the other file that already contains some code is our app.js. So you can see that I've already 38
put on the linter silencer up there, 39
I've created a bunch of constants to import our modules that were going to be using inside this project 40
which is express, body-parser and ejs, 41
so pretty simple, pretty straightforward. 42
Same as what we've done before. 43
And then there are some constants here which is just a bunch of text that we can insert into our pages 44
the home page, the about page, the contact page through the use of EJS. Next 45
there's a line that creates our app using Express, 46
we set the view engine using ejs 47
and then we use body-parser and we tell express that our static files are held inside the public folder. 48
And finally we've got our app.listen on port 3000 and once 49
the server is running, 50
we're going to log in our console 51
the Server started on port 3000. 52
So all of this should be incredibly familiar to you and you've done it several times by now, 53
so I'm not expecting you to repeat the same stuff. But we'll be challenging you mostly on the stuff that 54
you learned in the last module. 55
But in order to complete it you obviously have to review some of the stuff you learn in the Express 56
module or in the Node module. 57
Finally before we get started, let's take a look inside the package. 58
json. So you can see that I've already initialized NPM in this project folder 59
so you don't have the right npm init and hit enter several times. 60
That's already been done. 61
Now if you have a look inside the dependencies, I've also specified the NPM modules that we're going 62
to be incorporating into this particular project and also the version that we're going to be using. 63
But if you are eagle eyed, you'd have spotted that inside this project folder unlike the other project 64
folders, we don't have a folder that's called Node modules. 65
And that's because when you come across projects that are shared for example over GitHub, you will 66
see that all of these projects, the Node modules tend to be gitignored. 67
So you don't have to load a massive file over the internet. And when people download it 68
it's also relatively small. But if you have a look inside that package.json they would have specified 69
the dependencies that are required for the projects to work. 70
And that's exactly what we've got here. 71
So this is pretty much a real life scenario. 72
Say if you had to git cloned or basically copied this project off of GitHub and you wanted to add some 73
extra features or personalize it to make it your own, 74
this is the state that you would discover it in real life. 75
So the next thing I want to show you is how you can install those Node modules locally 76
given that we've already got the dependencies inside our package.json. 77
So first things first. Of course we're going to open up our terminal through hyper and I'm going to cd 78
over either if you know the path or I'm just going to drag it over to terminal. 79
So we're now inside our ejs-challenges directory 80
and here we're going to issue the command npm install. 81
So you'll notice that after install, there's no other keywords, 82
I'm not specifying a particular module. But if I go ahead and hit enter now, then you'll see that it'll 83
go through our package.json and install all of the dependencies that we've already specified. 84
So now you can see this brand new node modules folder gets created and it contains all of our dependencies 85
to use body-parser, ejs, and express. And this is what you would do if you had to say downloaded an example 86
project off GitHub, say you git cloned it or you just download it as a zip. 87
The first thing you would do is to run NPM install on it to install all of the required modules. 88
So now that we're up and running and you've installed the node modules required, so just check to make 89
sure that you've got that folder showing up inside your project folder, 90
then it's time to head over to the next lesson 91
where are you going to be facing your very first challenge. 92
So I'll see you over there.