1
00:00:00,000 --> 00:00:04,500
[Intro Music]

2
00:00:04,560 --> 00:00:05,940
We successfully configured the

3
00:00:05,940 --> 00:00:07,740
'volumes' mapping for the frontend

4
00:00:07,770 --> 00:00:09,870
application. And we verified that

5
00:00:09,930 --> 00:00:12,390
such mapping actually works. And

6
00:00:12,450 --> 00:00:14,520
files inside of the 'app' folder,

7
00:00:14,580 --> 00:00:16,590
inside of the container are

8
00:00:16,590 --> 00:00:18,510
synchronized with files inside of

9
00:00:18,510 --> 00:00:20,670
the frontend folder on your local

10
00:00:20,670 --> 00:00:23,280
computer. And using such an

11
00:00:23,280 --> 00:00:25,650
environment variable, we fixed any

12
00:00:25,650 --> 00:00:27,930
potential synchronization errors

13
00:00:27,960 --> 00:00:30,090
that might occur. And basically

14
00:00:30,090 --> 00:00:32,520
now, React application works in the

15
00:00:32,520 --> 00:00:34,650
same way as before, when we used

16
00:00:34,680 --> 00:00:36,840
just 'npm start' command in order to

17
00:00:36,840 --> 00:00:39,270
run it locally in development mode.

18
00:00:39,900 --> 00:00:41,520
And now React application is

19
00:00:41,520 --> 00:00:43,830
rebuilt on the fly each time when

20
00:00:43,830 --> 00:00:46,200
you modify some JavaScript files in

21
00:00:46,200 --> 00:00:48,210
your React application. And

22
00:00:48,210 --> 00:00:49,950
basically, before adding 'volumes'

23
00:00:49,950 --> 00:00:52,110
mapping for the 'api' service. Let's

24
00:00:52,110 --> 00:00:54,090
go to the frontend container, and

25
00:00:54,090 --> 00:00:55,830
let's have a look at logs produced

26
00:00:55,830 --> 00:00:57,870
by that container. Let's go to the

27
00:00:57,870 --> 00:00:59,700
terminal, and here let's enter

28
00:00:59,730 --> 00:01:02,100
'docker logs', and here will be the

29
00:01:02,100 --> 00:01:04,319
name of the running container. Name

30
00:01:04,349 --> 00:01:06,480
in your case is exactly the same as

31
00:01:06,480 --> 00:01:09,090
mine, this one. Let's have a look at

32
00:01:09,090 --> 00:01:10,740
logs of the frontend container.

33
00:01:11,070 --> 00:01:12,840
And at the end of the output I see

34
00:01:12,870 --> 00:01:15,510
several 'Compiling' and 'Compiled

35
00:01:15,540 --> 00:01:19,020
successfully' sections. And this log

36
00:01:19,050 --> 00:01:21,270
is produced by React scripts each

37
00:01:21,270 --> 00:01:23,730
time when hot reload feature is

38
00:01:23,730 --> 00:01:26,310
applied, each time when I make any

39
00:01:26,310 --> 00:01:28,230
changes in the React application.

40
00:01:29,190 --> 00:01:31,290
Let's quickly go back to the 'Search.js'

41
00:01:31,290 --> 00:01:32,820
file for instance, and modify

42
00:01:32,820 --> 00:01:34,710
something here. For instance, let's

43
00:01:34,710 --> 00:01:36,510
add here, one more empty line like

44
00:01:36,510 --> 00:01:38,430
that and save changes. Let's go

45
00:01:38,430 --> 00:01:40,590
back here and observe logs once

46
00:01:40,590 --> 00:01:43,590
again. And now I see additional

47
00:01:43,620 --> 00:01:45,510
'Compiling', 'Compiled successfully'

48
00:01:45,510 --> 00:01:47,820
section. And this is actually how hot

49
00:01:47,820 --> 00:01:49,860
reload feature works now after

50
00:01:49,860 --> 00:01:52,680
volumes mapping. Alright, let's

51
00:01:52,680 --> 00:01:54,540
clear terminal here, and let's

52
00:01:54,540 --> 00:01:56,100
proceed with volumes mapping

53
00:01:56,100 --> 00:01:57,810
configuration here in the 'docker-

54
00:01:57,810 --> 00:01:59,760
compose' file. Before that, let me

55
00:01:59,790 --> 00:02:01,830
remove this empty line like this.

56
00:02:02,280 --> 00:02:04,200
Alright, let's now add volumes

57
00:02:04,200 --> 00:02:06,150
mapping for the api service, and we

58
00:02:06,150 --> 00:02:08,100
will do that in similar way as we did

59
00:02:08,100 --> 00:02:10,020
for frontend application. Here

60
00:02:10,020 --> 00:02:12,330
will be 'volumes:', like that.

61
00:02:12,720 --> 00:02:14,896
And on the next line, let's map

62
00:02:14,896 --> 00:02:19,470
'./api' to the '/app'. We

63
00:02:19,470 --> 00:02:21,420
gave that '/app' is a working

64
00:02:21,420 --> 00:02:23,190
directory inside of the 'api'

65
00:02:23,190 --> 00:02:25,140
container. Internal working

66
00:02:25,140 --> 00:02:26,310
directories inside of the

67
00:02:26,310 --> 00:02:28,380
containers here, and here are the

68
00:02:28,380 --> 00:02:30,270
same. But of course, containers

69
00:02:30,270 --> 00:02:31,680
here and here are completely

70
00:02:31,680 --> 00:02:34,500
different. But here now we will map

71
00:02:34,530 --> 00:02:37,980
'api' folder, this folder from our

72
00:02:37,980 --> 00:02:40,080
local computer to the container.

73
00:02:40,650 --> 00:02:42,600
Let's know save changes, and let's

74
00:02:42,600 --> 00:02:44,820
run 'docker-compose'. Let's go to the

75
00:02:44,820 --> 00:02:46,620
terminal, and you could run it by

76
00:02:46,620 --> 00:02:49,830
entering 'docker-compose up' like

77
00:02:49,830 --> 00:02:51,450
that without bringing all

78
00:02:51,450 --> 00:02:53,640
containers down and then bringing

79
00:02:53,640 --> 00:02:56,160
them up again. So 'docker-compose up',

80
00:02:56,220 --> 00:02:58,350
and let's here add option '-d',

81
00:02:58,650 --> 00:03:01,230
detached. Notice that 'images-

82
00:03:01,230 --> 00:03:03,000
gallery_frontend_1 is up-to-

83
00:03:03,000 --> 00:03:05,130
date', there was no need to restart

84
00:03:05,130 --> 00:03:08,370
it. But Docker is 'Recreating images-

85
00:03:08,370 --> 00:03:10,050
gallery_api_1', because its

86
00:03:10,050 --> 00:03:12,840
configuration was modified. Okay,

87
00:03:13,020 --> 00:03:15,810
this container was recreated. 'docker

88
00:03:15,810 --> 00:03:17,850
ps', there are still two different

89
00:03:17,850 --> 00:03:20,220
containers. And now let's verify

90
00:03:20,250 --> 00:03:22,920
whether changes in the 'api' folder

91
00:03:22,950 --> 00:03:24,540
will be reflected inside of the

92
00:03:24,540 --> 00:03:26,730
container or not. For that, let's

93
00:03:26,760 --> 00:03:29,220
open up a bash shell session to the

94
00:03:29,220 --> 00:03:32,340
'api' container, this one, and for that

95
00:03:32,340 --> 00:03:34,110
we will use command 'docker exec'.

96
00:03:34,290 --> 00:03:35,460
Let's copy the name of the

97
00:03:35,460 --> 00:03:38,550
container. 'docker exec -it',

98
00:03:38,730 --> 00:03:40,920
name of the container, 'bash', we are

99
00:03:40,920 --> 00:03:43,470
starting a bash shell process, and

100
00:03:43,470 --> 00:03:45,060
here inside of the 'app' folder,

101
00:03:45,060 --> 00:03:46,380
let's for instance, have a look at

102
00:03:46,380 --> 00:03:48,450
the contents of the main.py file.

103
00:03:48,720 --> 00:03:50,700
And here we see current contents of

104
00:03:50,700 --> 00:03:53,280
the main.py file. Let's now try to

105
00:03:53,280 --> 00:03:55,830
modify main the PDF.py file here in

106
00:03:55,830 --> 00:03:56,910
the 'api' folder.

107
00:03:57,210 --> 00:03:59,850
Let's go there, open main.py file,

108
00:04:00,360 --> 00:04:02,070
and before actual modification,

109
00:04:02,100 --> 00:04:04,290
let's go back to web browser, and

110
00:04:04,320 --> 00:04:06,330
here in the new tab, here I

111
00:04:06,330 --> 00:04:08,370
actually have such step, let's make

112
00:04:08,370 --> 00:04:10,440
request to the new image endpoint

113
00:04:10,440 --> 00:04:12,180
that is available in the Flask web

114
00:04:12,180 --> 00:04:15,270
server. Let's make this query. And

115
00:04:15,270 --> 00:04:16,980
I successfully received response

116
00:04:16,980 --> 00:04:19,829
from the api service. Now, let's try

117
00:04:19,829 --> 00:04:22,769
to modify main.py file and see

118
00:04:22,800 --> 00:04:24,089
whether changes will be

119
00:04:24,089 --> 00:04:26,940
reflected or not. Let's modify for

120
00:04:26,940 --> 00:04:29,280
example, this new_image function

121
00:04:29,280 --> 00:04:31,740
here. Look at that in this function,

122
00:04:31,740 --> 00:04:33,750
we make a request to the UNSPLASH,

123
00:04:33,870 --> 00:04:36,330
and afterwards we return data to

124
00:04:36,330 --> 00:04:39,450
the client as a proxy actually. Let

125
00:04:39,450 --> 00:04:41,550
me actually after this word,

126
00:04:42,060 --> 00:04:45,720
immediately return dictionary "word",

127
00:04:46,410 --> 00:04:48,510
and its value will be 'word' like

128
00:04:48,510 --> 00:04:50,790
that. And of course, all those

129
00:04:50,820 --> 00:04:52,680
statements will not be executed.

130
00:04:53,280 --> 00:04:56,250
Let's now save changes. Saved. Let's

131
00:04:56,250 --> 00:04:58,020
first verify whether the changes

132
00:04:58,110 --> 00:05:00,562
are now seen inside of the container.

133
00:05:00,562 --> 00:05:02,910
Here let's open Bash shell,

134
00:05:03,270 --> 00:05:05,310
let's read contents of the main.py

135
00:05:05,310 --> 00:05:08,070
file again. And I see here updated

136
00:05:08,070 --> 00:05:10,020
file. Here is this return

137
00:05:10,050 --> 00:05:12,330
statement. It means that the files

138
00:05:12,330 --> 00:05:14,730
were synchronized correctly. And

139
00:05:14,730 --> 00:05:16,920
now container has updated version

140
00:05:17,070 --> 00:05:19,470
of the main.py file. Let's now

141
00:05:19,470 --> 00:05:20,940
verify whether actual

142
00:05:20,970 --> 00:05:23,340
application is still working, and

143
00:05:23,340 --> 00:05:24,930
whether it was updated or not.

144
00:05:25,530 --> 00:05:27,780
Let's go back here and refresh this

145
00:05:27,780 --> 00:05:30,240
page. And now I get a response "word":

146
00:05:30,240 --> 00:05:32,610
"car". And that means that actual

147
00:05:32,640 --> 00:05:35,190
Flask application was also

148
00:05:35,190 --> 00:05:37,800
restarted after making changes in

149
00:05:37,800 --> 00:05:40,410
the main.py file. Let's have a

150
00:05:40,410 --> 00:05:42,960
look at logs of the api container.

151
00:05:43,320 --> 00:05:44,820
Let's do that here in the separate

152
00:05:44,820 --> 00:05:48,210
tab, and let's enter 'docker logs',

153
00:05:48,360 --> 00:05:50,280
and here will be 'images-

154
00:05:50,310 --> 00:05:53,965
gallery_api_1'.

155
00:05:53,965 --> 00:05:56,400
And here in this output, I see

156
00:05:56,400 --> 00:05:58,560
output that Flask 'Detected change

157
00:05:58,620 --> 00:06:01,620
in '/app/main.py'' file. Notice

158
00:06:01,620 --> 00:06:04,230
that this main.py a file is located

159
00:06:04,260 --> 00:06:06,330
inside of the 'app' folder inside of

160
00:06:06,330 --> 00:06:08,490
the container, because container

161
00:06:08,490 --> 00:06:10,710
actually does not know whether it

162
00:06:10,710 --> 00:06:12,720
is external file mapped to the

163
00:06:12,720 --> 00:06:15,030
container or it is internal file

164
00:06:15,150 --> 00:06:16,920
that was actually created during

165
00:06:16,920 --> 00:06:18,690
the image build process. It doesn't

166
00:06:18,690 --> 00:06:21,600
matter at all. But there was change

167
00:06:21,630 --> 00:06:24,210
in this file, and Flask application

168
00:06:24,300 --> 00:06:26,880
after detection of such change was

169
00:06:26,880 --> 00:06:29,490
reloaded. And this log actually

170
00:06:29,490 --> 00:06:31,830
comes from a new request that we

171
00:06:31,830 --> 00:06:34,050
just made in the web browser. Let's

172
00:06:34,050 --> 00:06:36,210
modify here 'query', and let's set it

173
00:06:36,210 --> 00:06:38,880
for example to 'phone' like that, I

174
00:06:38,880 --> 00:06:41,430
get the response "word": "phone"; and here

175
00:06:41,460 --> 00:06:43,050
if I have a look at logs once

176
00:06:43,050 --> 00:06:45,660
again, I see one more GET request

177
00:06:45,660 --> 00:06:47,220
to the new-image endpoint with

178
00:06:47,220 --> 00:06:50,640
'query=phone'. Wonderful. Autoreload

179
00:06:50,670 --> 00:06:52,860
works in our 'api' service, and

180
00:06:52,860 --> 00:06:54,600
basically, you don't require to add

181
00:06:54,660 --> 00:06:57,330
any environment variables for API

182
00:06:57,330 --> 00:06:59,490
Flask application, as we did for

183
00:06:59,490 --> 00:07:01,740
React application, it is enough to

184
00:07:01,740 --> 00:07:04,230
add just volumes mapping, like that.

185
00:07:05,040 --> 00:07:07,170
Great. Let's exit from bash shell

186
00:07:07,170 --> 00:07:10,080
here in this tab. And now actually,

187
00:07:10,080 --> 00:07:12,570
we have volumes mapping both for React

188
00:07:12,570 --> 00:07:15,180
application and Flask API service.

189
00:07:15,900 --> 00:07:17,370
Before wrapping up this lecture,

190
00:07:17,370 --> 00:07:18,900
let me undo changes made in the

191
00:07:18,900 --> 00:07:21,000
main.py file, and let me remove

192
00:07:21,030 --> 00:07:23,400
this 'return' statement like that,

193
00:07:23,550 --> 00:07:25,950
and save changes. And now if I go

194
00:07:25,950 --> 00:07:27,900
back to web browser and refresh

195
00:07:27,900 --> 00:07:30,090
page here, I should get JSON

196
00:07:30,090 --> 00:07:32,190
response from the Unsplash. And

197
00:07:32,190 --> 00:07:34,650
yes, here it is. Flask application

198
00:07:34,680 --> 00:07:37,320
was reloaded again after a change

199
00:07:37,350 --> 00:07:40,230
in the main.py file. Great. Now

200
00:07:40,260 --> 00:07:41,460
after the small pause let's

201
00:07:41,460 --> 00:07:43,530
summarize what we configured in

202
00:07:43,530 --> 00:07:45,780
terms of volumes mapping, and also

203
00:07:45,780 --> 00:07:47,370
I will demonstrate to you how to

204
00:07:47,370 --> 00:07:49,830
enable auto restart feature for

205
00:07:49,830 --> 00:07:52,110
both services frontend and api.

206
00:07:52,410 --> 00:07:53,508
I'll see you in a bit.

207
00:07:53,508 --> 00:07:55,925
[no audio]