- [Instructor] Okay, welcome back. In this lecture I'll demonstrate how to compile and package the front end into a light weight, deployable microservice using Docker. For starters I'll create an empty demo folder used to store all of the coding assets as we move forward. Next I'll clone the frontend repository into it, like so. 

I'll then navigate into the new voteapp frontend react directory, and list its contents. To get a clearer view of the project structure, I'll clear the terminal and use the tree command. From here, I'll display the contents of the package.json file as this file declares the dependencies that are used within the frontend. The main dependency of interest is the axios library, which we use to provide ajax functionality for the frontend to be able to communicate with the api servers. Next, I'll clear the terminal again and then list out the contents of the current project group folder. 

Here, take notice that the node_modules folder does not yet exist. This will be created and populated with all of the dependencies recursively, when we run the next command. Let's do this now. I'll run the command yarn install, like so. Okay, that looks good. 

All of the dependencies have now been downloaded and placed into the new node_modules directory. I'll now open the current directory up within visual code and then open up and edit the .emv file. As you can see, the .emv file contains a single react environment variable. We need to replace this with the actual real host name that we'll use within our local deployment. In this demonstration, well set this to local localhost port 8080 since we'll spin up the api on local host. Okay, we'll save this and now perform a rebuild. 

Jumping back into the terminal, we perform a rebuild by running the command yarn build, like so. Okay, that has completed successfully. Let's now examine the contents of the new build folder, which should contain all of our static frontend assets which we just created by the previous command. Here we can see the set of files which will be served to the browser when requested. Okay, we're now ready to package and create the frontend Docker image. Clearing the terminal, we'll quickly examine the Docker file which contains the Docker image packaging commands. 

As you can see, we're simply going to base our Docker image on the official nginx Docker image. This will prove us with the nginx web service. We then copy in the build folder, created by the yarn build command. We copy this into the default directory that nginx is configured to serve from. Okay, let's kick off the Docker build for the frontend and tag it like so. I'll run the command Docker build, dash T for tag, cloudacademy frontend version one. And now if we examine the local Docker images we'll see our new version one frontend Docker image. Okay, that completes the build and packaging sequence for the frontend micro service.