No, we are running both services front end and the 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 not try to default, ensure that you are no running water containers.
If I enter Docker, please, I will see dos containers here up and running.
No, let's go to gold here and let's modify it.
For instance, front and application.
Let's go to front and let's go to components and let's open up search dogs file and here.
Let's modify, for example, text on the bottom and let's modify it from search your search image like
that.
Let's see what changes.
Go to a browser and refresh page here, and I still see your search text on this bottom.
But I expect to see search image.
And no, of course, those changes are not reflected inside of the container because now, instead of
the Docker compose file, we are basically running static images that we are built using the corresponding
Docker files here for API and here for front end.
But our goal is to use Docker compose containers in order to proceed with further development this way.
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 then Docker world.
We could achieve that by using volumes and we could map folders from our computer, namely front and
folder and API folder to the corresponding containers.
And after such mapping, any changes, for instance, in storage, the file will be reflected in corresponding
source, but just file inside of the container.
And if you use Docker while you're making Docker will overwrite contents of a specific folder inside
of the container by contents on your computer.
Let's first map volume to all front and application.
And let's add one more instruction here on the disk volumes like that.
Here on the next line, let's at following commanding miners here will be it's less front end like that.
Next, please ED column and here will be less up.
Get such folder is a working directory inside of the container whispers if it using rock duo instruction
in corresponding Docker file and notice that here was absolute path to this folder inside of the container.
And here was a relative path.
It was a folder with application files.
This where, for instance, search the file is located inside of the front and folder.
And now using such instruction, we actually map our local front and folder on our computers to the
up folder inside of the container.
And after such instruction contents of the up folder inside of the container, we'll be actually overridden
by contours of the front and folder, and changes of the files inside of the front and 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 edit here before this one, and it will be minus list up list note modules like that.
And with such instruction place, we will keep load modules folder inside of the up folder.
Inside of the container contents of this Load Modules folder will not be overridden by contents of the
Node Modules folder from the front and folder.
Sounds complicated, but that's what we need to do in order to correctly handle load modules folder
inside of the container.
We'll give that we create load modules folder inside of the container after this step in the Docker
file we installed or dependencies inside of the image.
And this way we need to keep load modules folder inside of the container as it was doing in which build
process and we should not overwrite laud modules folder inside of the container by node modules for
dropped from the front and folder.
This way, we should add such instruction here.
Less up less north models, this how we could perform volumes mapping for front and application.
Let's see what changes here in this book are composed YAML file and now we need to use Docker compose
down and ARP 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.
Stop in images, gallery API and stop images.
Gallery front and.
Donohue are done here removing both containers removed network.
You've seen this process before, and now let's start containers over again.
Docker compose up and less around them in background.
That's the option.
Read Network.
Now you will see matter.
Just great in containers.
Great images.
Go to EPA.
Great images, gallery front and.
I see see daughter would like to access files in your desktop folder, and that means that no doctor
tries to access files inside of the Images Gallery folder, actually that is located on the desktop,
in my case with grant access, OK?
And front and container was started successfully.
Let's have a look at the current containers.
Doctor bills and I see two containers up and running.
Let us know.
Check what has changed after this.
Volumes may happen.
Let us go through the 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 bottom is no search image.
But notice that we did not rebuild actual image for our front end application.
We just mapped files from our local computer to the container list, not try to modify text on this
button once again.
Let's go to search logs and modified to search back again.
Like that?
We'll see changes in this file.
Go back to web browser and in a while I see the text on the bottom was changed and it was actually live.
Or Lord, we are excretes using Cotterell Reload just applied.
Those changes that we made in the search logs 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 image as gallery front and one connect to
this container.
And we already know that there was no best executable available in this Lord Jesus alpine image that
we used as base image for this image.
This way, we will use short sell.
So let's connect to the front and container.
Docker exec.
This idea here will be named as a container image as gallery front and one in your case.
If you have the same folder, name, image, gallery and same service name, this container name will
be exactly the same as you'll see here and here type.
So we are starting short sale process here as additional brought in one container.
And no end in sight, I was up working directory inside of the container as before.
It contains different files like Docker File Package, The Jason and Arzuros.
And also there was a sort of sea folder.
Let's not try to observe contents of the storage bags file instead of the SRT folder.
Let's use Scott's command called SIRC.
Less components, less storage bugs.
And here I search text inside of the bottom tech.
Let's now go to the U.S. Code and modify this text again.
Search image like this?
And let's go back here and with contents of the source of the gas file again.
And now I see it modified contents.
And this because no container actually has happened to the file search dogs on your computer due to
volume was weapon, 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 Lord Modules folder remains same as it was built, Broaddus of the actual font and image.
That's what this line actually does for us.
But all the files inside of the font and folder on your computer are no mapped to the folder inside
of the container.
I hope that idea is clear, and now we are able to proceed with the development of the front end application
without rebuilds of actual image after each change of the code base.
Now let's undo changes made in the source of the gas file, and let's go back to text search on the
bottom.
Save changes go back to the web browser and ensure that your image will be changed to search.
Let's wait a bit.
Actually, now I don't see changes of the text on this bottom.
And from time to time, it might happen and it is possible to fix this issue if it happens on your computer
as well.
Use the environment variable set up that we could add in the Doga compose file and let them demonstrate
to you how to fix that out of the small box.