In the last video we got our application working on our local machine so remember we're normally not
going to run this on a local machine.
We just did it very quickly for testing purposes.
The owner mentioned very quickly is that we created two different component files and we wrote them
out as plain javascript not typescript.
Next j US has support for typescript.
However if we use it on this particular application we would essentially be losing more than we would
be gaining.
So the react application we're building here is simple enough that using typescript would not really
give us a lot of benefits but we would have to add in a lot more extra effort to annotate a ton of types
that are floating around.
In particular we have to add in a lot of annotations for next J.S. and so to be honest with you if we
use typescript here we have spent D amount of time just trying to tell typescript about what was going
on with next.
And that's not really a super great use of time inside this course.
So we're just gonna keep it simple and use javascript instead.
We are so going to use typescript on all the backend services.
However all right.
So with that quick disclaimer out of the way we're gonna focus in this video on making sure that we
can run our next J S application inside of our Cuban cities cluster.
So to do so we need to make sure that we can build an image out of this client project.
We're going to set up a deployment file inside of our info okay its directory and a couple other odds
and ends here and there.
Let's first get started by making sure that we can build an image out of this client project.
Remember any time we want to build an image we create a docker file so inside that client directory
I'm going to make a new file called Docker file.
Don't forget the capital D on their and then inside of here we're gonna write out some configuration
or some steps very similar to the one we did back over here or our ticketing application or something
for the off service.
So we're gonna write out from node Alpine we'll set up a working directory of slash app we will copy
over the package not just on file into the working directory so don't forget the dot right there.
We will then run npm install.
We will copy over everything else inside of our source directory.
And then finally we'll set up a default command to run whenever a container is created out this image
of NPM run.
Def well then say the soccer file and close it all right.
After that we're going to also create a docker ignore file inside the client folder as well because
remember whenever we are building this image we really do not want to include that node modules directory.
Instead we want the image to build up its own set of dependencies on its own.
We're also going to list out this dot next folder.
You and I did not create that folder.
Instead it was created automatically by next when we started up the server on our local machine so inside
this client folder I'm gonna make a new file called Dot.
Do not forget the leading dot on here Docker.
Ignore and then inside there the list out node modules and dot next will then say this and close the
file now just to make sure that we wrote out the docker file and the docker ignore file correctly.
I would like to try to build out this image one time on our local machine manually if you are using
Coober Nettles through Google cloud.
As I showed you how to set that up much earlier inside this course you do not have to do this little
test build that we're about to run.
So again if you are running Ubuntu is on Google Cloud you don't have to do this little test otherwise
if you are running Cuban locally let's flip on over to our terminal to find a window that I was running
next to us in from the last video I got to stop that development server I got to make sure I'm still
inside a client directory and then I'll do a docker builds I'll tag it as my Docker I.D. slash client
and specify the current directory as the context for the built.
All right so it looks like everything was sent over correctly or I should say the package Chase on file
was we're installing couple of dependencies and after that the image should successfully be built.
OK so a good start I can take a pause right here.
We'll come back next video we'll make sure the image was built successfully and we'll start to setup
a brand new config file to deploy this next application and we'll also make a quick change to our scaffold
config file as well.