1
00:00:04,610 --> 00:00:09,710
No, we are running both services front end and the API using Docker compose.

2
00:00:10,490 --> 00:00:14,840
And you know how to start all services simultaneously and how to stop them.

3
00:00:15,380 --> 00:00:17,870
Also, you know how to run them in background.

4
00:00:18,530 --> 00:00:22,980
But let's not try to default, ensure that you are no running water containers.

5
00:00:23,060 --> 00:00:27,290
If I enter Docker, please, I will see dos containers here up and running.

6
00:00:27,800 --> 00:00:31,270
No, let's go to gold here and let's modify it.

7
00:00:31,270 --> 00:00:33,140
For instance, front and application.

8
00:00:33,590 --> 00:00:41,000
Let's go to front and let's go to components and let's open up search dogs file and here.

9
00:00:41,030 --> 00:00:48,830
Let's modify, for example, text on the bottom and let's modify it from search your search image like

10
00:00:48,830 --> 00:00:49,070
that.

11
00:00:49,670 --> 00:00:50,870
Let's see what changes.

12
00:00:51,290 --> 00:00:58,550
Go to a browser and refresh page here, and I still see your search text on this bottom.

13
00:00:58,880 --> 00:01:01,520
But I expect to see search image.

14
00:01:01,910 --> 00:01:08,660
And no, of course, those changes are not reflected inside of the container because now, instead of

15
00:01:08,660 --> 00:01:15,800
the Docker compose file, we are basically running static images that we are built using the corresponding

16
00:01:15,800 --> 00:01:20,270
Docker files here for API and here for front end.

17
00:01:20,960 --> 00:01:27,720
But our goal is to use Docker compose containers in order to proceed with further development this way.

18
00:01:27,740 --> 00:01:35,060
Such feature as hot reload is necessary for us and we want to see changes made in the code base immediately

19
00:01:35,060 --> 00:01:35,470
here.

20
00:01:35,900 --> 00:01:39,500
Same applies to the API service and then Docker world.

21
00:01:39,500 --> 00:01:48,140
We could achieve that by using volumes and we could map folders from our computer, namely front and

22
00:01:48,140 --> 00:01:52,730
folder and API folder to the corresponding containers.

23
00:01:53,360 --> 00:02:01,070
And after such mapping, any changes, for instance, in storage, the file will be reflected in corresponding

24
00:02:01,070 --> 00:02:03,680
source, but just file inside of the container.

25
00:02:04,130 --> 00:02:09,949
And if you use Docker while you're making Docker will overwrite contents of a specific folder inside

26
00:02:09,949 --> 00:02:13,430
of the container by contents on your computer.

27
00:02:14,000 --> 00:02:17,690
Let's first map volume to all front and application.

28
00:02:18,140 --> 00:02:23,210
And let's add one more instruction here on the disk volumes like that.

29
00:02:24,150 --> 00:02:33,180
Here on the next line, let's at following commanding miners here will be it's less front end like that.

30
00:02:33,630 --> 00:02:37,290
Next, please ED column and here will be less up.

31
00:02:38,250 --> 00:02:45,460
Get such folder is a working directory inside of the container whispers if it using rock duo instruction

32
00:02:45,480 --> 00:02:52,440
in corresponding Docker file and notice that here was absolute path to this folder inside of the container.

33
00:02:53,250 --> 00:02:54,960
And here was a relative path.

34
00:02:55,410 --> 00:02:57,990
It was a folder with application files.

35
00:02:58,440 --> 00:03:03,420
This where, for instance, search the file is located inside of the front and folder.

36
00:03:04,140 --> 00:03:11,580
And now using such instruction, we actually map our local front and folder on our computers to the

37
00:03:11,580 --> 00:03:13,950
up folder inside of the container.

38
00:03:14,400 --> 00:03:21,240
And after such instruction contents of the up folder inside of the container, we'll be actually overridden

39
00:03:21,360 --> 00:03:27,600
by contours of the front and folder, and changes of the files inside of the front and folder will be

40
00:03:27,600 --> 00:03:30,000
immediately reflected inside of the container.

41
00:03:30,510 --> 00:03:33,240
That's what volumes mapping does for us.

42
00:03:33,840 --> 00:03:38,400
Also, except this instruction, we need to add one more instruction.

43
00:03:38,820 --> 00:03:46,770
And let's edit here before this one, and it will be minus list up list note modules like that.

44
00:03:47,220 --> 00:03:53,820
And with such instruction place, we will keep load modules folder inside of the up folder.

45
00:03:53,820 --> 00:04:01,530
Inside of the container contents of this Load Modules folder will not be overridden by contents of the

46
00:04:01,530 --> 00:04:04,170
Node Modules folder from the front and folder.

47
00:04:04,470 --> 00:04:10,350
Sounds complicated, but that's what we need to do in order to correctly handle load modules folder

48
00:04:10,350 --> 00:04:11,460
inside of the container.

49
00:04:11,880 --> 00:04:17,970
We'll give that we create load modules folder inside of the container after this step in the Docker

50
00:04:17,970 --> 00:04:21,810
file we installed or dependencies inside of the image.

51
00:04:22,050 --> 00:04:28,800
And this way we need to keep load modules folder inside of the container as it was doing in which build

52
00:04:28,800 --> 00:04:36,090
process and we should not overwrite laud modules folder inside of the container by node modules for

53
00:04:36,090 --> 00:04:37,950
dropped from the front and folder.

54
00:04:39,000 --> 00:04:42,060
This way, we should add such instruction here.

55
00:04:42,360 --> 00:04:49,980
Less up less north models, this how we could perform volumes mapping for front and application.

56
00:04:50,490 --> 00:04:56,100
Let's see what changes here in this book are composed YAML file and now we need to use Docker compose

57
00:04:56,100 --> 00:04:59,730
down and ARP commands in order to apply this change.

58
00:05:00,150 --> 00:05:07,590
Let's go to the terminal and here in the images gallery folder type Docker compose down.

59
00:05:08,340 --> 00:05:10,230
Let's bring down both containers.

60
00:05:10,590 --> 00:05:13,860
Stop in images, gallery API and stop images.

61
00:05:13,860 --> 00:05:14,790
Gallery front and.

62
00:05:15,790 --> 00:05:20,080
Donohue are done here removing both containers removed network.

63
00:05:20,350 --> 00:05:24,760
You've seen this process before, and now let's start containers over again.

64
00:05:24,880 --> 00:05:27,990
Docker compose up and less around them in background.

65
00:05:28,000 --> 00:05:29,080
That's the option.

66
00:05:29,620 --> 00:05:30,580
Read Network.

67
00:05:30,910 --> 00:05:31,750
Now you will see matter.

68
00:05:31,750 --> 00:05:33,040
Just great in containers.

69
00:05:33,520 --> 00:05:34,390
Great images.

70
00:05:34,390 --> 00:05:35,260
Go to EPA.

71
00:05:35,600 --> 00:05:37,480
Great images, gallery front and.

72
00:05:38,930 --> 00:05:44,830
I see see daughter would like to access files in your desktop folder, and that means that no doctor

73
00:05:44,830 --> 00:05:50,290
tries to access files inside of the Images Gallery folder, actually that is located on the desktop,

74
00:05:50,290 --> 00:05:52,850
in my case with grant access, OK?

75
00:05:53,650 --> 00:05:56,620
And front and container was started successfully.

76
00:05:57,010 --> 00:05:58,940
Let's have a look at the current containers.

77
00:05:58,960 --> 00:06:02,440
Doctor bills and I see two containers up and running.

78
00:06:02,950 --> 00:06:03,430
Let us know.

79
00:06:03,430 --> 00:06:05,430
Check what has changed after this.

80
00:06:05,450 --> 00:06:06,500
Volumes may happen.

81
00:06:07,060 --> 00:06:13,470
Let us go through the web browser and refresh page here, as usually after every Docker compose up command.

82
00:06:13,480 --> 00:06:19,600
When containers are created from scratch, you need to wait a bit until React Scripts, finishes, creation

83
00:06:19,750 --> 00:06:21,020
of the development build.

84
00:06:21,700 --> 00:06:27,880
And now finally, I see that web page was updated and text on this bottom is no search image.

85
00:06:28,330 --> 00:06:34,150
But notice that we did not rebuild actual image for our front end application.

86
00:06:34,330 --> 00:06:41,560
We just mapped files from our local computer to the container list, not try to modify text on this

87
00:06:41,560 --> 00:06:42,700
button once again.

88
00:06:43,180 --> 00:06:47,620
Let's go to search logs and modified to search back again.

89
00:06:47,800 --> 00:06:48,330
Like that?

90
00:06:48,730 --> 00:06:50,380
We'll see changes in this file.

91
00:06:50,800 --> 00:06:58,180
Go back to web browser and in a while I see the text on the bottom was changed and it was actually live.

92
00:06:58,180 --> 00:07:02,200
Or Lord, we are excretes using Cotterell Reload just applied.

93
00:07:02,200 --> 00:07:06,790
Those changes that we made in the search logs file for better clarity.

94
00:07:06,790 --> 00:07:11,770
Let's connect to the container and observe contents of the app folder inside of it.

95
00:07:12,370 --> 00:07:19,090
Let's list containers now and using such container name as image as gallery front and one connect to

96
00:07:19,150 --> 00:07:20,110
this container.

97
00:07:20,350 --> 00:07:26,170
And we already know that there was no best executable available in this Lord Jesus alpine image that

98
00:07:26,170 --> 00:07:28,210
we used as base image for this image.

99
00:07:28,720 --> 00:07:30,880
This way, we will use short sell.

100
00:07:31,480 --> 00:07:33,590
So let's connect to the front and container.

101
00:07:33,700 --> 00:07:34,720
Docker exec.

102
00:07:34,900 --> 00:07:40,150
This idea here will be named as a container image as gallery front and one in your case.

103
00:07:40,360 --> 00:07:46,330
If you have the same folder, name, image, gallery and same service name, this container name will

104
00:07:46,330 --> 00:07:50,260
be exactly the same as you'll see here and here type.

105
00:07:50,470 --> 00:07:55,660
So we are starting short sale process here as additional brought in one container.

106
00:07:56,630 --> 00:08:01,850
And no end in sight, I was up working directory inside of the container as before.

107
00:08:01,880 --> 00:08:06,230
It contains different files like Docker File Package, The Jason and Arzuros.

108
00:08:06,740 --> 00:08:08,540
And also there was a sort of sea folder.

109
00:08:09,290 --> 00:08:14,840
Let's not try to observe contents of the storage bags file instead of the SRT folder.

110
00:08:15,590 --> 00:08:18,260
Let's use Scott's command called SIRC.

111
00:08:18,590 --> 00:08:21,890
Less components, less storage bugs.

112
00:08:22,910 --> 00:08:27,770
And here I search text inside of the bottom tech.

113
00:08:28,640 --> 00:08:32,780
Let's now go to the U.S. Code and modify this text again.

114
00:08:33,200 --> 00:08:34,940
Search image like this?

115
00:08:35,720 --> 00:08:39,980
And let's go back here and with contents of the source of the gas file again.

116
00:08:40,970 --> 00:08:43,280
And now I see it modified contents.

117
00:08:43,970 --> 00:08:51,950
And this because no container actually has happened to the file search dogs on your computer due to

118
00:08:51,980 --> 00:08:59,270
volume was weapon, and all changes in the files on your local computer here are immediately reflected

119
00:08:59,420 --> 00:09:00,770
inside of the container.

120
00:09:01,460 --> 00:09:05,540
That's what we achieved by using such instructions as here.

121
00:09:06,460 --> 00:09:13,660
But Lord Modules folder remains same as it was built, Broaddus of the actual font and image.

122
00:09:14,380 --> 00:09:16,870
That's what this line actually does for us.

123
00:09:17,770 --> 00:09:25,030
But all the files inside of the font and folder on your computer are no mapped to the folder inside

124
00:09:25,030 --> 00:09:25,870
of the container.

125
00:09:26,710 --> 00:09:32,320
I hope that idea is clear, and now we are able to proceed with the development of the front end application

126
00:09:32,560 --> 00:09:37,630
without rebuilds of actual image after each change of the code base.

127
00:09:38,350 --> 00:09:43,720
Now let's undo changes made in the source of the gas file, and let's go back to text search on the

128
00:09:43,720 --> 00:09:44,170
bottom.

129
00:09:44,340 --> 00:09:50,230
Save changes go back to the web browser and ensure that your image will be changed to search.

130
00:09:50,770 --> 00:09:51,550
Let's wait a bit.

131
00:09:52,710 --> 00:09:55,830
Actually, now I don't see changes of the text on this bottom.

132
00:09:56,250 --> 00:10:03,270
And from time to time, it might happen and it is possible to fix this issue if it happens on your computer

133
00:10:03,270 --> 00:10:03,810
as well.

134
00:10:03,960 --> 00:10:09,930
Use the environment variable set up that we could add in the Doga compose file and let them demonstrate

135
00:10:09,930 --> 00:10:11,790
to you how to fix that out of the small box.