1 00:00:04,560 --> 00:00:09,900 We successfully configured the Bolden's mapping for the front end application, and we verified that 2 00:00:10,050 --> 00:00:17,380 such mapping actually works and files inside sidles up folder inside of the container arts and realized 3 00:00:17,400 --> 00:00:24,180 with files inside of the front and folder on your local computer and using such environment very well. 4 00:00:24,390 --> 00:00:31,160 We fixed any potential synchronization errors that might occur and basically now react. 5 00:00:31,170 --> 00:00:37,910 Application works in the same way as before when we used just npm start command in order to run it locally 6 00:00:37,920 --> 00:00:40,680 in development mode and not react. 7 00:00:40,680 --> 00:00:47,520 Application is rebuilt on the fly each time when you modify some JavaScript files in your React application 8 00:00:48,030 --> 00:00:53,910 and basically before adding volumes may happen before the API service, let's go to the front and container 9 00:00:53,910 --> 00:00:56,790 and let's have a look at logs produced by that container. 10 00:00:57,300 --> 00:01:01,020 Let's go to the terminal and here let's enter Docker logs. 11 00:01:01,350 --> 00:01:06,840 And here will be the name of the running container name in your case is exactly the same as mine. 12 00:01:07,260 --> 00:01:07,800 This one? 13 00:01:08,280 --> 00:01:10,710 Let's go look at logs of the front and container. 14 00:01:11,070 --> 00:01:19,020 At the end of the output, I see several compiling and compiled successfully sections, and this log 15 00:01:19,050 --> 00:01:26,010 is produced by React scripts each time when hot reload feature is applied, each time when they make 16 00:01:26,010 --> 00:01:28,260 any changes in the React application. 17 00:01:29,220 --> 00:01:33,690 Let's quickly go back to that short digest file, for instance, and modify something secure. 18 00:01:33,990 --> 00:01:37,590 For instance, let's add here one more empty line like that and save changes. 19 00:01:38,010 --> 00:01:40,980 Let's go back here and observe logs once again. 20 00:01:41,890 --> 00:01:46,030 And now I see additional compiling compiled successfully section. 21 00:01:46,570 --> 00:01:50,840 And this actually how Hotel of Future works now after volumes mapping. 22 00:01:51,780 --> 00:01:52,170 All right. 23 00:01:52,470 --> 00:01:56,880 Let's clear terminal here, and let's proceed with volumes, map and configuration. 24 00:01:57,050 --> 00:01:58,680 You're in the Docker compose file. 25 00:01:58,950 --> 00:02:01,710 Before that, let me remove this empty line like this. 26 00:02:02,310 --> 00:02:02,730 All right. 27 00:02:03,060 --> 00:02:07,950 Listen, I'll add volume may happen for the API service and we will do that in a similar way, as we 28 00:02:07,950 --> 00:02:09,479 did for front and application. 29 00:02:09,720 --> 00:02:12,300 Here will be volume skill like that. 30 00:02:12,750 --> 00:02:18,510 And on the next line, lift map dots, less API tools, it's less up. 31 00:02:19,330 --> 00:02:26,140 We give that up is a working directory inside of the FBI container, internal working directories inside 32 00:02:26,140 --> 00:02:28,780 of the containers here and here are the same. 33 00:02:29,020 --> 00:02:32,260 But of course, containers here and here are completely different. 34 00:02:32,860 --> 00:02:35,620 But here now we will map API folder. 35 00:02:36,250 --> 00:02:43,270 This folder from our local computer tool, the container lists no save changes and left around Docker 36 00:02:43,270 --> 00:02:43,810 compose. 37 00:02:44,260 --> 00:02:51,310 Let's go to the terminal and you could run it by entering Docker compose up like that without bringing 38 00:02:51,310 --> 00:02:54,460 all containers down and then bringing them up again. 39 00:02:54,850 --> 00:02:59,160 So Docker compose up and let's here at option desk deep detached. 40 00:03:00,090 --> 00:03:03,400 Notice that image as gallery front and one is up to date. 41 00:03:03,430 --> 00:03:10,780 There was no need to restart it, but Docker is recreating images gallery API because its configuration 42 00:03:10,780 --> 00:03:11,660 was modified. 43 00:03:12,370 --> 00:03:12,780 OK. 44 00:03:13,060 --> 00:03:18,520 This container was recreated Docker because there are still two different containers. 45 00:03:19,030 --> 00:03:25,330 And no, let's verify whether changes in the API folder will be reflected inside of the container or 46 00:03:25,330 --> 00:03:25,570 not. 47 00:03:25,960 --> 00:03:31,330 For that, let's open up best sell session to the API container this one. 48 00:03:31,750 --> 00:03:34,050 And for that, we will use Docker exec. 49 00:03:34,300 --> 00:03:37,610 Let's go up in name on the container Docker exec. 50 00:03:37,630 --> 00:03:40,450 This idea name of the container best. 51 00:03:40,630 --> 00:03:45,100 We are starting Bessel process and here inside of the UP folder. 52 00:03:45,100 --> 00:03:48,400 Let's, for instance, have a look at the contents of the main file. 53 00:03:48,760 --> 00:03:51,880 And here we see current contents of the main file. 54 00:03:52,420 --> 00:03:56,950 Let's not try to modify it to a file here in the API folder. 55 00:03:57,220 --> 00:03:58,060 Let's go there. 56 00:03:58,210 --> 00:03:59,800 Open minded API file. 57 00:04:00,370 --> 00:04:06,700 And before actual modification, let's go back to web browser and here in the new tab here I actually 58 00:04:06,700 --> 00:04:07,480 have such step. 59 00:04:07,840 --> 00:04:12,640 Let's make request to the new image endpoint that is available in the Flask Web server. 60 00:04:13,030 --> 00:04:14,230 Let's make this query. 61 00:04:15,010 --> 00:04:18,220 And I successfully received a response from the API service. 62 00:04:19,180 --> 00:04:25,060 No, let's try to modify Main to try a file and see whether the changes will be reflected or not. 63 00:04:25,840 --> 00:04:29,670 Lift, modify, for example, this new image function here. 64 00:04:30,460 --> 00:04:31,750 We kept adding this function. 65 00:04:31,760 --> 00:04:33,690 We make request to ask less. 66 00:04:33,850 --> 00:04:38,260 And afterwards, we at dawn data to the client as a proxy, actually. 67 00:04:39,210 --> 00:04:48,330 Let me actually, after this award, immediately return dictionary world and its value will be a world 68 00:04:48,330 --> 00:04:48,780 like that. 69 00:04:49,320 --> 00:04:52,680 And of course, all those statements will not be executed. 70 00:04:53,310 --> 00:04:55,350 Let's not say what changes saved. 71 00:04:55,950 --> 00:05:02,040 Let's first verify where changes are now seen inside of the container here was opened. 72 00:05:03,300 --> 00:05:08,550 Let's read the contents of the main file again, and I see here updated the file. 73 00:05:08,700 --> 00:05:10,680 Here was this written statement. 74 00:05:11,160 --> 00:05:17,430 It means that the files where are synchronized correctly and now container has updated version of the 75 00:05:17,430 --> 00:05:18,540 manual to a file. 76 00:05:19,080 --> 00:05:24,900 Let us know verify whether actual application is still working and whether it was updated or not. 77 00:05:25,560 --> 00:05:28,170 Let's go back here and refresh this page. 78 00:05:28,590 --> 00:05:30,570 And now I get the response report card. 79 00:05:31,170 --> 00:05:38,570 And that means that actual flask application was also restarted after making changes in demand to a 80 00:05:38,610 --> 00:05:39,060 file. 81 00:05:39,870 --> 00:05:42,990 Let's have a look at logs of the API container. 82 00:05:43,350 --> 00:05:45,150 Let's do that here in the separate tab. 83 00:05:45,690 --> 00:05:48,090 And let's enter Docker logs. 84 00:05:48,390 --> 00:05:53,580 And here will be images this gallery underscore API underscore one. 85 00:05:54,550 --> 00:06:01,630 And you're in this output icy out with that flask, detect a change in the up made by a file, nor does 86 00:06:01,870 --> 00:06:08,920 this made by a file is located inside or up for the inside of the container, because container actually 87 00:06:08,920 --> 00:06:15,970 does not know whether it is external file left to the container or does internal file that was actually 88 00:06:15,970 --> 00:06:18,160 created during image build process. 89 00:06:18,190 --> 00:06:19,510 It doesn't matter at all. 90 00:06:20,260 --> 00:06:27,530 But there was change in this file and flask application after detection of such change was reloaded. 91 00:06:28,210 --> 00:06:33,370 And this look actually comes from new request that we just made in the web browser. 92 00:06:33,880 --> 00:06:38,500 Let's modify your query and let's set it, for example, to form like that. 93 00:06:38,710 --> 00:06:39,590 I got the response. 94 00:06:39,610 --> 00:06:40,300 What form? 95 00:06:40,630 --> 00:06:47,250 And here, if I have a look at logs once again, I see one more request with a new image and point with 96 00:06:47,260 --> 00:06:48,220 query form. 97 00:06:48,940 --> 00:06:49,540 Wonderful. 98 00:06:49,860 --> 00:06:52,540 Author Lord works in our API service. 99 00:06:52,690 --> 00:06:58,810 And basically, you don't require to add any environment variables for API or flask application, as 100 00:06:58,810 --> 00:07:00,610 we did for React application. 101 00:07:00,880 --> 00:07:08,590 It is enough to add just volumes, maybe like DEP wait lists exit from best secure in this step. 102 00:07:09,040 --> 00:07:15,100 And no, actually we have volumes both for reactor application and flask API service. 103 00:07:15,970 --> 00:07:21,010 Before wrapping up this last year, let me undo changes made in the main file and looking to remove 104 00:07:21,070 --> 00:07:24,670 this written statement like that and save changes. 105 00:07:25,210 --> 00:07:31,470 And now, if I go back to web browser and refresh page here, I should get JSON response from the US 106 00:07:31,480 --> 00:07:38,200 blessed and years here with this flask application was reloaded again after a change in the main drive 107 00:07:38,260 --> 00:07:44,780 file right now, after the small both, let's summarize what we configured in terms of volumes mapping. 108 00:07:45,070 --> 00:07:51,430 And also I will demonstrate to you how to enable out or restart feature for both services, front end 109 00:07:51,430 --> 00:07:52,090 and API. 110 00:07:52,420 --> 00:07:53,290 I'll see you in a bit.