Mini talk - Containerize the Front End of an Application with a Multi-Step Docker Build

Instructor: [0:00] In the last lessons, you saw how to use containers and how to create one for your backend. Now's the time for more advanced container images. In this lesson, we will actually use a container to build our container. This is called a multi-stage build.

[0:17] For your frontend, a Vue.js application, it has been created from the CLI. Vue.js, just like React and Angular applications, have a development mode, as well as a production mode.

[0:30] When you started the frontend at the beginning of this course, you used, npm run serve. This is a development server that is built with Node.js. It watches your files for changes, and it's optimized to recompile the application and refresh your browser automatically.

[0:48] When you're building your React application, you have a similar set up. You can use the Create React App CLI tool to build the skeleton for your application. This skeleton will include not only the base files for your application, but also a full development environment with a server that watches your files for changes and refreshes your browser automatically.

[1:11] These tools are great for development purposes. It makes it much quicker to see the resulting application and is way better suited for debugging.

[1:21] Once your application is ready to deploy though, you won't want to use the same set up. This development environment is somewhat slow and has a lot of code that is not used. There's no need to watch your files for changes in production, they shouldn't change.

[1:37] Ideally, for your production server, you would like to ship a minified version of your code. This will cut down the download time to see the initial page.

[1:48] Some build scripts will even perform tree shaking, which is a method to find all the code that is not used in your application and simply remove it. Some CSS frameworks and tooling like Tailwind, can also check your code for unused classes and automatically remove them.

[2:06] Finally, you will want your application to be usable by the greatest number of users possible, so you might need to add in some additional prefixes to your CSS styling, or some patches to support some JavaScript features on older browsers.

[2:21] To do this, you will need to run a script to build your production application. This script will take all of your JavaScript files and merge everything into a single minified JavaScript file. It will do the same for your CSS. It might also perform some transpiling and some other tasks like the tree shaking for you.

[2:39] By doing so, you will end up with a minimal set of files. Typically, a single HTML, JavaScript, and CSS file for a total of only three files to download. These files can be hosted just about anywhere. Since this course is about containers, we'll be using an Nginx container to serve those files.

[3:00] Nginx is an open source high-performance HTTP server that will be able to handle many requests to your frontend. When building our frontend container, we will not only want a container that has Nginx and are minimal HTML, CSS, and JavaScript files, but not the full Node.js front times and the source code. This is why we will use a multi-step build.

[3:25] The first step, we'll use a container with node.JS to create the files. Its sole purpose is to run this build script and to create that production version, those three files. The second step will create your Nginx server, and the three files that were generated in the first step will be transferred to that second container.

[3:46] The container that was used to generate your production files will then be discarded and you will only be left with that second container, which is lightweight and optimized for the web. You can use multi-stage containers to perform various operations on your source code and then copy the output to the next step.

[4:04] You can even create your own CI/CD pipelines by running multiple steps inside a Docker build. The resulting image will only be the last image that was created, and all the additional overhead from the previous steps is discarded.