Narrator: In the last section,
we solved a little issue with duplicate dependencies.
I now want to try taking this image ID right here
and creating a container out of it
and then just making sure that we can access
our development server.
So I'm gonna copy that ID and I'll execute Docker Run
and then I'll paste that ID in.
Now when I run that, we're gonna very quickly
see our development server start up
and then we get a message right here that says,
we can access our development server
by visiting localhost:3000
So let's try that out in our browser right now.
We'll make a new tab and go to localhost:3000.
And when I do, I see, "This site can't be reached."
So remember this is a little gotcha
that we saw much earlier in the course.
Anytime that we want to expose a port
from our Docker image or the Docker container
to our machine,
we have to add on that -P flag
to map out the ports that we want to expose
so I'm going to take port 3000 on my local machine
and map it up to port 3000 inside the container.
I'll then still paste the container ID,
excuse me the image ID right after.
Let's try running that again.
We're gonna see the development server start up
and again we see starting up on localhost 3000.
And now if I flip back over,
chances are you'll see the page automatically refresh.
If it doesn't, you can manually refresh
and you should see the welcome message appear right here.
Okay, so that's definitely a good start.
I now wanna try making a little bit of a change
to the source code of the react project
and just see what occurs.
In my terminal, excuse me, my code editor,
I'm going to open up the SRC directory
and then I'll find the app.js file.
Inside of here, you can scroll down a little bit
and see the text that shows up on the lower half
of the screen inside the browser.
So it says, "To get started, edit source app.js."
That is the text that shows up right here in the browser.
So let's try replacing that text
and just seeing what happens.
So I'm gonna highlight that entire line,
I'll delete it and I'm gonna replace it
with something like, hi there, like so.
So I'm gonna save that
and then if I go back over to my browser
and refresh the page, well, of course there's no change.
Remember, this is what we saw before.
When we start up our image
or when we initially create the image,
we're essentially taking a snapshot
of all of the source code inside of our project directory
and we're building our image with that snapshot.
So if we want to somehow get changes to be reflected
inside of our container after we make them,
we need to either rebuild the image
or figure out some clever solution.
Well of course, we probably do not want to rebuild the image
every time we make a change to our source code.
So let's take a quick pause right here.
We're gonna come back the next section
and figure out a clever solution
to make sure that any changes that we make
to our source code get automatically propagated
into the container as well.
So quick break and I'll see you in just a minute.