1
00:00:02,070 --> 00:00:03,969
So let's work on that frontend next,

2
00:00:03,969 --> 00:00:08,189
before we thereafter ensure that data persists,

3
00:00:08,189 --> 00:00:10,900
and source code is updated live.

4
00:00:10,900 --> 00:00:14,380
Let's work on dockerizing this frontend application.

5
00:00:14,380 --> 00:00:16,270
And that's of course something new,

6
00:00:16,270 --> 00:00:19,510
which we haven't done before in this course.

7
00:00:19,510 --> 00:00:22,270
It is, however, not that difficult.

8
00:00:22,270 --> 00:00:25,760
I will stop my running NPM start process

9
00:00:25,760 --> 00:00:27,420
in this frontend folder,

10
00:00:27,420 --> 00:00:29,230
and in order to dockerize this,

11
00:00:29,230 --> 00:00:32,000
here, I also need to write a docker file.

12
00:00:32,000 --> 00:00:34,440
Because I need my own instructions again,

13
00:00:34,440 --> 00:00:39,130
there is no official image for this specific application.

14
00:00:39,130 --> 00:00:40,810
Now, in order to dockerize it,

15
00:00:40,810 --> 00:00:42,450
you need some basic knowledge

16
00:00:42,450 --> 00:00:45,000
about this React project setup.

17
00:00:45,000 --> 00:00:46,200
Otherwise it's hard.

18
00:00:46,200 --> 00:00:49,040
Which is why I mentioned that dockerizing this

19
00:00:49,040 --> 00:00:51,320
would definitely be harder and optional,

20
00:00:51,320 --> 00:00:54,263
and why you should start with backend and MongoDB.

21
00:00:55,210 --> 00:00:58,210
Because you need to know that this frontend setup,

22
00:00:58,210 --> 00:01:00,460
in the end, depends on Node.

23
00:01:00,460 --> 00:01:03,880
It's not a Node application, but it uses Node

24
00:01:03,880 --> 00:01:06,480
to spin up this development server,

25
00:01:06,480 --> 00:01:08,960
which serves this React application,

26
00:01:08,960 --> 00:01:12,570
and Node is also used to optimize the React code

27
00:01:12,570 --> 00:01:15,780
which you write and to transform it into code

28
00:01:15,780 --> 00:01:18,170
the browser understands.

29
00:01:18,170 --> 00:01:21,950
Now, this is just how React projects typically are setup,

30
00:01:21,950 --> 00:01:25,620
and that's why our docker file, in the the frontend folder,

31
00:01:25,620 --> 00:01:28,830
also needs to be based on Node as a base image.

32
00:01:28,830 --> 00:01:31,860
Not because we write Node code ourselves,

33
00:01:31,860 --> 00:01:34,853
but because this project setup requires Node.

34
00:01:36,560 --> 00:01:39,970
As a next step, I will also setup a working directory here,

35
00:01:39,970 --> 00:01:42,000
and we can also name this app,

36
00:01:42,000 --> 00:01:43,810
since it is a totally different container

37
00:01:43,810 --> 00:01:46,640
than the backend, there will be no clash.

38
00:01:46,640 --> 00:01:48,680
So I will go with app here as well,

39
00:01:48,680 --> 00:01:50,730
but you could also use as different name.

40
00:01:51,610 --> 00:01:54,010
Next, we also got dependencies here,

41
00:01:54,010 --> 00:01:58,620
so we should copy package.json into the working directory,

42
00:01:58,620 --> 00:02:01,530
and then run NPM install.

43
00:02:01,530 --> 00:02:03,670
This does not differ from the backend.

44
00:02:03,670 --> 00:02:05,063
It's basically the same.

45
00:02:06,470 --> 00:02:11,470
Now thereafter, I also want to copy the remaining code

46
00:02:11,490 --> 00:02:14,423
into my working directory here.

47
00:02:15,410 --> 00:02:19,690
And once that is done, I want to specify a command

48
00:02:19,690 --> 00:02:23,170
which should be triggered whenever we create a container

49
00:02:23,170 --> 00:02:24,660
based on this image.

50
00:02:24,660 --> 00:02:27,270
And here it's not Node running a file,

51
00:02:27,270 --> 00:02:29,363
but it's NPM start.

52
00:02:30,590 --> 00:02:32,500
Running this start script

53
00:02:32,500 --> 00:02:35,240
in this frontend package.json file.

54
00:02:35,240 --> 00:02:38,110
This then uses one of the installed dependencies

55
00:02:38,110 --> 00:02:42,260
to spin up that development server which hosts this

56
00:02:42,260 --> 00:02:45,370
React application during development.

57
00:02:45,370 --> 00:02:48,463
We'll talk about deployment later in this course.

58
00:02:49,340 --> 00:02:52,840
Now, this application also exposes a port.

59
00:02:52,840 --> 00:02:57,270
We don't see it directly, but by default it's port 3000,

60
00:02:57,270 --> 00:02:59,960
and you could see this before, here,

61
00:02:59,960 --> 00:03:03,900
when I tested this application locally on my host machine.

62
00:03:03,900 --> 00:03:08,900
So therefore, I want to document this, and add expose 3000

63
00:03:09,110 --> 00:03:10,453
to this docker file.

64
00:03:11,330 --> 00:03:13,020
Now, that should be it.

65
00:03:13,020 --> 00:03:17,320
That's a basic docker file for this React application.

66
00:03:17,320 --> 00:03:21,480
If we now save this, we can also docker build this file,

67
00:03:21,480 --> 00:03:25,453
and give it a tag, and I will name it goals react.

68
00:03:26,600 --> 00:03:30,520
Hit enter, and now build this docker file.

69
00:03:30,520 --> 00:03:34,880
So now there's also starts, goes through all these steps,

70
00:03:34,880 --> 00:03:36,980
installs all the dependencies,

71
00:03:36,980 --> 00:03:40,350
which for this project can take a bit longer.

72
00:03:40,350 --> 00:03:44,560
You can ignore any warnings you get here, that's no problem.

73
00:03:44,560 --> 00:03:47,820
And after a while this will eventually finish,

74
00:03:47,820 --> 00:03:50,700
and we'll then have this frontend application

75
00:03:50,700 --> 00:03:53,080
inside a docker image as well.

76
00:03:53,080 --> 00:03:55,970
So let's wait for this image creation

77
00:03:55,970 --> 00:03:58,223
to finish and to be done with.

78
00:03:59,240 --> 00:04:01,780
And you will note that this takes quite some time,

79
00:04:01,780 --> 00:04:03,770
but eventually, it's done.

80
00:04:03,770 --> 00:04:07,690
And now with this done we can run a container.

81
00:04:07,690 --> 00:04:09,390
We can run a container based on

82
00:04:09,390 --> 00:04:12,380
this goals react image we just built,

83
00:04:12,380 --> 00:04:15,813
give the container a name of goals frontend maybe,

84
00:04:17,089 --> 00:04:20,399
remove it when it's stopped,

85
00:04:20,399 --> 00:04:22,723
run it in detached mode if we want to,

86
00:04:23,660 --> 00:04:24,790
and, very important,

87
00:04:24,790 --> 00:04:28,900
publish the internally exposed port 3000

88
00:04:28,900 --> 00:04:31,416
on the local host port 3000

89
00:04:31,416 --> 00:04:34,950
so that we can still enter this here in the browser

90
00:04:34,950 --> 00:04:38,270
and view this application as it's running

91
00:04:38,270 --> 00:04:39,623
on the development server.

92
00:04:41,300 --> 00:04:43,540
So let's hit enter.

93
00:04:43,540 --> 00:04:46,550
With docker PS, we can see that goals react

94
00:04:46,550 --> 00:04:48,550
is a running container now.

95
00:04:48,550 --> 00:04:51,920
And hence if I now reload local host 3000,

96
00:04:51,920 --> 00:04:53,600
I should see this application.

97
00:04:53,600 --> 00:04:55,780
But actually I don't.

98
00:04:55,780 --> 00:04:57,380
And if I run docker PS again,

99
00:04:57,380 --> 00:04:59,883
I indeed see it's not running anymore.

100
00:05:01,210 --> 00:05:03,480
So something seems to go wrong here.

101
00:05:03,480 --> 00:05:06,770
And in order to see what that is, I will rerun it

102
00:05:06,770 --> 00:05:10,200
but now not in detached mode, but instead in attached mode,

103
00:05:10,200 --> 00:05:12,063
so that I can see all the logs.

104
00:05:12,940 --> 00:05:14,910
So let's try this again.

105
00:05:14,910 --> 00:05:18,660
And you see it's starting the development server here,

106
00:05:18,660 --> 00:05:20,890
so that seems to work.

107
00:05:20,890 --> 00:05:25,230
But thereafter it seems to stop.

108
00:05:25,230 --> 00:05:27,660
Because thereafter I can already see

109
00:05:27,660 --> 00:05:29,430
it's not running anymore.

110
00:05:29,430 --> 00:05:31,240
Now why is our container stopping

111
00:05:31,240 --> 00:05:34,700
immediately after this development server was spun up?

112
00:05:34,700 --> 00:05:38,020
Now that's something specific to this React project's

113
00:05:38,020 --> 00:05:39,680
setup here.

114
00:05:39,680 --> 00:05:44,240
You need to run it in interactive mode,

115
00:05:44,240 --> 00:05:48,340
by adding the dash IT option to the docker run command

116
00:05:48,340 --> 00:05:50,740
so that you don't just start the container

117
00:05:50,740 --> 00:05:53,550
and be done with it, but that you let the container know

118
00:05:53,550 --> 00:05:57,270
that you want to be able to also enter commands

119
00:05:57,270 --> 00:05:59,120
and interact with it.

120
00:05:59,120 --> 00:06:01,220
We're not actually going to do that,

121
00:06:01,220 --> 00:06:03,780
but the React project is set up the way

122
00:06:03,780 --> 00:06:06,970
that if it doesn't receive this input,

123
00:06:06,970 --> 00:06:09,410
this input trigger you could say,

124
00:06:09,410 --> 00:06:11,250
it immediately stops the server

125
00:06:11,250 --> 00:06:13,500
because no one's interested anyways.

126
00:06:13,500 --> 00:06:16,110
I guess that's kind of the logic there.

127
00:06:16,110 --> 00:06:18,800
So we need to add dash IT here.

128
00:06:18,800 --> 00:06:20,650
And if I now run this,

129
00:06:20,650 --> 00:06:24,310
now this starts up, starts the development server,

130
00:06:24,310 --> 00:06:26,453
and now this looks much better.

131
00:06:27,700 --> 00:06:30,440
And if we now reload local host 3000,

132
00:06:30,440 --> 00:06:32,550
here's my application.

133
00:06:32,550 --> 00:06:35,580
Now the goal I entered before is missing

134
00:06:35,580 --> 00:06:39,690
because I restarted the MongoDB container in the meanwhile,

135
00:06:39,690 --> 00:06:44,030
but otherwise our goal we added before would still be there.

136
00:06:44,030 --> 00:06:47,110
And if I add a new goal here, you see that works,

137
00:06:47,110 --> 00:06:49,373
and if I reload it's also fetched again.

138
00:06:50,380 --> 00:06:54,150
So, now, this application is dockerized as well,

139
00:06:54,150 --> 00:06:57,630
and the frontend is also running in its own container.

140
00:06:57,630 --> 00:07:00,490
And that's already a great first step.

141
00:07:00,490 --> 00:07:04,640
We put all three building blocks into their own containers.

142
00:07:04,640 --> 00:07:07,200
Now, let's polish this setup though,

143
00:07:07,200 --> 00:07:11,230
and let's add all the extra features we need in reality.

144
00:07:11,230 --> 00:07:13,810
Like for example, persisting data.

145
00:07:13,810 --> 00:07:17,020
But also communication between these containers.

146
00:07:17,020 --> 00:07:20,040
Actually, we can see that they clearly are able

147
00:07:20,040 --> 00:07:23,550
to communicate, but they all communicate with each other

148
00:07:23,550 --> 00:07:25,540
through our local host machine

149
00:07:25,540 --> 00:07:28,340
because we always publish their ports.

150
00:07:28,340 --> 00:07:31,040
This works, but it's even better

151
00:07:31,040 --> 00:07:34,020
if we put them all into one network.

152
00:07:34,020 --> 00:07:37,360
And then they can automatically communicate with each other

153
00:07:37,360 --> 00:07:39,910
just through their container names,

154
00:07:39,910 --> 00:07:42,970
as you learned in the last course section.

155
00:07:42,970 --> 00:07:45,693
So therefore I'll stop all these containers here.

156
00:07:47,030 --> 00:07:49,680
With control C we can get out of this input mode

157
00:07:49,680 --> 00:07:51,120
on the React container.

158
00:07:51,120 --> 00:07:54,070
And then it shuts down automatically as I explained

159
00:07:54,070 --> 00:07:56,150
if it loses this input signal.

160
00:07:56,150 --> 00:08:01,010
And it will also stop the goals backend container here,

161
00:08:01,010 --> 00:08:04,270
and I will also stop the MongoDB container.

162
00:08:04,270 --> 00:08:06,750
So I'll stop all three containers,

163
00:08:06,750 --> 00:08:10,670
so that at the end here, once we're done,

164
00:08:10,670 --> 00:08:12,450
we've got no running container.

165
00:08:12,450 --> 00:08:15,980
And because they all have the dash dash RM flag,

166
00:08:15,980 --> 00:08:18,980
we've also got no stopped containers.

167
00:08:18,980 --> 00:08:21,210
And now, let's again restart them,

168
00:08:21,210 --> 00:08:24,463
but let's insure we put them into one and the same network.