In the last section we did a little bit of reconciliation.
So if you skipped over all the source code files, hopefully you now have a complex directory.
And inside there is the client server and worker folders.
And each of those folders represent the react server, the express API and the worker process as well.
We're now going to start the process of adding Docker containers to each of these applications, so
that we can start each of them up inside of a development environment.
So we're going to take the react project, the express API and the worker as well.
And we're going to make dev Docker files for each one.
Now the key thing here that I want to make sure is really clear at this point we are focusing on development
versions of Docker containers for each one.
So I want to make sure that we have a smooth development process.
We're not just going to skip all the way to the end here of deploying everything out to production.
That would make life a little bit too easy.
So we're going to first make kind of development versions of containers for each of these applications,
and make sure that there is a very smooth workflow.
So in other words, I want to make sure that if I make some change to some code inside of, say, the
client project or the server project.
I want to make sure that I don't have to rebuild my entire image to get those changes into effect,
because that's a really slow development workflow.
We don't want to have to rebuild an image every time that we make one little change to the source code
of a project.
So in practice, what does that mean?
Well, it means that we need to look at the project files inside of each of those directories.
And inside of each of them, we're going to set up a pretty similar Docker file workflow.
Remember that each one of these projects is probably going to have a package.json file that records
all of the dependencies of our project.
So we're going to copy over that package.json file as step number one.
We're then going to run an npm install and then we'll copy over everything else.
The last thing to keep in mind is that we're going to set up a Docker compose file.
And that docker compose is going to set up volumes for each of these projects, so that we kind of share
all of the source code inside of each project.
And that's what's going to make sure that we don't have to rebuild our image entirely from scratch every
time that we make one tiny little change.
Okay, so with all that in mind, let's get started right now.
I'm going to find my terminal and I'm going to start up my code editor based on that complex directory.
Now again quick reminder here.
I've set up the code command line tool so that I can use it directly from my command line.
If you don't have that set up.
Basically at this point you just want to open up your code editor based on that complex directory.
So you should see client server and worker.
Now, I think a good place to get started would be on a Docker file or a development docker file for
our client directory, because this project right here, we've already set up a Docker file kind of
in the last section, when we went through the deployment of the first application we put together.
So inside of my client directory I'll get started by making a new file called Docker file.dev.
Again we're making use of this added extension right here to indicate that this is a Docker file only
for use during development of our application.
Then inside of here we're going to add essentially the same exact stuff that we had before.
We're going to specify a base image of node Alpine, I'm going to set up a working directory of app.
I'm going to copy the package.json file over.
I'll run npm install.
I'll copy over everything else.
And then finally I'll run a command of npm run start like so.
So this is the same Dockerfile that we put together just a moment ago.
And we're probably going to end up using a very similar one in our other two projects as well, with
maybe just 1 or 2, 1 or 2 small little tweaks.
Now, to test this out, I'm going to flip back over to my terminal.
I'm going to run the docker build command inside of the client directory.
And I'm going to make sure that I specify the dockerfile.dev file as the Dockerfile of choice.
So back at my terminal I'll change into the client directory and I'll execute docker build.
I'm going to specify the Dockerfile to use for this by adding on the dash f flag.
I'll say docker Docker file.dev.
And then I'll put a period on to specify the build context.
And remember I'm specifying the build context right here of period.
That means use the current directory in order for everything to work the way we expect.
I have to be inside the client directory.
So this is where that whole idea of build context is going is excuse me, is going to start getting
really important.
And we'll talk in great detail about this build context stuff in just a moment as well.
Okay.
So I'm going to run that.
We'll very quickly see pulling the node alpine image.
It's then going to do the npm install.
During the npm install process you might see a warning or three warnings are totally fine, so don't
worry if you see a warning.
No issue with that whatsoever.
If you don't see any warnings, that's also totally okay.
No problem with that as well.
Now the npm install is going to take just a moment.
After that runs, it's going to execute the copy instruction and pull over all the rest of the project
files, and then start up everything inside there by setting the default command of npm run start,
which is how you start up an application that has been created with Create React app.
Now this might take a moment or two.
Okay, well it's just about done.
So let's just hold on for just a second here.
It's all done with the npm install.
So it's now going to do the copy step in just a second to pull over all the other source code files
we have inside of our project, like say the src folder and the public directory.
And then once that's all done, it'll set the default command.
And that's pretty much it.
There's our container right there.
So let's now try starting this up by running Docker run with the container ID.
So I'll do docker run and I'll paste that ID in.
We'll then see the react script start up.
We should see it starting the development server.
And then eventually the application should start up something like this right here.
Now if you see any message that says something about like an unused variable or anything like that,
anything that seems to indicate an error, that means that you very likely made a typo when we were
putting the application together.
And so you will want to go back to the last section where we downloaded that checkpoint zip file and
overwrite your files with everything from that zip file, just to make sure that you're using the exact
same code that I am.
All right.
So that's one Docker file done.
Let's take care of the other two for the server and worker projects in the next section.
So I'll see you in just a minute.