-: In last section,
we tried making use of that volume switch on Docker run,
but we very quickly saw
an error message appear in the terminal.
So lemme tell you about exactly what occurred.
So like we just said,
when we make use of that volume command
we're essentially setting up a mapping
between a file or folder inside the Docker container
and a file or folder
on the local folder system on your machine.
The issue here is that when we set up
that binding or that volume, we said, take everything.
Well, let's go look at the diagram one more time right here.
We essentially said,
take everything inside of our present working directory
and map it up to the app folder inside of our container.
The issue with that
is that inside of our current directory right here,
you'll notice that we do not presently have
a node_modules folder.
So when we try to take everything inside of here
and map it into that app folder,
well, we don't have a node_modules folder,
which is where all of our dependencies exist.
So the node_modules folder inside the container
essentially got overwritten.
We had a node_modules folder over there.
We can kind of imagine that it was right here.
But when we set up that mapping,
we said, hey, you know what?
Anytime you tried to reference node_modules,
just go ahead and try to look at the copy of node_modules
that is back inside of the front end folder.
And as you very well know
we just deleted that folder a moment ago.
And so we get this reference that points back to
essentially nothing on the local operating system.
Now, there's a very easy fix to this.
All we have to do is pass in an additional -v flag
and as the only argument or the only folder path on there
we'll say app/node_modules.
Notice how in this case we did not put in a colon
right there, right?
No colon on the first one.
When we use the colon syntax
we're trying to say that we want to map up
a folder inside the container
to a folder outside the container.
When we do not use the colon
and we just list a folder inside the container,
we're essentially saying we want this to be a placeholder
for the folder that is inside the container.
Don't try to map it up against anything.
So you can imagine that
by putting in -v app/node_modules right here
we're saying, this folder set in stone,
don't try to mess with it.
Don't try to map it up against anything else.
Let's try running our Docker run command again,
but we're gonna add on this -v for our app node_modules
and hopefully we're gonna see
that everything works as expected.
So I'm gonna go back over to my terminal.
I'm gonna do an up arrow
on my terminal to get the most recent command
and I'm gonna go back before the first -v
and I'll add on -v/app/node_modules like so.
So now I'm gonna run this
and we're gonna very quickly
see that our project starts up as expected.
So starting the development server,
and there we go, running on port 3000.
So again, the trick here was recognizing
that when we use the -v flag
we're essentially trying to say
anytime that the container tries to access
something in the app directory,
it's gonna reach back out of the container
to the current or the present working directory
on our local machine.
That was a big issue because we did not want to somehow
overwrite access to the node_modules
that we had already installed into our container.
So we should now be able to go back over to our browser,
go to local host 3000, refresh the page,
and we'll see Hi There up here.
Now here's where things get really interesting.
If I go into my code editor again
and open up the SRC directory, and find the app.js file,
we can now make a change to this.
So I'll say,
Bye There, I'll save the file,
and then if I flip back over, you'll notice
that the text gets automatically reflected on the screen.
If you don't see that automatic change
you should be able to refresh the page manually
and see the new text appear.
Now, just to be clear,
when the text refreshes here automatically
that's a function of create-react-app.
So that's just how React works.
It will automatically refresh changes,
but in order to get those automatic refreshes going
the React server needs to see
the changes to the files that we are making.
And so clearly, by setting up this volume,
any changes that we make to our local file system
essentially get propagated into our container,
the running container.
The React server inside that running container
sees the change and it updates the page.
So that's pretty much it.
We've now got a solution that's going to recognize changes
that we're making to our files and folders
inside of our project directory
and propagate them inside the container.
So this is definitely an important step forward.
Let's take a quick pause right here
and continue in the next section.