1
00:00:02,100 --> 00:00:04,689
So now that we know what the problems

2
00:00:04,689 --> 00:00:07,850
with this static frontend-site are,

3
00:00:07,850 --> 00:00:11,510
let's migrate it to a dynamic site

4
00:00:11,510 --> 00:00:13,680
that uses our own server-side code,

5
00:00:13,680 --> 00:00:16,430
because that's what we need ultimately.

6
00:00:16,430 --> 00:00:19,810
And therefore, I'll close this frontend-site folder for now

7
00:00:19,810 --> 00:00:22,570
and get back to this app.js file.

8
00:00:22,570 --> 00:00:27,500
In here, we now want to create a brand new Express server,

9
00:00:27,500 --> 00:00:30,970
so a NodeJS server with help of the Express library,

10
00:00:30,970 --> 00:00:33,030
which we already used before.

11
00:00:33,030 --> 00:00:35,630
And then we want to set up a couple of routes,

12
00:00:35,630 --> 00:00:38,710
so a couple of paths that we handle

13
00:00:38,710 --> 00:00:41,400
and then sent back different responses,

14
00:00:41,400 --> 00:00:45,220
enable the submission of this form, and so on.

15
00:00:45,220 --> 00:00:46,710
Now, therefore, first of all,

16
00:00:46,710 --> 00:00:49,390
we should make sure that Express is installed.

17
00:00:49,390 --> 00:00:51,150
And in this starting project,

18
00:00:51,150 --> 00:00:52,610
which I provided to you,

19
00:00:52,610 --> 00:00:56,510
Express already is specified as a dependency.

20
00:00:56,510 --> 00:01:00,590
So if you ran npm install, which you should,

21
00:01:00,590 --> 00:01:03,093
then you got Express installed already.

22
00:01:04,250 --> 00:01:06,250
And therefore, we can then go back to app.js

23
00:01:06,250 --> 00:01:09,560
and create our Express web server here.

24
00:01:09,560 --> 00:01:12,810
Now, definitely feel free to try this on your own,

25
00:01:12,810 --> 00:01:14,410
setting up a basic server

26
00:01:14,410 --> 00:01:17,650
that does not yet serve the HTML files,

27
00:01:17,650 --> 00:01:20,470
just a dummy server that handles one route

28
00:01:20,470 --> 00:01:23,230
and sends back a dummy response.

29
00:01:23,230 --> 00:01:24,460
After a short pause,

30
00:01:24,460 --> 00:01:26,320
which I give you to pause the video

31
00:01:26,320 --> 00:01:27,720
and try this on your own,

32
00:01:27,720 --> 00:01:29,153
we'll do this together.

33
00:01:31,970 --> 00:01:33,660
So did you succeed?

34
00:01:33,660 --> 00:01:35,850
Let's now do that together.

35
00:01:35,850 --> 00:01:36,683
And for this,

36
00:01:36,683 --> 00:01:40,720
we'll, first of all, import require express

37
00:01:40,720 --> 00:01:43,410
with that require function like this

38
00:01:43,410 --> 00:01:46,763
and store it in a constant or a variable.

39
00:01:47,810 --> 00:01:51,560
Then you learned that Express is actually a function

40
00:01:51,560 --> 00:01:52,970
that we can execute,

41
00:01:52,970 --> 00:01:56,550
and therefore, I'll call express as a function

42
00:01:56,550 --> 00:01:59,910
and store the result in a constant named app.

43
00:01:59,910 --> 00:02:02,860
As you learned, that's not a must-use name,

44
00:02:02,860 --> 00:02:04,430
but it's a commonly used name,

45
00:02:04,430 --> 00:02:09,152
since we refer to Express servers as apps or applications.

46
00:02:10,150 --> 00:02:11,880
Now on this app object,

47
00:02:11,880 --> 00:02:14,600
we can now call the listen method

48
00:02:14,600 --> 00:02:17,780
to start listening for incoming requests,

49
00:02:17,780 --> 00:02:21,550
for incoming network traffic on a certain port.

50
00:02:21,550 --> 00:02:22,880
And during development.

51
00:02:22,880 --> 00:02:26,360
I will again use port 3000 as we did it before

52
00:02:26,360 --> 00:02:27,363
in this course.

53
00:02:28,650 --> 00:02:32,220
Now this sets up a server that listens to requests,

54
00:02:32,220 --> 00:02:35,650
but in order to really have a useful server,

55
00:02:35,650 --> 00:02:37,690
we should have at least one route,

56
00:02:37,690 --> 00:02:41,770
one path after our domain, which we support.

57
00:02:41,770 --> 00:02:44,180
And for that, I'll set up some dummy path here

58
00:02:44,180 --> 00:02:46,830
with app.get, let's say,

59
00:02:46,830 --> 00:02:49,680
to listen to incoming get requests

60
00:02:49,680 --> 00:02:52,510
where I just listen to slash nothing,

61
00:02:52,510 --> 00:02:56,360
so just localhost 3000 slash nothing

62
00:02:56,360 --> 00:02:58,180
to then do something.

63
00:02:58,180 --> 00:02:59,910
And the something I want to do here

64
00:02:59,910 --> 00:03:03,300
is then to find in this anonymous function which I create,

65
00:03:03,300 --> 00:03:06,767
which receives a request object and a response object,

66
00:03:06,767 --> 00:03:11,070
and we can use this response object to send back a response.

67
00:03:11,070 --> 00:03:12,620
And there, I'll just sent back

68
00:03:12,620 --> 00:03:14,700
the good old "Hello World" response,

69
00:03:14,700 --> 00:03:16,390
though we are going to change this

70
00:03:16,390 --> 00:03:18,173
throughout this course section.

71
00:03:19,960 --> 00:03:21,660
And now with that setup,

72
00:03:21,660 --> 00:03:25,407
we got our first basic dummy Node Express server,

73
00:03:25,407 --> 00:03:27,853
and we can now start this server.

74
00:03:28,711 --> 00:03:32,170
And for this, I got Nodemon installed already.

75
00:03:32,170 --> 00:03:35,660
It was a devDependency listed here in this project.

76
00:03:35,660 --> 00:03:38,660
And I got this start script prepared already

77
00:03:38,660 --> 00:03:39,963
in package.json.

78
00:03:40,840 --> 00:03:42,200
And therefore, as you learned

79
00:03:42,200 --> 00:03:44,720
at the end of the previous course section,

80
00:03:44,720 --> 00:03:48,060
we can now open this integrated terminal here

81
00:03:48,060 --> 00:03:50,030
in Visual Studio Code

82
00:03:50,030 --> 00:03:54,670
and then simply start this script with npm run start.

83
00:03:54,670 --> 00:03:58,760
Or since start is a reserved special type of script name,

84
00:03:58,760 --> 00:04:01,490
we can also just run npm start like this

85
00:04:01,490 --> 00:04:03,710
and start this Nodemon server,

86
00:04:03,710 --> 00:04:06,220
which will keep on watching for changes

87
00:04:06,220 --> 00:04:07,880
and which will restart the server

88
00:04:07,880 --> 00:04:09,863
whenever we do change our code.

89
00:04:11,150 --> 00:04:12,290
And now with that,

90
00:04:12,290 --> 00:04:16,029
we can go back here and instead of loading this site,

91
00:04:16,029 --> 00:04:19,490
which was served by this Live Server extension,

92
00:04:19,490 --> 00:04:21,850
so this static site that we have here,

93
00:04:21,850 --> 00:04:25,720
I will now visit localhost 3000 slash nothing,

94
00:04:25,720 --> 00:04:27,973
and we should see "Hello world!" here.

95
00:04:29,820 --> 00:04:34,730
And that's now this dummy starting Node Express server

96
00:04:34,730 --> 00:04:37,560
with which we will continue in the next lectures

97
00:04:37,560 --> 00:04:41,570
to now migrate this static site into this server

98
00:04:41,570 --> 00:04:44,800
so that it can be turned into a dynamic site

99
00:04:44,800 --> 00:04:48,343
where dynamic content can be generated and served.