Let us know, Darius, our front and react application.
And we will do that in a similar way as we have done that for a service, we will create Docker file
and put.
There are several instructions as a ways in which we will use more the GC image.
Please go to have the Docker dot com and source here for Node.
Click on Source Search Result and you'll find Docker official image gold note.
If you scroll down here, you'll find which tags are supported.
And here was a long, long list of text, and I'll choose last Node.js version available at this moment
of time and the IS 15. 14.0 you could choose as well.
Or you could go ahead with newer version and notice that for the same version, there are different
suffixes like Alpine Master Bastos, Slim Ostrich and Low Lay.
The stack points actually to the stretch version, but we will actually utilize Alpine version because
Alpine is the smallest Norges image oil Docker hub and it will be enough for our purposes.
So I'll go ahead with this stack.
15. fought in this alpine and it will be our base image.
So let's go to gold and the go to all front end application.
Let me actually close this Docker file and close minded player file.
I don't need them now.
And let's modify it folder and expand front and folder.
And here in the root of the front and folder, let's create a Docker file Docker file.
And similarly, as we did in Docker file for API service, Thorson's fraction here will be from.
And here we specify ways in which we want to build our custom image on.
So let's hear Edenfield colon and deck.
We'll be 15. Fraud in this Alpine 15. for this Alpine like did this first step in our Docker build process
on the next step, let's set a working directory similarly, as we did for API service.
And let's set here same folder less op like that.
It is internal folder inside of the image.
And here in this folder, Docker will place all our application files.
All right, let's afterwords expose fraud using exposed instruction, and our front end application
is run at Port three thousand.
This way, let's expose this brought here three thousand like that.
After world, we need to install all project dependencies using npm, as we did in front end application.
For that, we used command npm install, and it created such folder as node modules folder with all
dependencies of the front and application in order to install all dependencies.
First, we need to copy it to files, namely package, but Jason and Package this logged the Jason to
the image.
This way, first, let's use here copy instruction copy and on the single line, let's go to files package
to JSON and package this look the JSON, and let's copy them to destination working directory inside
of the image using DOT for what's less syntax.
All right.
After the step two files will be inside of the image and we are able to run npm install a command.
That's why let's use Orion instruction and run npm install.
And also, let's add here option for npm gold does the silent because usually npm generates a lot of
output during installation of the packages and during the build process, you could simply omit all
those logs using this option, this desk silent.
So after this around step, all dependencies will be installed inside of the image node modules folder.
Inside of the image will be created and npm will install all dependencies listed here in the package.
Look, Jason, the file we own the copy package, this logo, the Jason the file, because it lists
exact versions of all dependencies that need to be installed.
And this way, npm will install inside of the Docker image exactly the same packages as we've installed
locally in our front end application here in this node modules folder.
So dependencies will be installed on this step.
And afterwards, let's copy all remaining application files using syntax Scorpion Dorte from current
folder to destination working directory.
And after this step, all files from all front end folder.
Both files will be copied to Destination Up folder inside of the image, and there we will have afterwords
such folder as our Aussie public and others.
All right, this are all steps that we need to build image and of course, afterwards, at the end of
this Docker file, we need to add some deconstruction and tell which brought us needs to be started.
When a container is.
We it based on this custom image, and we started our React application using npm start command.
And basically, I have front and application up and running now in this step in the terminal, and it
does run at Port three thousand and I could quickly go to web browser and verify whether it works or
not.
Yes, it works.
And now let me actually stop.
This brought us here.
Control see and to gain command that was used in order to start this application was npm start and this
comment or react application in development mode.
And that's actually what we need Docker containers for.
We want to continue for the development using Docker containers.
That's why we will use npm struct as command instruction and the Docker file for our React application.
Let's go back to Docker file here and add here instruction npm karma start and VM is executable.
Name and start is parameter for this executable.
And of course, such executable as npm is available here in this image because we use node as a base
image.
All right.
This ID fraud Docker file for our front end React application.
And next up to the small balls.
Let's go ahead and build our custom front and react Docker image.
I'll see you guys just in a moment.