WEBVTT 00:00.110 --> 00:00.450 Well. 00:00.470 --> 00:01.110 OK. 00:01.260 --> 00:02.650 Very enthusiastic now. 00:02.800 --> 00:07.850 We're actually getting the web app and writing code in this section in this video we installed. 00:07.860 --> 00:10.050 EXPRESS Now we're ready to go. 00:10.230 --> 00:14.870 But we need to discuss what we're going to make with our first most basic pass at a Web site. 00:15.360 --> 00:20.790 So here's a nice little but hopefully you think it's nice a little diagram I made of a typical request 00:21.090 --> 00:23.860 and response cycle that we'll be working with an express. 00:23.940 --> 00:27.910 So here's a computer let's say it's blues my cats. 00:28.050 --> 00:34.200 And then there's our express app that we'll be creating which is node javascript and blue types in the 00:34.200 --> 00:35.100 name of our app. 00:35.130 --> 00:44.540 Let's just say it's GWW dot app dot com Jihad center a request is sent to our express app saying hey 00:44.600 --> 00:50.960 I would like the slash page and slash right here is referring to the the URL that we're asking for the 00:50.960 --> 00:52.840 path after. 00:52.910 --> 00:58.120 So if you notice I'm on web dev out slide's dot com. 00:58.260 --> 01:05.580 This is basically like our entire express app what will be creating and then individual pages we ask 01:05.580 --> 01:08.930 for by you know varying what comes after the slash. 01:08.940 --> 01:13.410 So if you take a look if you never noticed that before the path that comes after slashing a web page 01:13.950 --> 01:16.850 that is usually what dictates what content you see. 01:16.950 --> 01:21.300 So when we don't ask for anything if I just go to web dev dot slides dot com that's going to be the 01:21.300 --> 01:26.860 home page and the way that we would kind of write that is the path is slash just forward slash. 01:26.860 --> 01:28.500 Nothing. 01:28.540 --> 01:29.480 OK so. 01:29.550 --> 01:29.900 Hi there. 01:29.900 --> 01:31.550 I'd like the home page please. 01:31.680 --> 01:33.970 And then the Express app has to figure out what to do. 01:34.280 --> 01:35.090 So that's sure. 01:35.100 --> 01:39.860 Here you go and sends back our super simple hello from our web app. 01:39.990 --> 01:40.620 That's it. 01:40.620 --> 01:43.280 It just is one line of text says hello from a web app. 01:43.280 --> 01:48.350 No colors no animations nothing like that and there's no logic involved to start. 01:48.720 --> 01:52.540 Every time blue goes to this page she gets Hello from our Web site. 01:52.830 --> 01:58.770 Now what we're working towards is creating dynamic pages that will vary that will say hey we have 500000 01:58.770 --> 02:04.500 users or here's a list of all of our users in the database or something like that that varies depending 02:04.560 --> 02:07.680 on when the user asked for it who the user is. 02:07.680 --> 02:09.210 There's a whole bunch of different conditions. 02:09.360 --> 02:11.150 So that's the flow we're trying to get. 02:11.160 --> 02:18.330 We sent a request asking for a particular thing in our express app has to figure out one how to handle 02:18.330 --> 02:19.230 that. 02:19.290 --> 02:22.230 How does our trust app know what we're asking for. 02:22.230 --> 02:25.170 Second of all how does it respond. 02:25.170 --> 02:30.280 So it's these two arrows that are really the important part the request and the response. 02:30.420 --> 02:31.820 So let's get started. 02:32.460 --> 02:33.870 Here's what the code looks like. 02:33.870 --> 02:36.390 So there's a little bit here that we have. 02:36.390 --> 02:38.160 Well we haven't seen any of this. 02:38.340 --> 02:39.910 We've seen requiring. 02:39.960 --> 02:45.420 So all we're doing is importing Express and saving it into an express variable then we're doing this 02:45.420 --> 02:52.140 weird thing that we haven't seen where we're actually executing the entire express package that we just 02:52.380 --> 02:53.200 imported. 02:53.370 --> 02:55.770 And we're saving that to another variable called the app. 02:55.770 --> 02:59.740 Basically these are the first two steps of any express application. 02:59.880 --> 03:01.470 Copy and paste them every time. 03:01.470 --> 03:06.090 I mean they're not very long so you could just type it but you can treat them as just cookie cutter 03:06.210 --> 03:07.360 every time. 03:07.780 --> 03:13.430 Then every time we refer to this app like we have here app don't get an app. 03:13.510 --> 03:16.870 Listen both of those are referring to this app. 03:16.920 --> 03:20.350 So anytime we work with Express it's going to be a lot of apps. 03:20.820 --> 03:23.510 Something after I get apt get amped up. 03:23.520 --> 03:29.220 All these other things which are on the documentation I can see over here we have all these apps delete 03:29.550 --> 03:34.410 APTA enable apps get doubtless an app listen Param all these different things. 03:34.470 --> 03:35.730 They all start with app. 03:36.150 --> 03:38.700 Of course if we named this variable something different. 03:38.970 --> 03:42.050 Apple then this would be Apple does get an apple but listen. 03:42.100 --> 03:44.940 So so far this doesnt do anything. 03:44.940 --> 03:46.920 These are just two lines to require stuff. 03:46.950 --> 03:49.850 The magic is really here and here. 03:50.100 --> 03:51.960 The first thing is what's known as a router. 03:52.050 --> 03:55.900 This is the bread and butter of express pretty much every web framework. 03:56.070 --> 04:05.200 What it does is this code inside is only triggered whenever a incoming request is made to this path. 04:06.060 --> 04:12.070 So we're basically defining the code that runs when a user asks for a home page where the path is nothing. 04:12.090 --> 04:14.470 It's just slash and what are we going to do. 04:14.700 --> 04:16.730 Well we are going to send. 04:16.830 --> 04:18.770 This is a special method from Express. 04:19.110 --> 04:23.550 Hello from our Web app and rez is coming from here. 04:23.550 --> 04:24.750 There's a lot to take in. 04:24.780 --> 04:29.870 I know rez is the response object request is the incoming request. 04:29.970 --> 04:32.860 So every route there is a callback. 04:33.480 --> 04:35.160 Just like when we were working with my ass. 04:35.150 --> 04:40.250 Q Well a callback is code that runs after something happens or at a later date. 04:40.290 --> 04:45.360 So this code only runs whenever a request is hit to slash. 04:45.360 --> 04:49.450 So eventually we'll have code where we have five or six routes different web pages. 04:49.560 --> 04:53.470 We want to run different code depending on the Web page that's being asked for. 04:53.610 --> 04:55.240 So this is how we do it. 04:55.290 --> 05:00.300 This is basically saying if a request comes in for Slash run this code we could have another one down 05:00.300 --> 05:07.420 here that says if a request comes in for a slash log out log in then do something else show the log 05:07.420 --> 05:08.170 in page. 05:08.250 --> 05:14.310 So that's the first bit then every route has a function a callback with two arguments a request and 05:14.310 --> 05:17.660 a response request again is the incoming request. 05:17.670 --> 05:23.880 So if we wanted information from the incoming request from the user which we'll be working with later 05:24.180 --> 05:31.810 when a user types their email into the form to sign onto our waitlist that information is sent to us. 05:31.830 --> 05:37.670 And so we'll need to work with the request coming from the user to this arrow that will contain the 05:37.680 --> 05:38.530 information. 05:38.670 --> 05:38.970 Hello. 05:38.970 --> 05:43.320 I'd like to add my email PLU Jima that come to your database. 05:43.470 --> 05:47.110 And so then with the request we'd be able to pull it out of there. 05:47.160 --> 05:49.450 The response is what we're sending back. 05:49.490 --> 05:51.600 It's this arrow going that way. 05:51.600 --> 05:56.100 And so that's why raise send hello from our Web site. 05:56.220 --> 06:02.400 We'll send this response of course you don't have to name it wreck in rez you could call this request 06:02.400 --> 06:06.750 in response or you could call it our one and our two apple and orange. 06:06.840 --> 06:09.020 All that matters is that you refer to it the same. 06:09.690 --> 06:14.920 And then we have this second component and this is also kind of cookie cutter. 06:15.030 --> 06:17.040 You'll have this in every app app. 06:17.100 --> 06:18.010 Listen. 06:18.390 --> 06:20.810 And all that this does is start a server. 06:20.820 --> 06:27.690 So this starts the server going we have to tell it what port which on cloud 9 will always be using 88. 06:28.260 --> 06:31.210 And then if we want we can give it a callback function. 06:31.380 --> 06:36.540 And this is just a line of code that will run once we start our server so it will just say in our terminal 06:36.690 --> 06:38.640 Hey you're listening on port 80 80. 06:38.700 --> 06:40.400 You don't have to have this. 06:40.470 --> 06:43.240 So let's go over to cloud nine. 06:43.950 --> 06:47.330 And the first thing I'm going to do is make a new file. 06:47.580 --> 06:52.370 So instead of join this new file and it's going to be app. 06:52.510 --> 06:58.570 J.S. and I'm going to just start by requiring express just like we saw 07:02.230 --> 07:09.820 then I'm going to do our app equals express which is referring to this executed as a function. 07:10.060 --> 07:11.330 So we have app there. 07:11.380 --> 07:12.590 Let's just see if it works. 07:12.640 --> 07:14.080 Nothing will happen. 07:14.110 --> 07:18.620 We may get an error if we didn't install express but we did. 07:18.640 --> 07:21.330 So everything is good then. 07:21.580 --> 07:23.990 Let's start actually at the bottom with our app. 07:24.010 --> 07:31.000 Listen when we tell it the port which is if you're not familiar with the idea of ports think of it as 07:31.180 --> 07:36.520 the entry or exit point on a computer you can have 20 50 or 100 different ports for different things 07:36.520 --> 07:38.400 going on the same time. 07:38.740 --> 07:42.910 You may have had to work with ports if you ever had to like mess with a firewall that was blocking something 07:42.910 --> 07:44.070 you didn't want it to block. 07:44.140 --> 07:48.900 Or if you work at an office where they don't know they don't allow you to go to certain Web sites that's 07:48.910 --> 07:52.020 running on a certain port anyways. 07:52.030 --> 07:53.400 Aptos and ADHD. 07:53.620 --> 07:55.870 And we could just leave it at that like this. 07:56.200 --> 08:02.360 But if we do that and I started up notice my cursor has gone to the same thing that happened with the 08:02.370 --> 08:06.940 minuscule connection when we didn't and the connection it just hanging. 08:06.940 --> 08:13.390 And then because I started this server it's listening and port 80 80 to see any incoming requests but 08:13.540 --> 08:14.820 we're not doing anything. 08:15.190 --> 08:20.550 And it's also just not very you know it's not a great experience to just see a blank cursor there. 08:20.590 --> 08:30.760 So we can just add this blank callback and do we'll just cancel that log server running on ADHD and 08:30.760 --> 08:33.410 it's just a nice message for us developers to see. 08:33.410 --> 08:38.830 So now if I do it you can see of course that we get onto that log server running on ADHD. 08:39.130 --> 08:44.520 And that's just because this code runs whatever we put in here will run only once that server starts. 08:44.530 --> 08:45.670 So that's the first thing. 08:45.670 --> 08:51.100 But now we have the task of actually writing the code so we have our server it's going but we can't 08:51.100 --> 08:52.180 actually reach it. 08:52.240 --> 08:53.800 We can't do anything with it. 08:53.830 --> 08:56.070 I don't have anything to respond with. 08:56.200 --> 09:00.880 So actually what I just said is kind of like we we can reach it we could request it but nothing would 09:00.880 --> 09:01.950 ever come back. 09:03.160 --> 09:09.220 And actually if I try and preview it right now so to do that you can click on Preview preview running 09:09.220 --> 09:10.330 application. 09:10.480 --> 09:15.950 This is hitting this server but we're not getting any response. 09:17.610 --> 09:19.690 So I'm going to just leave it here for now. 09:19.740 --> 09:21.480 We'll come back to that. 09:21.510 --> 09:22.830 We'll know that our app is working. 09:22.830 --> 09:28.900 If we get a response here to do that we just have to do our app get. 09:29.250 --> 09:38.160 And then you are the path which is slash function request response and then in here we put some code 09:38.820 --> 09:48.560 so we could start with just a constant log someone requested us just like that. 09:48.690 --> 09:49.750 What do you think will happen. 09:49.890 --> 09:53.590 First thing you have to do is restart the server any time you change this code in here. 09:53.610 --> 09:55.200 The server was already running. 09:55.200 --> 09:56.980 We need to save the file and restart. 09:57.270 --> 10:02.680 But now if I try and request slash so I'll just hit enter here. 10:02.730 --> 10:07.300 Notice what happens says someone requested us because this code ran. 10:07.530 --> 10:09.970 But over here we still don't see anything. 10:10.020 --> 10:14.080 So cancel that log is only printing to the console here the terminal. 10:14.100 --> 10:22.890 So now I'm going to do is open a new tab and put this in that tab so that we have our app and then our 10:23.040 --> 10:27.130 terminal down here and I'm going to close this one just to make more space. 10:27.130 --> 10:28.430 It's the same thing. 10:28.440 --> 10:33.900 Notice though every time I hit enter I get someone requested us but if I tried to go to slash log out 10:33.900 --> 10:39.960 or something that doesn't exist I don't get someone recourses because that this code is only happening 10:39.960 --> 10:43.190 is only firing off when requesting slash. 10:43.440 --> 10:47.990 And you might be wondering about the get part if you're not familiar with HTP requests. 10:48.030 --> 10:52.580 There's a couple of different types different verbs get in post or what we'll be working with. 10:52.650 --> 10:54.010 I get requests though. 10:54.030 --> 10:59.230 Think of it as just asking to see information you're not sending any data with it. 10:59.250 --> 11:04.800 So when we are asking for our home page of join us we're just trying to see information to get request 11:05.250 --> 11:10.370 but when we are trying to join we are sending an email and that is going to be a post request. 11:10.380 --> 11:11.600 We'll get there in a little bit. 11:11.760 --> 11:14.000 I know it's a lot of stuff and overwhelming. 11:14.040 --> 11:19.860 If you've never done web development so hopefully you understand this is not a webdav course but there 11:19.860 --> 11:24.600 are some great went out there and I highly recommend if you're curious and you are enjoying this part 11:24.810 --> 11:26.680 that you continue down that path. 11:27.110 --> 11:28.250 Okay enough of that. 11:28.380 --> 11:34.350 So rather than just cancel that log there's this other thing we can do which is response send. 11:34.590 --> 11:42.190 And then we can put any string in here like you've reached the home page. 11:42.380 --> 11:43.700 I'm sorry about that siren. 11:43.740 --> 11:46.150 It's like 100 degrees in San Francisco today. 11:46.340 --> 11:48.210 Well it's a lie it's 90 degrees. 11:48.270 --> 11:50.030 I have to have the window open. 11:50.820 --> 11:51.800 OK. 11:52.200 --> 11:53.360 It's not too bad. 11:53.430 --> 11:56.460 Now we need to restart the server. 11:56.670 --> 11:59.570 This time we now have some different code. 11:59.580 --> 12:06.810 Same thing if we hit slash on this app that is running on ADHD which in Cloud Nine This is where you 12:06.810 --> 12:08.440 are and yours will be different. 12:08.460 --> 12:13.320 You have a unique you are all you need to access but this is where your app will be running just like 12:13.320 --> 12:17.280 when we first installed node and I showed you that chat app into same idea. 12:17.280 --> 12:21.230 This is where your app runs by default. 12:21.330 --> 12:28.120 So now all we need to do is hit that page but we need to ask for Slash rather than slash log out. 12:28.470 --> 12:35.660 If I do Suslov yet again I get nothing if I just do slash or nothing. 12:35.670 --> 12:36.490 We get our message. 12:36.510 --> 12:40.210 You've reached the home page and that is our most basic web app. 12:40.260 --> 12:44.020 Of course you could change this text something that people ask a lot. 12:44.040 --> 12:46.820 Second you have to register that sense and the answer is No. 12:46.860 --> 12:50.580 You can only have one every route is going to respond with one thing. 12:50.880 --> 12:56.460 But the real answer is that you're usually not going to use red and you'll instead be responding with 12:56.460 --> 12:57.410 files. 12:57.450 --> 13:05.320 So we'll have a file of h t m l to respond with our nice formatted page with style and fonts and colors. 13:05.370 --> 13:08.300 For now this is a very basics so I'll stop here. 13:08.310 --> 13:12.630 You can feel free to move on to the next video where we add more routes but at the very end I'll take 13:12.630 --> 13:18.390 some time to review if anyone is curious or anyone feels like you need more review of how this works. 13:18.390 --> 13:23.580 So we started by requiring Express which is the library of that framework we installed. 13:23.580 --> 13:26.140 Then we execute it and saved into to her app variable. 13:26.400 --> 13:28.640 And really there's a lot of magic happening. 13:28.680 --> 13:30.010 That's what a framework does. 13:30.090 --> 13:32.270 It takes care of stuff in the background. 13:32.470 --> 13:38.600 But now what we've done is first things first we started up our server app doubtless in 1880. 13:38.790 --> 13:42.350 And every time we do that our server starts running. 13:42.570 --> 13:48.060 And basically that is this block right here represented by this block. 13:48.060 --> 13:53.850 And I'm just sitting here listening to patient server nobody you might talk to it for years or maybe 13:53.850 --> 13:56.540 ever but as soon as someone sends a request. 13:56.730 --> 14:03.190 And in our case the request goes to this URL node in my ask you will learn with code does the nine users 14:03.190 --> 14:04.800 that I know yours will be different. 14:04.950 --> 14:10.330 But this is where I make a request to and that corresponds to our server we started down here. 14:10.560 --> 14:16.140 So there's an invisible connection here that's kind of taken care of for us by Cloud 9 or by any computer 14:17.010 --> 14:21.240 although you're you're you are I would be different if you weren't using cloud 9 of course. 14:21.420 --> 14:27.960 But whenever we're running here our server that's waiting and listening for requests coming in then 14:28.590 --> 14:34.820 we write code that differentiates between something like log out to log in. 14:35.430 --> 14:38.560 We don't have any code expecting log in. 14:38.580 --> 14:41.730 So that's why we get an error it says cannot get by you and I don't. 14:41.730 --> 14:45.420 It's basically our server saying I don't know what you're talking about. 14:45.420 --> 14:48.620 All that our app knows about is slash. 14:48.720 --> 14:51.290 That's the only thing that will respond with Oh I know that. 14:51.300 --> 14:52.560 Let me give you that. 14:52.590 --> 14:54.260 You've reached the home page. 14:54.280 --> 14:59.420 Otherwise we get cannot get whatever we do. 14:59.790 --> 15:08.950 But we do have this one case where it works the home page and again the typical terminology for this 15:09.430 --> 15:16.500 is the route route the home route empty route basically slash so apt get slash. 15:16.630 --> 15:21.760 This code runs and all this code does is it responds with you've read the home page. 15:21.790 --> 15:27.280 One thing that's interesting to take a look at there's a lot here but if I do a contact log request 15:28.630 --> 15:35.380 this will contain all the information from the incoming request from this arrow. 15:35.590 --> 15:37.120 There's going to be a lot of stuff in there. 15:37.450 --> 15:47.080 So if we take a look try it again and I make a request I'll refresh it by clicking over here. 15:47.350 --> 15:49.540 We got printed out this giant thing. 15:49.540 --> 15:53.350 This is all the information contained in that request. 15:53.440 --> 15:57.570 So all of this is put together by Express it's handled for us. 15:57.580 --> 16:00.030 Let's see if there's anything interesting to take a look at. 16:00.280 --> 16:05.740 Basically I can't find anything terribly interesting or that would be very useful without me having 16:05.740 --> 16:07.270 to explain a ton of other stuff. 16:07.360 --> 16:09.920 But this contains all the information it really. 16:09.930 --> 16:12.430 You only get one or two things usually that you care about. 16:12.430 --> 16:16.350 And here this is all behind the scenes stuff that it works with. 16:16.360 --> 16:21.730 With that said when we make our request that is sending our e-mail when we type it into a form and hit 16:21.730 --> 16:27.220 submit that e-mail will be contained in a request somewhere and we'll need to pull it out which we'll 16:27.220 --> 16:28.810 get there at some point. 16:28.810 --> 16:29.740 All right. 16:29.740 --> 16:33.040 Next up we're continuing on this but we're going to add a couple other routes.