So now that we finished the MongoDB
and the backend container,
let's also talk about the frontend container again,
the React single-page application here.
Here, we also want to have live source code updates
so that if I change something in my source code,
it's automatically reflected in the running container.
For this, I'll go to the terminal
where my front-end Docker container is running.
And with Control + C, we can exit out of there.
Control + C works here
and not in a Node container, by the way,
because we started this container with the dash it option
for interactive access.
And with that, we now, well, finished that container
and it also was removed.
We only have the node, the backend,
and the MongoDB container running now.
So now I wanna start this container,
this frontend container,
such that my source code is provided in there
and changes are picked up automatically.
And that of course, screams for a bind mount.
I don't need any data persistence or anything like that,
but that bind mount would be nice to have.
So therefore we want to run our container with docker run,
but with dash v, I also wanna bind a volume, a bind mount,
and I wanna bind it to the app folder in the container,
because in this frontend Docker file,
we also have a working directory of app.
But we don't need to bind the entire folder.
We can just bind the source folder
because it actually is the source folder
in which we have our React code on which we typically work.
So I wanna bind to the app source folder
and I wanna bind it to my local host machine path.
So let's get to this path by copying it
from some file in that source folder
in the frontend project folder,
pasting this in here,
adding a colon thereafter, and let's remove that file name.
And now I bind that source folder here
to the source folder in the container.
And that should allow the container
to always be aware of the latest code changes.
Now we don't need node mod here
because the development server this project uses
is already configured to react to file changes
and rebuild the application.
So here we don't need any extra dependency
because this project set up already uses
such a watch the files and reload service.
Hence, if I now hit Enter,
this should start this application,
it should start this development server.
Hence we can reload here, but now if I change something,
for example, in the components folder, goals, CourseGoals,
if I add a h2 tag here above my card
in this course goals section, and I say, your goals.
If I save this, you see, it recompiled down there
and we see your goals here.
Okay, the styling is really off here,
but it's there at least.
We can see it better if I move it into this card component.
By the way, if you don't know React code,
that's no problem,
you can just add this h2 tag in card, save this,
and here we go.
Now I got another note for Windows users,
a note which I also had earlier in the course.
You might see that when you change a file
in your Docker container,
the development server does not reload
and does not pick up these file changes.
This happens if you are using Windows with wsl 2
to run Docker.
Now I attached to find a link to an article
where you learn how to use the Linux file system
on your Windows machine
instead of the regular Windows file system.
And you should create your project and your project files
in that Linux file system
instead of the Windows file system,
because then these changes will be picked up
by the Docker container.
So follow the steps in the article,
which you find attached,
create your project in that Linux file system
and use Docker there.
And then everything should work as shown in the lectures.
So, this now works,
and now we got this live reload
and live source code reflection
in our frontend application as well.
The last thing I wanna do here
is something related to our image building process.
I already mentioned that it takes quite long
for this frontend application.
Part of the reason is that we have more dependencies here
and therefore NPM install simply takes longer.
But another reason for that taking longer
is that we copy everything in our folder into the container
after NPM install.
And here I still have Node modules lying around
locally on my host machine.
So therefore this also gets copied into the container again,
and that takes very long.
It's unnecessary because we already created it
in the container with NPM install.
And it even has the danger
of copying in an outdated Node modules folder,
not using the latest dependencies,
which might've been installed by NPM install.
Of course we can delete Node modules here,
but maybe we're also sometimes working
on this project locally,
and therefore we need it here as well.
The solution then again is a Docker ignore file.
In there, we can, again, specify Node modules
as a to be ignored folder,
maybe also dot git and also the Docker file itself.
And if we do that, if we add this file,
image creation should be faster.
And we can test this by quitting this server
with Control + C, this container.
And then let's rebuild this image,
with Docker build dash t goals-react.
If I hit Enter, this now was way faster than before,
because we did not copy in
this unnecessary Node modules folder.
And now if I start this, it of course also still works,
so that does not change.
Here it is up and running, and everything works.
And that is how we can also optimize
this frontend Docker container a bit.