1 00:00:00,690 --> 00:00:05,800 In the last section we spoke at a very high level about the architecture of our application in this 2 00:00:05,800 --> 00:00:06,290 section. 3 00:00:06,310 --> 00:00:12,160 We're going to start off by generating a brand new node project we're going to install express into 4 00:00:12,160 --> 00:00:17,500 it and then we'll talk a little bit about the differences between Express and node inside of our project. 5 00:00:17,740 --> 00:00:18,650 So let's get to it. 6 00:00:18,670 --> 00:00:21,970 Let's generate our project and install express inside of it. 7 00:00:22,270 --> 00:00:24,640 I'm going to change on over to my command line. 8 00:00:24,640 --> 00:00:28,480 I'm going to make sure that I'm inside of a directory that is appropriate for housing this brand new 9 00:00:28,480 --> 00:00:29,360 project. 10 00:00:29,370 --> 00:00:34,390 So on your local machine you might have like a workspace directory or a project's directory just some 11 00:00:34,390 --> 00:00:40,890 location where you can put some new code inside if you're going to create a new directory called server. 12 00:00:41,320 --> 00:00:46,780 I'm going to change into that directory and then I'm going to use the NPM command line tool to generate 13 00:00:46,840 --> 00:00:48,570 a brand new project. 14 00:00:48,850 --> 00:00:55,120 So I'm going to run the command and PM in it like so after running that command. 15 00:00:55,380 --> 00:00:58,350 I'm going to get asked a couple of different questions here. 16 00:00:58,420 --> 00:01:01,650 For right now we don't really care about the responses to any of these. 17 00:01:01,740 --> 00:01:09,160 So I'm just going to use the default values by hitting enter enter enter enter and Silom get by running 18 00:01:09,160 --> 00:01:15,700 that NPM and command we generated a package not Jason File which is used as kind of like the central 19 00:01:15,700 --> 00:01:21,220 hub of our project and is going to be used to define a lot of the different dependencies that our project 20 00:01:21,220 --> 00:01:22,970 is going to depend upon. 21 00:01:23,140 --> 00:01:26,620 The first dependency that we're going to install is express. 22 00:01:26,890 --> 00:01:35,080 We will install and suppress excuse me express by running the command NPM install dash dash save express 23 00:01:35,290 --> 00:01:36,610 like so. 24 00:01:36,610 --> 00:01:41,870 Now this should only take a second or two to install after installing express. 25 00:01:42,010 --> 00:01:49,600 I can then look into my package not just on file and I will see Express reflected in there underneath 26 00:01:49,600 --> 00:01:51,370 the dependency section. 27 00:01:51,490 --> 00:01:52,370 Now just really quick. 28 00:01:52,390 --> 00:01:54,450 Notice I use the cat command right here. 29 00:01:54,460 --> 00:01:59,570 This is only available on Mac OS and Linux based systems is not available on Windows. 30 00:01:59,590 --> 00:02:03,850 So if you run cat package out Jason you might see a little error. 31 00:02:03,850 --> 00:02:07,660 Now this is probably the only time I'm going to ever use a platform specific command. 32 00:02:07,670 --> 00:02:11,880 So if your are are on Windows don't worry we're not going to do anything like this in the future. 33 00:02:12,170 --> 00:02:14,300 OK so clearly Express's now installed. 34 00:02:14,350 --> 00:02:16,710 If you have a newer version that is totally fine. 35 00:02:16,750 --> 00:02:17,510 Absolutely. 36 00:02:17,510 --> 00:02:23,000 OK so we've now generated our project and install express inside of it. 37 00:02:23,170 --> 00:02:28,630 But I still want to talk a little bit about what the differences between Express and node and how we're 38 00:02:28,630 --> 00:02:31,460 going to be using each of them inside of our application. 39 00:02:32,020 --> 00:02:38,560 So the first thing I want to do is give you a very plain English definition of node in a plain english 40 00:02:38,650 --> 00:02:42,120 definition of javascript and then we're going to look at a different diagram. 41 00:02:42,130 --> 00:02:45,420 That's going to communicate how the two of them work together. 42 00:02:45,440 --> 00:02:49,550 So first off note this is a javascript runtime. 43 00:02:49,600 --> 00:02:53,650 It is used to execute code outside the browser. 44 00:02:53,650 --> 00:02:59,590 Traditionally javascript code has always been executed inside of some web browser because that's where 45 00:02:59,590 --> 00:03:01,730 javascript first got its start. 46 00:03:01,840 --> 00:03:07,540 It was used to execute code inside the browser on Web sites to give them a little bit of a sense of 47 00:03:07,630 --> 00:03:11,410 interactivity or make them feel just a little bit more dynamic. 48 00:03:11,500 --> 00:03:17,800 Over time people realized that they wanted to use javascript in other locations as in outside the browser 49 00:03:18,550 --> 00:03:21,220 and that is the source of the no JSA project. 50 00:03:21,220 --> 00:03:26,140 So node is used simply to execute code outside the browser. 51 00:03:26,140 --> 00:03:32,850 In other words in some arbitrary environment like on my laptop or on your desktop or any other location 52 00:03:32,850 --> 00:03:41,830 you can think of now express on the other hand is a library that is using the node J.S. runtime. 53 00:03:41,850 --> 00:03:44,240 So Express is not a standalone thing. 54 00:03:44,490 --> 00:03:50,850 You can imagine express as being a little collection of functions or helpers for making working with 55 00:03:50,850 --> 00:03:55,610 the HTP aspects of no just a little bit easier. 56 00:03:55,680 --> 00:04:01,080 So Express is really not its own standalone code base per se or its own runtime. 57 00:04:01,080 --> 00:04:07,980 It is a library that has a collection of helper methods to make writing servers just a little bit easier. 58 00:04:08,190 --> 00:04:15,390 Everything that you find inside of this express library we could in theory implement from scratch using 59 00:04:15,390 --> 00:04:22,530 just node like just writing plain javascript and using some code that is included with no G-S so Express 60 00:04:22,620 --> 00:04:27,770 is just a helper thing and its something that just makes our lives a little bit easier. 61 00:04:28,170 --> 00:04:32,930 OK so that's notan Express and that's really important to understand the difference between the two. 62 00:04:32,930 --> 00:04:36,450 Because the next diagram that we're going to look at is going to be a little bit crazy. 63 00:04:36,980 --> 00:04:43,150 OK so this is kind of getting a little bit more towards the caliber of diagrams in this course. 64 00:04:43,150 --> 00:04:46,000 I would say we're going to have some pretty crazy diagrams but don't worry. 65 00:04:46,080 --> 00:04:49,850 And do my best to always explain exactly what is going on with each of them. 66 00:04:50,290 --> 00:04:52,780 OK so let's go through it again. 67 00:04:53,210 --> 00:04:56,200 Let's go through this diagram and we're going to be talking about some of. 68 00:04:56,210 --> 00:04:59,460 What Express does in some of what node does. 69 00:04:59,490 --> 00:05:06,210 So the first thing to understand is that when you are running some server on your local machine your 70 00:05:06,210 --> 00:05:13,510 server is going to be listening for h t t h TTP traffic on a single individual port. 71 00:05:13,710 --> 00:05:20,760 You can think of a port as being like a little door through which traffic like HTP request can be routed. 72 00:05:20,760 --> 00:05:27,690 So we might have some incoming request being issued by say our browser also running on our local machine 73 00:05:28,160 --> 00:05:33,570 and it might make a request Ricksen me that request might be coming in to some very specific port on 74 00:05:33,570 --> 00:05:35,010 our machine. 75 00:05:35,010 --> 00:05:41,400 We are going to configure node and express to listen to traffic that is attempting to access a very 76 00:05:41,400 --> 00:05:44,220 specific port on our local machine. 77 00:05:44,220 --> 00:05:50,310 Now no G-S specifically is going to do what is listening for traffic on that port and waits for some 78 00:05:50,430 --> 00:05:52,750 information to flow in through it. 79 00:05:52,750 --> 00:05:58,740 No it isn't going to take that information that flows in from this incoming HDTV request and handed 80 00:05:58,740 --> 00:06:01,600 off to the Express side of our application. 81 00:06:01,860 --> 00:06:04,630 So remember we can do everything with mode. 82 00:06:04,650 --> 00:06:10,410 We don't need express notice the real core aspect of what's going on here and it is what actually handles 83 00:06:10,500 --> 00:06:14,040 all the underlying HTP traffic. 84 00:06:14,040 --> 00:06:18,310 However we want to use Express because it just makes our lives a little bit easier. 85 00:06:18,720 --> 00:06:20,960 So no it is going to take this incoming traffic. 86 00:06:21,090 --> 00:06:27,090 It's going to hand it off to express express is then going to look at the request and it's going to 87 00:06:27,090 --> 00:06:33,780 decide what little bit of logic inside of the Express application that we're building is going to handle 88 00:06:33,930 --> 00:06:40,950 or somehow respond to this incoming request and express we write collections of what are called route 89 00:06:40,970 --> 00:06:48,480 handlers route handlers are used to handle requests that are asking for a very specific service. 90 00:06:48,810 --> 00:06:54,120 So we might have one handler that is responsible for authenticating and user. 91 00:06:54,330 --> 00:06:59,730 We might have another handler that is responsible for logging out a user and we might have a third one 92 00:07:00,060 --> 00:07:06,030 that allows a user to create and save a new survey or a new campaign. 93 00:07:07,020 --> 00:07:12,210 So again note is going to take the incoming traffic routed to express express we'll then figure out 94 00:07:12,450 --> 00:07:19,110 where to send that incoming request to you and I are going to route the right to the route handlers 95 00:07:19,200 --> 00:07:24,530 that will process the incoming request and generate some outgoing response. 96 00:07:24,530 --> 00:07:31,050 Their response right here will then be sent back to running node process and notable then respond to 97 00:07:31,050 --> 00:07:37,320 the incoming request with this response that we author and so eventually this object what we refer to 98 00:07:37,320 --> 00:07:43,980 as rez which is short for response will be sent back to whoever made that incoming HTP request. 99 00:07:44,060 --> 00:07:51,180 OK so that's kind of Noten express in a nutshell again the takeaways are that the underlying node runtime 100 00:07:51,210 --> 00:07:56,030 is listening to this traffic on some very specific port when some traffic comes in. 101 00:07:56,070 --> 00:07:58,930 It is then routed to the Express side of our application. 102 00:07:59,040 --> 00:08:04,440 You and I are going to route some amount of logic that handles incoming requests and formulates and 103 00:08:04,440 --> 00:08:09,060 sends out a response that gets routed back to whoever made the original request. 104 00:08:09,070 --> 00:08:11,690 OK so that's great. 105 00:08:11,760 --> 00:08:12,980 That's enough right now. 106 00:08:12,990 --> 00:08:18,420 Let's take a break and then the next section will talk a little bit about exactly how these route handlers 107 00:08:18,420 --> 00:08:20,870 are created inside of an express application. 108 00:08:21,000 --> 00:08:23,540 And we're also right our first raw handler. 109 00:08:23,640 --> 00:08:25,200 So I'll see you in just a second.