All language subtitles for 002 Setting Up the Blog Project_en

All right.

So in the resources for this lesson, you should find a download link to the EJS challenge starting fires.

And once you've downloaded it locally, you should see a zipped folder with the same name.

So I want you to go ahead and unzip this folder and then open it up and then inside that folder you

should see a project folder called ejs-challenge.

Now I want you to take this folder to the location that you normally use for development.

So in this case I'm just going to drag it onto my desktop but you might have say a development folder

or anywhere else that you'd prefer.

So once we've got this folder downloaded, we're going to go ahead and open up the app.

js

and we're going to open it inside at Atom.

So if you don't see this little icon next to it then just right click on it and open with Atom.

Now once you've opened up the project inside Atom then you should see all of the project files in the

left hand pane.

And in the middle we've got our app.js open.

Now the first thing I want you to do is to go ahead and just expand all of these folders. And you can

see that I've already created the project structure for you.

Now we've got our app.js file which is our main server file but we've also got our views folder,

our public folder

and our css folder. Now

inside each of these folders you'll find some of the files are already pre-populated.

So for example for the styles.css I've already created all of the styles that we can apply to

our Web page. But for others such as our home.ejs or our contact.ejs or any of these page files,

I've left completely empty. And you're going to be populating these pages throughout the coming challenges

until we build up our final app product.

Now you'll also see scattered through here

some of these DS_Store files. And these are simply just files that gets created on the Mac and it specifies

a user's preferences in terms of things such as icon sizes or how or what rules to sort them by and

is completely irrelevant to our project.

So if you wish, you can actually just select them, hold down SHIFT or hold down CONTROL and then just

delete all of these and it will not affect your project.

If you want to just ignore them that's completely fine as well.

So the next thing I want to show you is that inside the views folder there's a header and a footer. And

they already contain some HTML code that we're going to apply to our Web pages through the use of

EJS partials.

And this is what we learned in the last module

and in one of the challenges, you're going to be completing that challenge by yourself.

Now the other file that already contains some code is our app.js. So you can see that I've already

put on the linter silencer up there,

I've created a bunch of constants to import our modules that were going to be using inside this project

which is express, body-parser and ejs,

so pretty simple, pretty straightforward.

Same as what we've done before.

And then there are some constants here which is just a bunch of text that we can insert into our pages

the home page, the about page, the contact page through the use of EJS. Next

there's a line that creates our app using Express,

we set the view engine using ejs

and then we use body-parser and we tell express that our static files are held inside the public folder.

And finally we've got our app.listen on port 3000 and once

the server is running,

we're going to log in our console

the Server started on port 3000.

So all of this should be incredibly familiar to you and you've done it several times by now,

so I'm not expecting you to repeat the same stuff. But we'll be challenging you mostly on the stuff that

you learned in the last module.

But in order to complete it you obviously have to review some of the stuff you learn in the Express

module or in the Node module.

Finally before we get started, let's take a look inside the package.

json. So you can see that I've already initialized NPM in this project folder

so you don't have the right npm init and hit enter several times.

That's already been done.

Now if you have a look inside the dependencies, I've also specified the NPM modules that we're going

to be incorporating into this particular project and also the version that we're going to be using.

But if you are eagle eyed, you'd have spotted that inside this project folder unlike the other project

folders, we don't have a folder that's called Node modules.

And that's because when you come across projects that are shared for example over GitHub, you will

see that all of these projects, the Node modules tend to be gitignored.

So you don't have to load a massive file over the internet. And when people download it

it's also relatively small. But if you have a look inside that package.json they would have specified

the dependencies that are required for the projects to work.

And that's exactly what we've got here.

So this is pretty much a real life scenario.

Say if you had to git cloned or basically copied this project off of GitHub and you wanted to add some

extra features or personalize it to make it your own,

this is the state that you would discover it in real life.

So the next thing I want to show you is how you can install those Node modules locally

given that we've already got the dependencies inside our package.json.

So first things first. Of course we're going to open up our terminal through hyper and I'm going to cd

over either if you know the path or I'm just going to drag it over to terminal.

So we're now inside our ejs-challenges directory

and here we're going to issue the command npm install.

So you'll notice that after install, there's no other keywords,

I'm not specifying a particular module. But if I go ahead and hit enter now, then you'll see that it'll

go through our package.json and install all of the dependencies that we've already specified.

So now you can see this brand new node modules folder gets created and it contains all of our dependencies

to use body-parser, ejs, and express. And this is what you would do if you had to say downloaded an example

project off GitHub, say you git cloned it or you just download it as a zip.

The first thing you would do is to run NPM install on it to install all of the required modules.

So now that we're up and running and you've installed the node modules required, so just check to make

sure that you've got that folder showing up inside your project folder,

then it's time to head over to the next lesson

where are you going to be facing your very first challenge.

So I'll see you over there.