1
00:00:02,260 --> 00:00:08,240
So let's get started with Express.js now that we installed it and to get started in the app.js

2
00:00:08,240 --> 00:00:08,730
file

3
00:00:08,740 --> 00:00:15,340
we simply start by importing it with that Node.js import syntax where we require Express and then

4
00:00:15,340 --> 00:00:21,580
store the imported package or the content of the package, the objects and functions exposed by the package

5
00:00:21,580 --> 00:00:25,930
in this constant here which you can of course name however you want.

6
00:00:25,930 --> 00:00:30,610
Now Express or what you actually get in there is is a function,

7
00:00:30,610 --> 00:00:37,450
so what you can actually do here is you can simply create an app by calling Express like that, like a

8
00:00:37,450 --> 00:00:38,600
function.

9
00:00:38,680 --> 00:00:45,820
This gives you such an app object which in the end is an object with a lot of features and functions provided

10
00:00:45,820 --> 00:00:51,160
by Express, so you set up Express by calling it like this and then it gives you access to all its cool

11
00:00:51,160 --> 00:00:53,110
features on this app object

12
00:00:53,110 --> 00:00:58,690
you could say and one thing you can do on this app object is you can call listen again

13
00:00:58,690 --> 00:01:04,660
and this of course might look familiar because we called listen on our pure Node implementation as well

14
00:01:04,750 --> 00:01:10,490
on the server. Now Express and the app object therefore sets up the server for us behind the scenes

15
00:01:10,490 --> 00:01:11,470
and that's really important,

16
00:01:11,470 --> 00:01:13,270
Express is simply a Node.js

17
00:01:13,280 --> 00:01:17,260
framework, it does kind of the same thing we did here,

18
00:01:17,260 --> 00:01:24,580
it calls create server for us but it does so behind the scenes and then exposes this server on this

19
00:01:24,640 --> 00:01:28,970
app object together with a couple of other functionalities.

20
00:01:28,990 --> 00:01:35,200
So with that alone, we would have a running Node.js server powered by Node and Express but this alone

21
00:01:35,200 --> 00:01:36,590
wouldn't do much.

22
00:01:36,610 --> 00:01:43,090
Now what we also typically want to do is we want to act on certain incoming requests and for that, it's

23
00:01:43,090 --> 00:01:46,450
important to understand how Express.js works.

24
00:01:46,450 --> 00:01:49,010
It's a middleware-driven framework,

25
00:01:49,060 --> 00:01:51,870
now that sounds very fancy, what does it mean?

26
00:01:51,880 --> 00:01:58,120
It means that in the end Express is all about funneling the incoming request through a bunch of different

27
00:01:58,180 --> 00:02:03,070
functions which all received the request and all can do something with it

28
00:02:03,220 --> 00:02:09,370
and each function can either stop the request and send back a response, at which point the request will

29
00:02:09,370 --> 00:02:11,430
not reach any other function thereafter,

30
00:02:11,440 --> 00:02:18,520
any other middleware or a function forwards the request to the next function, to the next middleware

31
00:02:18,520 --> 00:02:24,400
in line. So a middleware is really just a function that gets the request and then can do something with

32
00:02:24,400 --> 00:02:24,790
it.

33
00:02:24,790 --> 00:02:26,410
Now let me show you what I mean,

34
00:02:26,530 --> 00:02:32,560
we can register such a middleware by using the user method on the app object and the use method takes

35
00:02:32,560 --> 00:02:34,240
a function as an argument.

36
00:02:34,240 --> 00:02:39,520
This is a function which Express will execute for us and it is a function which will get the request

37
00:02:39,550 --> 00:02:46,570
object and the response object and also an additional next thing, a next argument to which I'll come

38
00:02:46,570 --> 00:02:48,320
back in a second.

39
00:02:48,430 --> 00:02:55,270
Now what we got here is basically the same request or a similar request as we got it here in the function

40
00:02:55,270 --> 00:03:02,050
we passed to create server but enriched with some extra functionality, the same for the response. We get

41
00:03:02,050 --> 00:03:07,960
this response object so that we can work on the response we want to send back and also that when we're

42
00:03:07,960 --> 00:03:10,630
done, we can send back a response.

43
00:03:10,630 --> 00:03:17,080
So what we could do here is for example we could set a header on the response, let's say we want to set

44
00:03:17,080 --> 00:03:22,520
the content type and we can do that in the same way we did it before in the pure Node.js example and

45
00:03:22,720 --> 00:03:25,030
we set this to text.html.

46
00:03:25,180 --> 00:03:31,210
Now that might be all we want to do in this middleware for whatever reason, then we can add a new middleware

47
00:03:31,570 --> 00:03:34,200
simply thereafter and the order does matter,

48
00:03:34,210 --> 00:03:38,200
this will execute first, then the request will reach this middleware,

49
00:03:38,200 --> 00:03:44,350
so here we again pass in a function where we get the request, the response and this next thing and in

50
00:03:44,350 --> 00:03:49,840
here we could then decide that we're done setting up the response and getting data out of the request

51
00:03:49,840 --> 00:03:54,060
maybe and we want to send the response to the client,

52
00:03:54,100 --> 00:04:00,400
we can do this with a special send method which is new which was added by Express.js which does not

53
00:04:00,400 --> 00:04:02,600
exist in pure Node.js

54
00:04:02,680 --> 00:04:07,360
and there we could send our h1 tag where we say hello world,

55
00:04:07,360 --> 00:04:10,850
just like this for example to have a very simple response.

56
00:04:11,050 --> 00:04:14,040
So we'll send back this string as our response data,

57
00:04:14,110 --> 00:04:19,090
we set the header on the response before and this will be carried over into this function,

58
00:04:19,150 --> 00:04:23,880
so the different middlewares all work with the same request and the same response object

59
00:04:23,890 --> 00:04:29,880
so to say, so what you set up here on the response also is applied to this response

60
00:04:29,890 --> 00:04:32,580
but then here I send the response.

61
00:04:32,590 --> 00:04:33,920
Now with that we get two middleware

62
00:04:33,910 --> 00:04:39,640
so now the only missing piece is we need to tell Express.js that from this middleware, we don't want

63
00:04:39,640 --> 00:04:41,100
to stop the request,

64
00:04:41,110 --> 00:04:44,530
we also don't want to send a response yet,

65
00:04:44,530 --> 00:04:51,460
instead we want to forward the request after working on its response to the next middleware in line

66
00:04:51,730 --> 00:04:55,060
and that's what we do with this next argument.

67
00:04:55,060 --> 00:04:59,690
This actually is a function we can execute like this and all next

68
00:04:59,800 --> 00:05:03,860
does is it tells Express.js that we're not done yet,

69
00:05:03,920 --> 00:05:09,200
that instead it should move on to the next middleware in line and call that with the request, with

70
00:05:09,200 --> 00:05:10,010
the response

71
00:05:10,100 --> 00:05:15,890
and also again with next which we don't call in the second middleware though because we're done with

72
00:05:15,890 --> 00:05:21,650
the response and the request here. We send back a response so we don't want to handle the request in

73
00:05:21,710 --> 00:05:25,460
any other middleware thereafter because we already send the response,

74
00:05:25,460 --> 00:05:27,190
what else would we do with the request,

75
00:05:27,200 --> 00:05:28,450
right and

76
00:05:28,680 --> 00:05:32,730
that would be a very basic setup which should render this to the screen.

77
00:05:32,840 --> 00:05:38,990
So if we now save this and we execute app.js again, you'll see again we've got an ongoing process which

78
00:05:38,990 --> 00:05:44,600
we can quit with control c but which of course shouldn't do as long as you're working with that server,

79
00:05:44,600 --> 00:05:46,850
as long as the server should be up and running

80
00:05:46,940 --> 00:05:51,200
and now if we go back to our page and we reload this page, we see Hello World

81
00:05:51,200 --> 00:05:56,540
and if we inspect our request, we see on the response headers we have the content type.

82
00:05:56,600 --> 00:06:03,200
You also see there are more headers than before, simply because Express.js also adds a bunch of default

83
00:06:03,200 --> 00:06:08,530
headers anyway, so it automatically adds a bunch of headers which we don't have to add on our own.

84
00:06:08,540 --> 00:06:14,450
So here we also see that Express.js is doing a little bit of extra work besides this basic node work

85
00:06:14,540 --> 00:06:20,900
we did manually before. And now we already have a bit of a more convenient way of handling incoming requests

86
00:06:20,900 --> 00:06:25,750
and sending back responses but we're not extracting any data at this point,

87
00:06:25,760 --> 00:06:28,170
so that's something we might also want to do and

88
00:06:28,180 --> 00:06:31,670
turns out this is also relatively easy with Express.js