-: We've now put together an implementation
for npm run start and npm run test.
It's now time to think about how we're gonna treat
our Docker container in a production environment
where we're supposed to eventually be running npm run build.
I want you to remember that npm run build
is going to build a production version of the application.
Essentially it takes all the JavaScript files,
processes them all together, puts them all together
into a single file and then spits it out
to a folder on your hard drive.
And this is actually a pretty important distinction
because it really changes the mechanics
behind how our application is served up
in a development and production environment.
Let me show you a diagram or two to help you understand why.
Okay, so this is a diagram of how our application runs
in a development environment.
Inside of our web container, we have a development server.
Whenever our browser makes a request to port 3000
on local host, it's really making request
to that dev server.
The development server then takes a index HTML file,
a main.js file or some otherwise JavaScript file
and sends it back over to the browser.
So the development server is 100% required
in the development environment.
It's what facilitates processing all that JavaScript
and then eventually serving it up to the browser.
Now again, when we move over to the production environment,
this dev server falls away.
It just does not exist.
We instead run npm run build one time
and that gives us essentially that index.html file
and the main .js file that we need to somehow communicate
down to our user's browser.
As a quick aside, this development server falls away
because it's really not appropriate to be running
in a production environment.
It has a ton of processing power inside of it
dedicated to processing these JavaScript files
that we're putting together,
and that's something that we do not need to do
when we are running in production,
because we're no longer making any changes
to the JavaScript code of our project.
So, what we need for our production environment
is some type of server here whose sole purpose
is going to be to respond to browser requests
with that index HTML file and some random JavaScript file
that contains all the React application code.
So we need to essentially put something together here
that's just gonna take incoming requests
and respond to them with those different files.
To solve this, we're going to be making use
of a server called NGINX.
NGINX is an extremely popular web server.
It doesn't have a lot of logic tied to it.
It's really just about taking incoming traffic
and somehow routing it or somehow responding to it
with some static files,
which is exactly what you and I are going to use it for.
So we are going to create a separate Docker file
that is gonna create a production version
of our web container.
This production version of the web container
is gonna start up an NGINX instance
and we're gonna use that NGINX server
to produce, or, excuse me, to serve up
our index HTML and that main .js file.
So let's take a quick pause right here.
We're gonna come back the next section
and we're gonna start putting together
the Docker file that is gonna make the production version
of our web container.