1
00:00:02,190 --> 00:00:05,980
So I'll comment in this frontend service

2
00:00:05,980 --> 00:00:08,080
and now we can define the configuration

3
00:00:08,080 --> 00:00:10,130
for this frontend service.

4
00:00:10,130 --> 00:00:12,180
Now it's not too difficult.

5
00:00:12,180 --> 00:00:15,340
We can again have a look at the docker run command we used.

6
00:00:15,340 --> 00:00:16,360
And in the end,

7
00:00:16,360 --> 00:00:18,340
the most interesting thing now

8
00:00:18,340 --> 00:00:21,710
is that this also needs interactive mode.

9
00:00:21,710 --> 00:00:24,100
That's something we haven't set up before

10
00:00:24,100 --> 00:00:25,690
for the other containers.

11
00:00:25,690 --> 00:00:26,523
Other than that,

12
00:00:26,523 --> 00:00:28,530
it's just options we already know,

13
00:00:28,530 --> 00:00:29,770
some ports,

14
00:00:29,770 --> 00:00:30,830
then these two options,

15
00:00:30,830 --> 00:00:33,250
which we don't need to add to docker-compose

16
00:00:33,250 --> 00:00:35,230
and one volume.

17
00:00:35,230 --> 00:00:37,980
So in docker-compose.yaml,

18
00:00:37,980 --> 00:00:39,220
here for front-end,

19
00:00:39,220 --> 00:00:41,440
I will start with the image again.

20
00:00:41,440 --> 00:00:44,090
And just as with the backend,

21
00:00:44,090 --> 00:00:45,920
the image should be built.

22
00:00:45,920 --> 00:00:48,070
Because I'm not using a prebuilt image.

23
00:00:48,070 --> 00:00:50,410
I'm not using an image on docker hub.

24
00:00:50,410 --> 00:00:52,670
Instead I'll specify build here

25
00:00:52,670 --> 00:00:56,380
and then point at the frontend folder, in this case,

26
00:00:56,380 --> 00:00:58,770
because it's the frontend folder

27
00:00:58,770 --> 00:01:00,570
which holds the docker file

28
00:01:00,570 --> 00:01:03,540
for this react application image.

29
00:01:03,540 --> 00:01:05,810
So that's the folder we wanna point at

30
00:01:05,810 --> 00:01:07,313
so that this image is built.

31
00:01:08,180 --> 00:01:10,050
As a side note, by the way,

32
00:01:10,050 --> 00:01:12,740
whenever you run docker up again,

33
00:01:12,740 --> 00:01:15,740
it does not always rebuild images, of course,

34
00:01:15,740 --> 00:01:17,510
if an image already exists,

35
00:01:17,510 --> 00:01:19,390
it uses that existing image again.

36
00:01:19,390 --> 00:01:22,820
It only rebuilds if something changed about that image,

37
00:01:22,820 --> 00:01:25,070
if you changed your code, for example,

38
00:01:25,070 --> 00:01:28,080
and it detects that rebuilding is required.

39
00:01:28,080 --> 00:01:31,410
So docker-compose will be pretty smart about that.

40
00:01:31,410 --> 00:01:32,810
But that's just a side note.

41
00:01:33,760 --> 00:01:35,170
So after building this,

42
00:01:35,170 --> 00:01:37,150
we also have some ports here.

43
00:01:37,150 --> 00:01:39,870
And here we wanna publish port 3000

44
00:01:39,870 --> 00:01:43,190
on port 3000 in the host machine.

45
00:01:43,190 --> 00:01:45,060
We also got volumes here

46
00:01:45,060 --> 00:01:47,690
or to be precise one volume,

47
00:01:47,690 --> 00:01:49,190
and that's a bind mount.

48
00:01:49,190 --> 00:01:50,500
And again,

49
00:01:50,500 --> 00:01:54,780
now we don't have to specify this super long absolute path.

50
00:01:54,780 --> 00:01:57,430
Instead, we can specify a relative path.

51
00:01:57,430 --> 00:01:59,240
And here I want to bind

52
00:01:59,240 --> 00:02:00,980
my frontend source folder

53
00:02:01,940 --> 00:02:03,970
to the app source folder

54
00:02:03,970 --> 00:02:05,470
inside of the container.

55
00:02:05,470 --> 00:02:07,480
And this is how we can do it.

56
00:02:07,480 --> 00:02:09,360
This will set up such a bind mount

57
00:02:09,360 --> 00:02:12,570
so that code changes are instantly reflected

58
00:02:12,570 --> 00:02:13,963
in the running container.

59
00:02:15,030 --> 00:02:19,210
And now the only remaining thing is this interactive mode,

60
00:02:19,210 --> 00:02:21,140
which this reactive needs.

61
00:02:21,140 --> 00:02:23,450
How can we specify this?

62
00:02:23,450 --> 00:02:25,340
Well, there are two options for this,

63
00:02:25,340 --> 00:02:28,170
which we can add to our service configuration.

64
00:02:28,170 --> 00:02:32,220
We got the stdin_open option here,

65
00:02:32,220 --> 00:02:33,750
which we can set to true.

66
00:02:33,750 --> 00:02:35,050
To let docker know

67
00:02:35,050 --> 00:02:39,650
that this service needs an open input connection.

68
00:02:39,650 --> 00:02:41,840
And we got the TTY option,

69
00:02:41,840 --> 00:02:43,620
which we should also set to true

70
00:02:43,620 --> 00:02:44,800
because in the end

71
00:02:44,800 --> 00:02:47,348
the -it flag

72
00:02:47,348 --> 00:02:50,850
is just a combination of the dash input flag

73
00:02:50,850 --> 00:02:52,650
for opening standard input.

74
00:02:52,650 --> 00:02:57,650
And the TTY flag for attaching this terminal, so to say.

75
00:02:57,870 --> 00:03:00,020
And with these two options added

76
00:03:00,020 --> 00:03:01,630
the frontend container

77
00:03:01,630 --> 00:03:04,160
will be started in this interactive mode.

78
00:03:04,160 --> 00:03:06,660
Even if you then started in detached mode,

79
00:03:06,660 --> 00:03:10,020
it internally still knows that it's able to receive input

80
00:03:10,020 --> 00:03:12,083
and it will then start up correctly.

81
00:03:13,280 --> 00:03:15,930
We could also add depends_on here

82
00:03:15,930 --> 00:03:18,000
and depend on our backend

83
00:03:18,000 --> 00:03:20,740
to ensure that we only starts the frontend

84
00:03:20,740 --> 00:03:23,100
if the backend started up.

85
00:03:23,100 --> 00:03:26,730
It's up to you if your application needs that or not.

86
00:03:26,730 --> 00:03:29,370
There might be applications which even work,

87
00:03:29,370 --> 00:03:32,870
to a certain extent, if the backend is not up and running

88
00:03:32,870 --> 00:03:34,723
but here we could also add it.

89
00:03:36,040 --> 00:03:38,430
And with all that done,

90
00:03:38,430 --> 00:03:40,930
we again can open a terminal

91
00:03:40,930 --> 00:03:43,560
and run docker-compose up

92
00:03:43,560 --> 00:03:45,950
and start in detached mode.

93
00:03:45,950 --> 00:03:47,680
And now it will build

94
00:03:47,680 --> 00:03:49,680
all the images it needs to build.

95
00:03:49,680 --> 00:03:53,380
It detects that the backend image doesn't need to be built.

96
00:03:53,380 --> 00:03:55,100
So it will not do that.

97
00:03:55,100 --> 00:03:57,270
And it will then also start

98
00:03:57,270 --> 00:04:00,140
all the containers based on all the images

99
00:04:00,140 --> 00:04:03,240
with all the options we specified here

100
00:04:03,240 --> 00:04:05,740
in the docker-compose.yaml file.

101
00:04:05,740 --> 00:04:10,040
So let's wait for this frontend image build process

102
00:04:10,040 --> 00:04:11,203
to finish.

103
00:04:12,150 --> 00:04:13,070
This is looking good,

104
00:04:13,070 --> 00:04:14,340
looks like we're done.

105
00:04:14,340 --> 00:04:16,033
And now with that,

106
00:04:16,880 --> 00:04:19,130
we got three containers up and running

107
00:04:20,160 --> 00:04:22,510
and we should now be able

108
00:04:22,510 --> 00:04:25,780
to visit local host 3000 and see our application.

109
00:04:25,780 --> 00:04:27,580
And we do.

110
00:04:27,580 --> 00:04:29,630
And if I now add a goal here,

111
00:04:29,630 --> 00:04:31,210
that's added and if I reload,

112
00:04:31,210 --> 00:04:32,433
it's still there.

113
00:04:33,310 --> 00:04:35,100
Because it's saved in a database

114
00:04:35,100 --> 00:04:36,453
with help of the backend.

115
00:04:38,340 --> 00:04:42,880
And if I now run docker-compose down,

116
00:04:42,880 --> 00:04:44,700
everything is teared down.

117
00:04:44,700 --> 00:04:45,840
But as I mentioned,

118
00:04:45,840 --> 00:04:47,890
volumes are kept.

119
00:04:47,890 --> 00:04:50,180
So if I restart everything now,

120
00:04:50,180 --> 00:04:51,420
with one command,

121
00:04:51,420 --> 00:04:52,840
this is now super fast

122
00:04:52,840 --> 00:04:56,020
because images don't need to be rebuilt.

123
00:04:56,020 --> 00:04:57,870
I can reload.

124
00:04:57,870 --> 00:04:59,420
And it works just as before.

125
00:04:59,420 --> 00:05:01,520
And my goal is also still there.

126
00:05:01,520 --> 00:05:04,520
Of course deleting all the words though.

127
00:05:04,520 --> 00:05:06,440
And this is now docker-compose,

128
00:05:06,440 --> 00:05:09,510
and it should be fairly obvious

129
00:05:09,510 --> 00:05:11,480
why it is awesome

130
00:05:11,480 --> 00:05:13,620
and why it can be really helpful

131
00:05:13,620 --> 00:05:15,640
in more complex projects.

132
00:05:15,640 --> 00:05:18,220
Instead of running all these individual commands

133
00:05:18,220 --> 00:05:19,260
all the time.

134
00:05:19,260 --> 00:05:23,000
And therefore, having to fiddle around in the terminal.

135
00:05:23,000 --> 00:05:25,960
We have one convenient configuration file,

136
00:05:25,960 --> 00:05:29,000
which is easy to read and manipulate,

137
00:05:29,000 --> 00:05:30,680
easy to maintain and manage.

138
00:05:30,680 --> 00:05:33,780
And then we just have two main commands,

139
00:05:33,780 --> 00:05:36,180
docker-compose up and down

140
00:05:36,180 --> 00:05:39,500
to bring all these connected services up or down

141
00:05:39,500 --> 00:05:43,640
and let Docker do all the other heavy lifting.

142
00:05:43,640 --> 00:05:45,710
And that is pretty, pretty useful,

143
00:05:45,710 --> 00:05:47,550
especially for bigger projects.

144
00:05:47,550 --> 00:05:49,300
And in this demo project

145
00:05:49,300 --> 00:05:51,660
we could already see why Docker Compose

146
00:05:51,660 --> 00:05:52,843
is a great tool.