1
00:00:00,920 --> 00:00:06,300
In the last section we generated our express project and we spoke a little bit about exactly how traffic

2
00:00:06,300 --> 00:00:11,850
is wrapped around inside of an express application in this section we're going to add our first little

3
00:00:11,850 --> 00:00:17,710
route handler to express and we'll talk a little bit more about how Express is internally organized.

4
00:00:18,270 --> 00:00:22,470
So going to change back to my code editor or see me to my terminal to start I'm going to make sure that

5
00:00:22,470 --> 00:00:27,150
I'm inside of my server directory and then I'm going to start up my code editor inside of here.

6
00:00:27,210 --> 00:00:32,180
Now note that I use the atom code editor and that's why I am able to run the command.

7
00:00:32,220 --> 00:00:37,080
Adam datt if you do not have Adam installed on your system you will not be able to run this command

8
00:00:37,140 --> 00:00:40,910
and you'll have to start up whatever code editor you like to use yourself.

9
00:00:41,560 --> 00:00:41,880
OK.

10
00:00:41,940 --> 00:00:51,480
So I now have my code editor open inside of my server directory inside of here.

11
00:00:51,480 --> 00:00:55,570
You'll find the package doc some file that we generated previously.

12
00:00:55,770 --> 00:01:01,200
If we open that up we'll see the list of dependencies that we currently have installed into our project.

13
00:01:01,200 --> 00:01:05,620
Right now we only have express inside of the node modules directory.

14
00:01:05,820 --> 00:01:10,680
Is the Express dependency and everything that express itself depends upon.

15
00:01:10,890 --> 00:01:16,260
And so as you look at this list of folders these are all dependencies that the Express library itself

16
00:01:16,320 --> 00:01:18,380
depends upon to run correctly.

17
00:01:18,480 --> 00:01:24,610
So Express is one of many things that we're going to be using throughout this project inside of this

18
00:01:24,610 --> 00:01:25,020
structure.

19
00:01:25,030 --> 00:01:28,850
You'll also notice a package dash Lockart based on file.

20
00:01:28,860 --> 00:01:30,530
Now you're only going to see the file right here.

21
00:01:30,540 --> 00:01:37,500
If you are using at least NPM version 5 and as a reminder I really would like to use NPM version 5 throughout

22
00:01:37,500 --> 00:01:42,250
this course because we are really going to be depending upon some features that are provided by it.

23
00:01:42,320 --> 00:01:42,910
OK.

24
00:01:43,410 --> 00:01:50,430
So that's enough to start to create our first express server and create a new route handler.

25
00:01:50,490 --> 00:01:56,890
We're going to make a new file inside of our server a directory called index G-S.

26
00:01:57,030 --> 00:02:03,290
By convention we usually call the root file or kind of the start up file inside of a node project index

27
00:02:03,400 --> 00:02:04,510
j us.

28
00:02:04,590 --> 00:02:10,590
Now you can certainly find other projects that use different root file names maybe start ups or web

29
00:02:10,620 --> 00:02:11,970
japes whatever it needs to be.

30
00:02:11,970 --> 00:02:15,580
But for us we're going to be going with convention which is to use index.

31
00:02:15,650 --> 00:02:23,010
J.S. then inside of here we are going to create a brand new Express application and then add some logic

32
00:02:23,310 --> 00:02:25,500
to create our first route handler.

33
00:02:26,190 --> 00:02:32,610
At the very top of this file we are first going to import in the Express library by writing the command

34
00:02:33,120 --> 00:02:39,870
Konst app or excuse me Konst express equals require Express.

35
00:02:40,430 --> 00:02:45,130
Now a little bit of a talk about javascript modules throughout the course you'll most right here do

36
00:02:45,130 --> 00:02:51,020
I use the required keyword to get access to the Express library in this course.

37
00:02:51,020 --> 00:02:56,360
We're going to be using what is referred to as common japes modules on the server side.

38
00:02:56,550 --> 00:03:03,880
Because at present the node J.S. runtime only has support for common J.S. modules.

39
00:03:04,320 --> 00:03:11,520
When I say common just modules this is a system implemented in no Jey us for requiring or sharing code

40
00:03:11,520 --> 00:03:13,410
between different files.

41
00:03:13,410 --> 00:03:18,060
Now the reason that I specifically mentioned common J.S. Right now is that you might have previously

42
00:03:18,060 --> 00:03:23,610
gone through other courses or other content or even your own applications where you use a different

43
00:03:23,610 --> 00:03:34,230
import syntax that looks like import express from Express like Lysa hoops to us as we go this import

44
00:03:34,230 --> 00:03:35,210
syntax right here.

45
00:03:35,250 --> 00:03:38,080
Makes use of a different module system called.

46
00:03:38,130 --> 00:03:40,340
Yes 20:15 modules.

47
00:03:40,680 --> 00:03:48,170
No genius does not have support for as 20:15 modules at the time of which I created this course.

48
00:03:48,180 --> 00:03:52,290
Now there are some work arounds for getting around that but at the end of the day those work arounds

49
00:03:52,290 --> 00:03:57,510
just makes the setup and development of our project a little bit more challenging.

50
00:03:57,510 --> 00:04:02,140
So on the server side of our application we're going to use common G-S modules.

51
00:04:02,250 --> 00:04:08,730
But on the front end like on the re-act side of our application we get much easier access to yes 20:15

52
00:04:08,730 --> 00:04:09,630
modules.

53
00:04:09,630 --> 00:04:14,100
So on the re-act side of things we will be using the import syntax.

54
00:04:14,100 --> 00:04:14,550
OK.

55
00:04:14,850 --> 00:04:17,760
So sorry for that digression but that's always a very Come question.

56
00:04:17,760 --> 00:04:21,610
You know why are we using require here so I just want to cure that very quickly.

57
00:04:22,080 --> 00:04:28,290
Now that we've imported or required in the Express library we will use it to create our first express

58
00:04:28,350 --> 00:04:38,400
application by writing Konst app equals express like lifeso inside of a single node yes project or a

59
00:04:38,400 --> 00:04:39,660
single project.

60
00:04:39,780 --> 00:04:46,410
We might have several different express applications and so by calling express like a function it generates

61
00:04:46,470 --> 00:04:54,670
a new application that represents a running express app through this course we're only going to using

62
00:04:54,700 --> 00:04:55,760
a single app.

63
00:04:55,790 --> 00:05:00,940
Now we definitely feel comfortable saying that the absolute vast majority of projects that you'll probably

64
00:05:00,940 --> 00:05:05,130
ever work on are going to use a single application inside of them.

65
00:05:05,350 --> 00:05:12,190
This app object right here is used to set up configuration that will listen for incoming requests that

66
00:05:12,190 --> 00:05:17,230
are being routed to the Express side of the out from the node side and then route those requests on

67
00:05:17,230 --> 00:05:19,080
two different route handlers.

68
00:05:19,120 --> 00:05:24,790
So all of these different route handlers that we're going to be creating over time will be all associated

69
00:05:24,790 --> 00:05:28,820
or somehow registered with this app object right here.

70
00:05:30,360 --> 00:05:33,460
Now just two more little lines of code that I want to write.

71
00:05:33,510 --> 00:05:38,690
We're going to write down the next line of code that is going to create a route handler and associated

72
00:05:38,760 --> 00:05:39,870
with a given route.

73
00:05:39,870 --> 00:05:43,080
So let's write the code out and we'll talk about what's going on with it.

74
00:05:43,110 --> 00:05:50,520
I'm going to say app dot get I'm going to give a first argument of a forward slash and then a second

75
00:05:50,580 --> 00:05:57,270
argument of an arrow function like so this arrow function is going to have two arguments which really

76
00:05:57,270 --> 00:06:04,710
receive with the names of Rec. and rows and then finally inside of the arrow function body I'm going

77
00:06:04,710 --> 00:06:11,740
to add the line rez dots and will pass to it an object that says chi colon.

78
00:06:11,840 --> 00:06:13,800
They're like so.

79
00:06:14,300 --> 00:06:14,570
OK.

80
00:06:14,610 --> 00:06:18,440
So this is our first taste of a route handler with Express.

81
00:06:18,450 --> 00:06:22,560
Now there's a lot of stuff that is going on with this line of code right here.

82
00:06:22,560 --> 00:06:28,920
Before we do a full explanation of what's going on I want to add one last line of code and then execute

83
00:06:28,920 --> 00:06:29,730
this project.

84
00:06:29,760 --> 00:06:34,410
We're going to test it out and see if it works or not and then we'll do a full discussion about everything

85
00:06:34,410 --> 00:06:35,580
we've added.

86
00:06:35,580 --> 00:06:38,010
So one last line of code I'm going to say app.

87
00:06:38,070 --> 00:06:43,800
Listen and then pass in 5000 like so OK.

88
00:06:43,820 --> 00:06:46,360
So again we're going to come back and talk about what's going on right here.

89
00:06:46,490 --> 00:06:50,720
But right now I want to run this project and figure out exactly what's going on.

90
00:06:50,740 --> 00:06:54,410
Or excuse me I want to run it and test it out.

91
00:06:54,470 --> 00:06:59,810
So going to change back over to my terminal and then once over here I'm going to run the command node

92
00:07:00,410 --> 00:07:08,450
index Geass like so now it will appear that things just kind of hang right now and that's OK that's

93
00:07:08,450 --> 00:07:09,990
exactly what we want.

94
00:07:10,070 --> 00:07:11,610
I'm going to let that just sit.

95
00:07:11,870 --> 00:07:20,170
I'm going to change over to my browser and I'm going to access local host colon 5000 I'm going to copy

96
00:07:20,190 --> 00:07:26,880
this link for you over to my code editor local localhost Colan 5000.

97
00:07:26,880 --> 00:07:27,180
OK.

98
00:07:27,210 --> 00:07:33,480
So now when we go back over to our browser we're going to see a little message that says Hi there.

99
00:07:33,480 --> 00:07:37,610
Now as what you see in your browser might be just a little bit different.

100
00:07:37,610 --> 00:07:40,170
I'll tell you right now you might just see some plain text.

101
00:07:40,220 --> 00:07:45,270
I have a chrome out on that formats this data right here which we refer to as Jason.

102
00:07:45,290 --> 00:07:47,310
A little bit more nicely.

103
00:07:47,340 --> 00:07:53,630
So OK we put it together some express application we ran it at the terminal and then it looks like we

104
00:07:53,630 --> 00:07:58,750
somehow got some message communicated to us from this code that we wrote like you know right here is

105
00:07:58,760 --> 00:08:01,360
high there but hey what's going on right here.

106
00:08:01,360 --> 00:08:03,190
All right like what does all this stuff doing.

107
00:08:03,430 --> 00:08:04,490
So let's take a quick break.

108
00:08:04,490 --> 00:08:08,930
When we come back we'll talk about exactly what is going on with all this logic right here.

109
00:08:08,970 --> 00:08:10,900
So I'll see you in just a second.