[Intro Music]
Now we are running both services
frontend and api using 'docker-compose'.
And you know how to start
all services simultaneously and how
to stop them. Also, you know how to
run them in background. But let's
now try to do the following. I'm sure that
you are now running both
containers. If I enter 'docker
ps', I will see those
containers here up and running. Now
let's go to code here. And let's
modify for instance, frontend
application. Let's go to frontend,
let's go to 'components', and then
let's open up 'Search.js' file.
And here let's modify for example,
text on the bottom, and let's
modify it from 'Search' here to
'Search Image', like that. Let's save
changes, go to a browser and
refresh the page here. And I still
see here 'Search' text on this
button, but I expect to see 'Search
Image'. And now of course, those
changes are not reflected inside of
the container, because now inside
of the 'docker-compose' file, we are
basically running static images
that we have built using
corresponding Dockerfiles, here
for api and here for frontend. But
our goal is to use 'docker-compose'
containers in order to proceed with
further development. That's why
such feature as hot reload is
necessary for us. And we want to
see changes made in the code base
immediately here. Same applies to
the api service and in Docker
world, we could achieve that by
using 'volumes', and we could map
folders from our computer, namely,
'frontend' folder and 'api' folder to
the corresponding containers, and
after such mapping any changes, for
instance in Search.js file
will be reflected in corresponding
Search.js file inside of the
container. And if you use Docker
volume mapping, Docker will
overwrite contents of a
specific folder inside of the
container by contents on your
computer. Let's first map volume to
our frontend application, and
let's add one more instruction
here that is called 'volumes', like
that. Here on the next line, let's
add following mapping, '-', here
will be './frontend', like
that, next please add ':', and
here will be '/app', we get the
such folder is working directory
inside of the container. We
specified it using
instruction in corresponding Dockerfiles.
And notice that here is
absolute path to this folder inside
of the container. And here was a
relative path to the folder with
application files. This is where for
instance, Search.js file is
located inside of the frontend
folder. And now using such
instruction, we actually map our
local frontend folder on our
computers to the 'app' folder inside
of the container. And after such
instruction, contents of the 'app'
folder inside of the container will
be actually overridden by contents
of the frontend folder, and
changes of the files inside of the
frontend folder will be
immediately reflected inside of the
container. That's what volumes
mapping does for us. Also, except this
instruction, we need to add one
more instruction, and let's add it
here before this one, and it will
be '-/app/node_modules'
like that, and with such
instruction in place we will keep 'node_modules'
folder inside of the 'app'
folder inside of the container.
Contents of this 'node_modules'
folder will not be overridden by
contents of the node_modules folder
from the frontend folder. Sounds
complicated, but that's what we
need to do in order to correctly
handle node_modules folder inside
of the container. Look at that we
created node_modules folder inside
of the container. After this step in
the Dockerfile, we installed all
the dependencies inside of the image.
And that's why we need to keep node_modules
folder inside of the
container as it was during image
build process. And we should not
override node_modules folder inside
of the container by node_modules
folder from the frontend folder.
That's why we should add such
instruction here '/app/node_modules'.
This is how we could perform volumes
mapping for frontend application.
Let's save changes here in this
'docker-compose.yml' file. And now
we need to use 'docker-compose down'
and 'up' commands in order to apply
this change. Let's go to the
terminal. And here in the 'images-
gallery' folder, type 'docker-compose
down'. Let's bring down both
containers, 'Stopping images-gallery_
api', and 'Stopping images-gallery_
frontend'; 'done' here; 'done' here,
removing both containers, removing
network. You've seen this process
before. And now let's start
containers over again, 'docker-
compose up', and let's run them in the
background, '-d' option.
'Creating network'. Now, you will see
message as 'Creating containers',
'Creating images-gallery_api_1,
'Creating images-gallery_frontend_1'.
Here, I see prompt, "Docker" would
like to access files in your
Desktop folder; and that means that
now Docker tries to access files
inside of the images-gallery
folder actually, that is located on
the Desktop in my case. Let's
grant access. 'OK'. And frontend
container was started
successfully. Let's have a look at
the current containers, 'docker ps',
and I see two containers up and
running. Let's now check what has
changed after this volumes mapping.
Let's go first to web browser,
and refresh page here. As usually
after every 'docker-compose up'
command, when containers are
created from scratch, you need to
wait a bit until React scripts
finishes creation of the
development build. And now finally,
I see that web page was updated,
and text on this button is now
'Search Image'. But notice that we
did not rebuild actual image for
our frontend application, we just
mapped files from our local
computer to the container. Let's
now try to modify text on this
button once again. Let's go to
Search.js, and modify it to
'Search' back again, like that. We'll
save changes in this file, go back
to a browser, and in a while I see
the text on the button was changed
and it was actually live reload.
React scripts using hot reload
just applied those changes that
were made in the Search.js
file. For better clarity, let's
connect to the container and
observe contents of the 'app' folder
inside of it. Let's list
containers now. And using such
container name as 'images-gallery_
frontend_1', connect to this
container. And we already know that
there was no bash executable
available in this Node.js Alpine
image that we used as base image
for this image. That's why we will
use 'sh' shell. So, let's connect to the
frontend container, 'docker exec
-it', here will be the name of
the container, 'images-gallery_frontend_1'
In your case
if you have the same folder name,
'images-gallery', and same service
name, this container name will be
exactly the same as you see here.
And here type 'sh'. We are starting
'sh' shell process here as additional
process in running container. And now
I'm inside of the 'app' working
directory inside of the container.
As before, it contains different
files like Dockerfile, package.
json, and others. And also there was
'src' folder. Let's now try to
observe contents of the Search.js'
file inside of the 'src' folder.
Let's use 'cat' command, 'cat src
/components/Search.js';
and here I see 'Search' text inside
of the 'button' 'jsx' tag. Let's now go
to the VS Code and modify this text
again, 'Search Image' like that. And
let's go back here. And with
contents of the Search.js file
again. And now I see modified
contents. And that is because now
container actually has mapping to
the file Search.js on your computer
due to volumes mapping. And all
changes in the files on your local
computer here are immediately
reflected inside of the container.
That's what we achieved by using
such instructions as here. But node_modules
folder remains same as it
was during the build process of the
actual frontend image. That's what
this line actually does for us. But
all remaining files inside of the
frontend folder on your computer
are now mapped to the 'app' folder
inside of the container. I hope
that idea is clear. And now we are
able to proceed with further
development of the frontend
application without rebuilds of
actual image after each change of
the code base. Now let's undo
changes made in the Search.js
file, and let's go back to text
'Search' on the button, save changes,
go back to the web browser, and
ensure that 'Search Image' will be
changed to 'Search'. Let's wait a
bit. Actually now I don't see
changes of the text on this button.
And from time to time it might
happen, and it is possible to fix
this issue if it happens on your
computer as well using an
environment variable setup that we
could add in the 'docker-compose'
file; and let me demonstrate to you
how to fix that after the small pause.
[no audio]