-: In the last section,
we generated a brand new React project.
In this section we're gonna learn how to work around
with this project just a little bit,
in case you're new to the NodeJS or ReactJS world.
Again, we're not really quite so much focused on the code
that is running inside the container.
We're really much more interested in
how this container is going to interact
with the outside world.
So with that in mind, I'm gonna first change
into the directory that was created
when we just generated our project.
So remember we called our project Front End.
So I'm gonna change into that thing.
And then inside of here we're going to run a couple
of different commands to understand
how we're going to interact with the project.
The three commands that we're going to need to be aware of
and these are commands that we're gonna run several times
as we develop this entire workflow,
are npm run start, run test and run build.
Npm run start is a development only command.
It starts up a development server
which is used to host our application
and make it available inside of our web browser.
Now it's very important to note that this development server
that is created is very much a development server.
It is not appropriate for use in production.
And so when it gets to figuring out how we're going
to take the Docker container
and deploy it to the outside world,
well, we're definitely gonna have to do a little bit
of follow up on that side of things.
The next command to be aware of is npm run test
which is used to run any tests
that are associated with the project.
When we generate our React project,
it automatically gets one or two tests created for us.
We're not gonna add any additional tests
because of course this is not a course about testing
or ReactJS or anything like that.
Instead, we're just going to run those tests
and say, "Okay, we know how to run tests."
Really much more concerned about tests here in the context
of making sure that we only deploy our application
if all the tests are successfully passing.
The last command that we need to be aware of
for right now is npm run build.
This command is used to take all the JavaScript files
that are tied to the project
and essentially can catenate them all down
into one single file
that can then be served in a production environment.
Let's very quickly run each of these commands,
just to make sure that we're familiar with how they work,
because understanding them
is gonna be just a little bit important later on.
Now when I say, just a quick aside here,
in case again you're not from the React world
or JavaScript world.
When I say understand these commands,
I don't mean to say you have to understand like
how JavaScript works or how ReactJS works.
I just mean to say understand that if we want
to run our application in a development environment,
we have to run this command.
Again, knowledge of React here, really not required one bit.
All right, so, first off, we'll try running our test.
To run the test, we'll execute npm run test, like so.
That's gonna start up a test runner.
We're gonna see our one test pass
and it looks like, yep it's good to go for right now.
We can then press Q and that will exit the test runner.
We'll then try npm run build.
So I'll enter npm run build, again,
inside of my front end directory.
When I execute that,
it'll say creating a optimized production build.
Again, this is going to take all of our different files
and essentially just kind of compact them all down
into a single file.
We can then list out all of our files and folders.
You'll notice that there is now a build directory.
This folder was not there before.
If I look inside the build directory,
I'll see that I have a index.html file
and a static directory.
Inside of the static directory
is, well, it's kind of nested in there,
but somewhere inside of there is a JavaScript file.
This represents the actual JavaScript
that is our application.
And so at some point in time, we're going to want
to serve up this index.html file and JavaScript file
from some AWS instance or some AWS service.
Now last command is npm run start.
Again, that's gonna start up a development server.
So I'll execute npm run start like so.
That's going to automatically open a tab inside
of your browser, at local host 3000,
and you'll see the default React application appear.
All right, so that is, again,
all you really need to know about the application.
For right now, we've got a command
to start up the thing in development.
We got a command for tests
and we got a command to get the thing ready
to be ran in a production environment.
I'm sure you can kind of imagine how there are analogs
or very close analogies to each of these commands
with other languages as well.
So if you're making use of Ruby on Rails,
well, npm run start is very similar to like Rails s, right?
And if you're making use of say, Go,
there's a handful of builders out there
to run your application and development
but to actually build your application
where you would normally run something like go build,
well, here we're going to instead run npm run build.
So the whole point here is
that we have some very specific set of commands
that get us ready for development,
get us ready for tests and get us ready for production.
All right, So let's take another quick pause right here
and we're gonna start thinking about how we're going
to wrap up our application inside of a docker container
that is appropriate for development,
specifically development purposes.
So quick break and I'll see you in just a minute.