WEBVTT 0 00:00.360 --> 00:00.720 All right. 1 00:00.720 --> 00:08.000 So in the resources for this lesson, you should find a download link to the EJS challenge starting fires. 2 00:08.130 --> 00:13.710 And once you've downloaded it locally, you should see a zipped folder with the same name. 3 00:13.740 --> 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 00:20.310 --> 00:24.630 should see a project folder called ejs-challenge. 5 00:24.630 --> 00:28.950 Now I want you to take this folder to the location that you normally use for development. 6 00:28.950 --> 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 00:34.470 --> 00:36.330 or anywhere else that you'd prefer. 8 00:36.570 --> 00:42.200 So once we've got this folder downloaded, we're going to go ahead and open up the app. 9 00:42.210 --> 00:42.820 js 10 00:42.900 --> 00:44.940 and we're going to open it inside at Atom. 11 00:45.030 --> 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 00:50.700 --> 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 00:56.550 --> 00:57.840 left hand pane. 14 00:57.840 --> 01:01.050 And in the middle we've got our app.js open. 15 01:01.050 --> 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 01:07.230 --> 01:11.200 see that I've already created the project structure for you. 17 01:11.310 --> 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 01:19.520 --> 01:20.800 our public folder 19 01:20.860 --> 01:23.440 and our css folder. Now 20 01:23.730 --> 01:29.120 inside each of these folders you'll find some of the files are already pre-populated. 21 01:29.130 --> 01:34.620 So for example for the styles.css I've already created all of the styles that we can apply to 22 01:34.620 --> 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 01:42.690 --> 01:48.540 I've left completely empty. And you're going to be populating these pages throughout the coming challenges 24 01:48.870 --> 01:52.730 until we build up our final app product. 25 01:52.800 --> 01:55.670 Now you'll also see scattered through here 26 01:55.800 --> 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 02:03.780 --> 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 02:10.620 --> 02:14.070 is completely irrelevant to our project. 29 02:14.070 --> 02:19.500 So if you wish, you can actually just select them, hold down SHIFT or hold down CONTROL and then just 30 02:19.500 --> 02:23.250 delete all of these and it will not affect your project. 31 02:23.310 --> 02:27.500 If you want to just ignore them that's completely fine as well. 32 02:27.570 --> 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 02:34.980 --> 02:41.820 they already contain some HTML code that we're going to apply to our Web pages through the use of 34 02:41.910 --> 02:43.450 EJS partials. 35 02:43.600 --> 02:46.380 And this is what we learned in the last module 36 02:46.380 --> 02:51.480 and in one of the challenges, you're going to be completing that challenge by yourself. 37 02:51.510 --> 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 02:57.330 --> 02:59.570 put on the linter silencer up there, 39 02:59.580 --> 03:06.420 I've created a bunch of constants to import our modules that were going to be using inside this project 40 03:06.510 --> 03:09.410 which is express, body-parser and ejs, 41 03:09.420 --> 03:11.260 so pretty simple, pretty straightforward. 42 03:11.370 --> 03:13.240 Same as what we've done before. 43 03:13.440 --> 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 03:20.370 --> 03:25.870 the home page, the about page, the contact page through the use of EJS. Next 45 03:25.890 --> 03:29.100 there's a line that creates our app using Express, 46 03:29.160 --> 03:31.390 we set the view engine using ejs 47 03:31.590 --> 03:37.800 and then we use body-parser and we tell express that our static files are held inside the public folder. 48 03:37.800 --> 03:42.270 And finally we've got our app.listen on port 3000 and once 49 03:42.270 --> 03:43.190 the server is running, 50 03:43.200 --> 03:45.280 we're going to log in our console 51 03:45.300 --> 03:47.630 the Server started on port 3000. 52 03:47.640 --> 03:53.070 So all of this should be incredibly familiar to you and you've done it several times by now, 53 03:53.070 --> 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 03:59.850 --> 04:02.010 you learned in the last module. 55 04:02.160 --> 04:06.780 But in order to complete it you obviously have to review some of the stuff you learn in the Express 56 04:06.780 --> 04:08.710 module or in the Node module. 57 04:08.970 --> 04:13.170 Finally before we get started, let's take a look inside the package. 58 04:13.220 --> 04:18.530 json. So you can see that I've already initialized NPM in this project folder 59 04:18.570 --> 04:22.080 so you don't have the right npm init and hit enter several times. 60 04:22.170 --> 04:24.020 That's already been done. 61 04:24.060 --> 04:29.970 Now if you have a look inside the dependencies, I've also specified the NPM modules that we're going 62 04:29.970 --> 04:36.230 to be incorporating into this particular project and also the version that we're going to be using. 63 04:36.660 --> 04:44.160 But if you are eagle eyed, you'd have spotted that inside this project folder unlike the other project 64 04:44.160 --> 04:47.870 folders, we don't have a folder that's called Node modules. 65 04:48.090 --> 04:53.580 And that's because when you come across projects that are shared for example over GitHub, you will 66 04:53.580 --> 04:58.840 see that all of these projects, the Node modules tend to be gitignored. 67 04:58.860 --> 05:03.840 So you don't have to load a massive file over the internet. And when people download it 68 05:03.840 --> 05:10.710 it's also relatively small. But if you have a look inside that package.json they would have specified 69 05:10.800 --> 05:14.940 the dependencies that are required for the projects to work. 70 05:14.940 --> 05:17.200 And that's exactly what we've got here. 71 05:17.220 --> 05:19.770 So this is pretty much a real life scenario. 72 05:19.770 --> 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 05:26.880 --> 05:30.180 extra features or personalize it to make it your own, 74 05:30.180 --> 05:33.540 this is the state that you would discover it in real life. 75 05:33.690 --> 05:40.480 So the next thing I want to show you is how you can install those Node modules locally 76 05:40.620 --> 05:45.190 given that we've already got the dependencies inside our package.json. 77 05:45.540 --> 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 05:51.250 --> 05:56.180 over either if you know the path or I'm just going to drag it over to terminal. 79 05:56.220 --> 06:01.150 So we're now inside our ejs-challenges directory 80 06:01.460 --> 06:05.960 and here we're going to issue the command npm install. 81 06:06.120 --> 06:09.350 So you'll notice that after install, there's no other keywords, 82 06:09.390 --> 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 06:15.900 --> 06:22.140 go through our package.json and install all of the dependencies that we've already specified. 84 06:22.170 --> 06:28.500 So now you can see this brand new node modules folder gets created and it contains all of our dependencies 85 06:28.620 --> 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 06:36.720 --> 06:42.020 project off GitHub, say you git cloned it or you just download it as a zip. 87 06:42.060 --> 06:48.900 The first thing you would do is to run NPM install on it to install all of the required modules. 88 06:48.900 --> 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 06:54.060 --> 06:57.700 sure that you've got that folder showing up inside your project folder, 90 06:57.930 --> 07:01.190 then it's time to head over to the next lesson 91 07:01.290 --> 07:04.040 where are you going to be facing your very first challenge. 92 07:04.120 --> 07:05.360 So I'll see you over there.