We successfully configured the Bolden's mapping for the front end application, and we verified that
such mapping actually works and files inside sidles up folder inside of the container arts and realized
with files inside of the front and folder on your local computer and using such environment very well.
We fixed any potential synchronization errors that might occur and basically now react.
Application works in the same way as before when we used just npm start command in order to run it locally
in development mode and not react.
Application is rebuilt on the fly each time when you modify some JavaScript files in your React application
and basically before adding volumes may happen before the API service, let's go to the front and container
and let's have a look at logs produced by that container.
Let's go to the terminal and here let's enter Docker logs.
And here will be the name of the running container name in your case is exactly the same as mine.
This one?
Let's go look at logs of the front and container.
At the end of the output, I see several compiling and compiled successfully sections, and this log
is produced by React scripts each time when hot reload feature is applied, each time when they make
any changes in the React application.
Let's quickly go back to that short digest file, for instance, and modify something secure.
For instance, let's add here one more empty line like that and save changes.
Let's go back here and observe logs once again.
And now I see additional compiling compiled successfully section.
And this actually how Hotel of Future works now after volumes mapping.
All right.
Let's clear terminal here, and let's proceed with volumes, map and configuration.
You're in the Docker compose file.
Before that, let me remove this empty line like this.
All right.
Listen, I'll add volume may happen for the API service and we will do that in a similar way, as we
did for front and application.
Here will be volume skill like that.
And on the next line, lift map dots, less API tools, it's less up.
We give that up is a working directory inside of the FBI container, internal working directories inside
of the containers here and here are the same.
But of course, containers here and here are completely different.
But here now we will map API folder.
This folder from our local computer tool, the container lists no save changes and left around Docker
compose.
Let's go to the terminal and you could run it by entering Docker compose up like that without bringing
all containers down and then bringing them up again.
So Docker compose up and let's here at option desk deep detached.
Notice that image as gallery front and one is up to date.
There was no need to restart it, but Docker is recreating images gallery API because its configuration
was modified.
OK.
This container was recreated Docker because there are still two different containers.
And no, let's verify whether changes in the API folder will be reflected inside of the container or
not.
For that, let's open up best sell session to the API container this one.
And for that, we will use Docker exec.
Let's go up in name on the container Docker exec.
This idea name of the container best.
We are starting Bessel process and here inside of the UP folder.
Let's, for instance, have a look at the contents of the main file.
And here we see current contents of the main file.
Let's not try to modify it to a file here in the API folder.
Let's go there.
Open minded API file.
And before actual modification, let's go back to web browser and here in the new tab here I actually
have such step.
Let's make request to the new image endpoint that is available in the Flask Web server.
Let's make this query.
And I successfully received a response from the API service.
No, let's try to modify Main to try a file and see whether the changes will be reflected or not.
Lift, modify, for example, this new image function here.
We kept adding this function.
We make request to ask less.
And afterwards, we at dawn data to the client as a proxy, actually.
Let me actually, after this award, immediately return dictionary world and its value will be a world
like that.
And of course, all those statements will not be executed.
Let's not say what changes saved.
Let's first verify where changes are now seen inside of the container here was opened.
Let's read the contents of the main file again, and I see here updated the file.
Here was this written statement.
It means that the files where are synchronized correctly and now container has updated version of the
manual to a file.
Let us know verify whether actual application is still working and whether it was updated or not.
Let's go back here and refresh this page.
And now I get the response report card.
And that means that actual flask application was also restarted after making changes in demand to a
file.
Let's have a look at logs of the API container.
Let's do that here in the separate tab.
And let's enter Docker logs.
And here will be images this gallery underscore API underscore one.
And you're in this output icy out with that flask, detect a change in the up made by a file, nor does
this made by a file is located inside or up for the inside of the container, because container actually
does not know whether it is external file left to the container or does internal file that was actually
created during image build process.
It doesn't matter at all.
But there was change in this file and flask application after detection of such change was reloaded.
And this look actually comes from new request that we just made in the web browser.
Let's modify your query and let's set it, for example, to form like that.
I got the response.
What form?
And here, if I have a look at logs once again, I see one more request with a new image and point with
query form.
Wonderful.
Author Lord works in our API service.
And basically, you don't require to add any environment variables for API or flask application, as
we did for React application.
It is enough to add just volumes, maybe like DEP wait lists exit from best secure in this step.
And no, actually we have volumes both for reactor application and flask API service.
Before wrapping up this last year, let me undo changes made in the main file and looking to remove
this written statement like that and save changes.
And now, if I go back to web browser and refresh page here, I should get JSON response from the US
blessed and years here with this flask application was reloaded again after a change in the main drive
file right now, after the small both, let's summarize what we configured in terms of volumes mapping.
And also I will demonstrate to you how to enable out or restart feature for both services, front end
and API.
I'll see you in a bit.