0:01 Hey guys, welcome to part three of the 0:03 Node.js Express Cassandra video series. 0:07 Uh, up to this point we have everything 0:09 installed. Node.js is installed on our 0:11 Windows system um as well as um 0:16 Cassandra. In this video, uh we're going 0:19 to generate our application and just get 0:22 it get it initially set up and uh ready 0:25 for us to work on it. All right. So, 0:29 what I'm going to do is I'm going to 0:31 create a folder in my C drive, and it's 0:34 just going to be called projects. 0:37 All right. So, what I want you to do is 0:39 is the same thing. Just create, if you 0:41 don't already have a projects folder 0:42 where you um where you have all your 0:45 projects, um create that, but do not 0:48 create the actual project folder because 0:50 that's going to be generated for us. All 0:53 right. So, what I'm going to do here is 0:55 I'm going to rightclick 0:58 and go to git bash. And that's going to 1:01 open that uh command line that uh that 1:04 git offers right in this projects 1:06 folder. So that's what we want. All 1:08 right, we need to do a few things here. 1:10 First thing I'm going to say npm 1:13 install and then we want this g flag 1:19 express. 1:21 All right, the g is for globally. We 1:23 want installed globally. 1:28 All right. So that installed Express or 1:31 got it ready to be installed. Next 1:33 thing, um, before Express 4 came out, 1:36 you could just generate your application 1:39 using Express, but now with Express 4, 1:42 we need to actually install the 1:44 generator. So we're going to say npm 1:48 install g 1:51 Express 1:53 generator. 1:57 All right. So now we have the generator 1:59 and we can actually generate our 2:01 application and its folder. So we can do 2:04 that with express and then the 2:06 application name. Okay. So I'm just 2:08 going to call this application 2:11 uh my subscribers. 2:13 All right. 2:16 Okay. And you can see that it's 2:17 generated all these files and folders. 2:19 So if we go to our projects folder, you 2:22 should now have a folder called my 2:24 subscribers or whatever you named it. 2:26 And in here you can see that we have all 2:28 the the initial express folders. Okay, 2:31 the binaries folder. We have the public 2:33 folder which holds all the images um 2:37 global javascripts and stylesheets. Also 2:40 gives us a stylesheet to work with. Um 2:43 routes. This is where all our routes go. 2:46 Basically, our index route's going to 2:48 take care of just displaying the um the 2:51 list of of subscribers. Uh and then 2:54 we'll have some other routes as well, 2:56 such as the subscriber route where we 2:58 can actually just view one user. Um and 3:01 then also we need routes to add and edit 3:04 subscribers as well. Uh views basically 3:08 um we're using Jade. It's a template 3:10 engine for node and um it's not it's not 3:15 regular HTML. If I actually open this, I 3:18 can show you a little bit. It works on 3:22 indentation. All right. So, normally we 3:25 would surround 3:27 this content with an HTML tag up here 3:30 and then an ending HTML tag down here. 3:33 When we're using Jade, we're using 3:35 indents. So after HTML, you can see that 3:37 everything is indented one space. And 3:40 what that means is that it's wrapped in 3:43 this. All right? If I move this head 3:46 back, then it's not going to be wrapped 3:48 in this anymore. It's going to come 3:50 after the closing HTML tag. So you don't 3:53 have two versions. You don't have the 3:55 the the beginning and end tag. You just 3:57 have one, and then it goes by the 3:59 indentation. 4:01 And one thing I should mention, if 4:03 you're using Sublime Text like I am, um, 4:06 then you want to go down here where it 4:07 says tab size, then you want to make 4:09 sure that you go to convert indentation 4:12 to tabs. Actually, you can use spaces or 4:15 tabs, but not both. Okay? Cuz you'll get 4:18 an error. I might actually get an error 4:20 with this. So, um, so that's the 4:24 layouts. I mean, I'm sorry, that is the 4:26 Jade files, the views. Now, this 4:29 layout.jade, Jade. This is the master 4:32 view. You can see it has the dock type. 4:34 It has the HTML and body tags. Um, 4:37 basically all our views will be inside 4:40 of this view and those will go here in 4:42 the block content. All right. So, this 4:45 is where you may want to put your 4:46 navigation, 4:48 um, your footer, header, things like 4:50 that. All right. So, let's close that. 4:55 And it gives us an index view. 4:59 Basically uh whenever you create a view 5:01 it has to have this and this and then it 5:04 has the content wh so this this page 5:07 just has basically an h1 tag and why 5:11 this is set equal to title because title 5:15 is actually a variable this is going to 5:17 come from the route and that's why we 5:19 have it down here in this format and 5:21 I'll show you what I mean uh in a few 5:23 minutes. So those are the views. 5:28 Um 5:30 I just want to close all these. I think 5:33 these are all old. 5:37 All right. So back in our file 5:39 structure. 5:41 Next we have app.js. And that's 5:43 basically the gateway to our 5:44 application. Uh that's where we define 5:47 Let me just open that up. 5:50 That's where we do all our requires for 5:52 our modules. um the set up the view 5:55 engine. You can see that we're using 5:57 Jade for the view engine. Uh this is the 6:00 main instantiation of the express 6:02 variable or the app variable object. And 6:06 then here is just all the middleware 6:07 that express uses. 6:10 Actually, this is this here is where we 6:13 can define our routes. Basically, uh, 6:16 we're going to define the home or the 6:18 index page, which is just a slash, and 6:20 then also the slash users, which is just 6:23 a, I guess, a a default, a sample route 6:26 that they give you. And then down here, 6:29 you can you can specify different uh 6:32 development. You can you can um your 6:35 environment can be in development, it 6:37 could be production, testing, whatever 6:39 you want. All right. So, I'm just going 6:41 to leave all this for now. 6:45 And the last folder, I'm sorry, the last 6:46 file I want to show you is this 6:49 package.json file. And this is very 6:51 important. 6:54 This is where you want to define your 6:56 application info. You can see we have 6:58 the name, the version, which I'm going 7:00 to change to 001. 7:03 And then here is where we define all the 7:05 dependencies. Okay, so these all here 7:08 are all modules that need to be 7:10 installed. They're not already 7:12 installed. Um, we just got to run a 7:14 command to do that. But before we do 7:16 that, we want to make sure that we 7:18 install the Cassandra driver. All right. 7:20 So, down at the bottom here, actually, 7:23 we want to put a comma here. Oops. 7:28 Okay. And then we're going to do 7:32 Sandra 7:34 Driver. Okay. And then what we want to 7:37 do here is the version number. Now, if 7:39 you don't know the version number, then 7:41 you just want to use an asterisk. and 7:42 that's going to give you the latest 7:44 version. Okay, so that's the only the 7:47 only module that we need to add here. So 7:48 I'm going to go ahead and save this. And 7:52 how we install those dependencies is 7:55 through this command line. We're going 7:58 to do just npm 8:02 install. 8:03 And that should install all of those. Um 8:06 let me see what's this. Couldn't read 8:08 dependency. 8:12 Can't find a package.json. Oh, we're not 8:15 in the actual project folder. Uh, we're 8:17 in projects. So, we need to change 8:19 directory to 8:23 my subscribers. 8:25 All right. Now, we should run npm 8:28 install. 8:47 Okay. And now if we go to our folder, 8:49 you should see now we have a node 8:52 modules folder. It has all the the 8:55 modules we need including express jade 8:58 and also the Cassandra driver. All 9:00 right. So that's all set. Now before I 9:03 end the video, uh one more thing. I just 9:05 want to go to app.js 9:07 and we just want to include the 9:09 Cassandra 9:11 um module or driver. So variable 9:15 Cassandra and we're just going to say 9:18 require 9:24 Cassandra driver. 9:28 Okay. So now we'll save that and now we 9:30 can try to run our server. Okay. So to 9:34 run the server all we have to do is do 9:37 npm start. 9:42 All right. So you can see that it is 9:43 running. We have a blinking cursor here. 9:46 Uh so let's go ahead and open 9:49 Chrome. 9:58 And what we want to do is go to HTTP 10:06 localhost. And the default port is going 10:09 to be 3000. 10:19 All right. So, we're getting a Jade 10:21 error. And this is coming from what I 10:24 talked about with the spaces and tabs. 10:26 You can see that right here it says you 10:28 can use tabs or spaces but not both. All 10:31 right. So I'm going to go back to 10:35 views and I it's probably in the layout 10:38 file. 10:42 Okay. Okay. And I'm just going to kind 10:43 of bring all these back. 10:51 All right. And then after HTML, we want 10:54 to do a tab 10:56 tab tab. 11:03 All right. So, basically, it should look 11:05 like that. I'm going to save it and 11:08 reload. And there it is. So this is the 11:10 the the default welcome page. So 11:13 everything's up and running. Um 11:16 one thing I want to mention is that when 11:18 you're editing JavaScript files, when 11:20 you're editing routes, things like that, 11:22 you need to restart the server. Uh if 11:24 you're just editing Jade documents that 11:26 then you don't need to restart it. All 11:29 right. So in the next video, we will be 11:33 creating our route for the index page, 11:36 which will just show all of our 11:38 subscribers. Um, and then we'll go from
