[Intro Music]
We successfully configured the
'volumes' mapping for the frontend
application. And we verified that
such mapping actually works. And
files inside of the 'app' folder,
inside of the container are
synchronized with files inside of
the frontend folder on your local
computer. And using such an
environment variable, 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 now React application is
rebuilt on the fly each time when
you modify some JavaScript files in
your React application. And
basically, before adding 'volumes'
mapping for the 'api' service. Let's
go to the frontend 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 have a look at
logs of the frontend container.
And 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 I make any
changes in the React application.
Let's quickly go back to the 'Search.js'
file for instance, and modify
something here. 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 is actually how hot
reload feature works now after
volumes mapping. Alright, let's
clear terminal here, and let's
proceed with volumes mapping
configuration here in the 'docker-
compose' file. Before that, let me
remove this empty line like this.
Alright, let's now add volumes
mapping for the api service, and we
will do that in similar way as we did
for frontend application. Here
will be 'volumes:', like that.
And on the next line, let's map
'./api' to the '/app'. We
gave that '/app' is a working
directory inside of the 'api'
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 to the container.
Let's know save changes, and let's
run '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 add option '-d',
detached. Notice that 'images-
gallery_frontend_1 is up-to-
date', there was no need to restart
it. But Docker is 'Recreating images-
gallery_api_1', because its
configuration was modified. Okay,
this container was recreated. 'docker
ps', there are still two different
containers. And now let's verify
whether changes in the 'api' folder
will be reflected inside of the
container or not. For that, let's
open up a bash shell session to the
'api' container, this one, and for that
we will use command 'docker exec'.
Let's copy the name of the
container. 'docker exec -it',
name of the container, 'bash', we are
starting a bash shell process, and
here inside of the 'app' folder,
let's for instance, have a look at
the contents of the main.py file.
And here we see current contents of
the main.py file. Let's now try to
modify main the PDF.py file here in
the 'api' folder.
Let's go there, open main.py 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 response
from the api service. Now, let's try
to modify main.py file and see
whether changes will be
reflected or not. Let's modify for
example, this new_image function
here. Look at that in this function,
we make a request to the UNSPLASH,
and afterwards we return data to
the client as a proxy actually. Let
me actually after this word,
immediately return dictionary "word",
and its value will be 'word' like
that. And of course, all those
statements will not be executed.
Let's now save changes. Saved. Let's
first verify whether the changes
are now seen inside of the container.
Here let's open Bash shell,
let's read contents of the main.py
file again. And I see here updated
file. Here is this return
statement. It means that the files
were synchronized correctly. And
now container has updated version
of the main.py file. Let's now
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 a response "word":
"car". And that means that actual
Flask application was also
restarted after making changes in
the main.py 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-
gallery_api_1'.
And here in this output, I see
output that Flask 'Detected change
in '/app/main.py'' file. Notice
that this main.py a file is located
inside of the 'app' folder inside of
the container, because container
actually does not know whether it
is external file mapped to the
container or it is internal file
that was actually created during
the 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 log actually
comes from a new request that we
just made in the web browser. Let's
modify here 'query', and let's set it
for example to 'phone' like that, I
get the response "word": "phone"; and here
if I have a look at logs once
again, I see one more GET request
to the new-image endpoint with
'query=phone'. Wonderful. Autoreload
works in our 'api' service, and
basically, you don't require to add
any environment variables for API
Flask application, as we did for
React application, it is enough to
add just volumes mapping, like that.
Great. Let's exit from bash shell
here in this tab. And now actually,
we have volumes mapping both for React
application and Flask API service.
Before wrapping up this lecture,
let me undo changes made in the
main.py file, and let me remove
this 'return' 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 Unsplash. And
yes, here it is. Flask application
was reloaded again after a change
in the main.py file. Great. Now
after the small pause let's
summarize what we configured in
terms of volumes mapping, and also
I will demonstrate to you how to
enable auto restart feature for
both services frontend and api.
I'll see you in a bit.
[no audio]