Containerizing Angular Applications with Docker

Learn how to build and run your Angular application code using Docker containers. Explore how to write dockerfiles for custom images, leverage multi-stage dockerfiles, container orchestration with Docker Compose, and much more.
Course info
Rating
(28)
Level
Intermediate
Updated
Jul 26, 2018
Duration
1h 55m
Table of contents
Description
Course info
Rating
(28)
Level
Intermediate
Updated
Jul 26, 2018
Duration
1h 55m
Description

The Angular CLI provides a great way to build and run Angular applications locally, but what do you do when you need to build Angular in another environment? How do you deploy your Angular application between development, staging/QA, and production environments while ensuring that everything works as planned? In this course, Containerizing Angular Applications with Docker, you'll explore the role that Docker containers can play in simplifying the process of building and deploying Angular applications. First, you'll learn about the role of images and containers, and image registries. Next, you'll discover how to write custom multi-stage Dockerfiles for building Angular code. Then, you'll delve into different server options such as nginx for running your Angular applications efficiently and consistently across environments. Finally, you'll explore how to orchestrate multiple containers using Docker Compose and .yml files. By the end of this course, you'll have the necessary knowledge to efficiently build and run Angular applications across multiple environments by utilizing Docker containers.

About the author
About the author

Dan Wahlin founded Wahlin Consulting, which provides consulting and training services on JavaScript, Angular, Node.js, C#, ASP.NET MVC, Web API, and Docker. He is a Google GDE, Microsoft MVP and Regional Director, and speaks at conferences and user groups around the world.

More from the author
Docker for Web Developers
Beginner
5h 41m
Jul 20, 2018
More courses by Dan Wahlin
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome to the Containerizing Angular Applications with Docker course. My name is Dan Wahlin, and I'm a software developer, architect, and trainer specializing in web technologies. I work a lot with Angular and Docker, so this course was especially fun to create, and I'm excited to share it with you. Throughout the course, you'll learn about the role of containers when it comes to containerizing Angular applications. We'll start off by answering the question, why use containers at all? I love working with containers, but with frontend applications there are several viable alternatives that can be used. So we'll answer the question by discussing the benefits that containers bring to the table, as well as some alternatives that exist. From there we'll jump into the role of Dockerfiles and how they can be used to create development and production images for Angular apps. This includes discussing multi-stage Dockerfiles and how they can be used to build an app and create a final image that's as small as possible. We'll also learn about a Docker extension that can be used in VS Code to simplify working with images and containers, and wrap up by showing how to run Angular with other containers by using a tool called Docker Compose. So let's get started and jump right in.

Deploying the Image and Running the Container
In this module, we're going to take a look at how we can deploy the image that we created earlier, and then run that as a container, not only locally, but also up in the cloud. So we're going to start off by talking about how do we get the Angular container running locally. Now we did something like this earlier to start the course off, so this will be a quick review of what you saw before with docker run. From there we're going to use the VS Code Docker extension, and I'll show you how we can get a container up and running very quickly by just right-clicking on an image. We'll talk about some image registry options, including Docker Hub and some of the different cloud providers. And then from there we're going to take a look at how we can deploy the Angular runtime image up to Docker Hub, and that's going to be our registry for the demos I'm going to show. The next thing we'll do is use a service that's available on Azure to pull that image down into Azure, start up the container, and then we'll hit our application that's running inside of that container. So let's go ahead and start things off by first getting our image converted into a running container locally on our development machine.

Running Multiple Containers
So up to this point in the course, you've seen how we can put an Angular app inside of a running Docker container, and that works really, really well, it's very easy to deploy that way, but what happens when you have multiple containers? How would I get those up and running? For example, I might have an Angular application that calls out to one or more RESTful services, and maybe each of those services is in its own container. Well that's the type of thing we're going to talk about in this module. So we're going to start out by talking about running an application with multiple containers using a tool called Docker Compose. And what I'll have for you in the project is the same Angular app we've been working with, which up to this point had the data kind of hard-coded into the app, but now we're going to change it so that we can call a separate RESTful service, and we're going to bring that up in another container. Once I show you how to get multiple containers up and running, we're going to talk about the Docker Compose yml files, and the services they define that will allow you to very easily build multiple images and run multiple containers. And then we're going to wrap up with some different options you can consider for deploying images and containers out to servers or out to different cloud providers. Let's go ahead and jump right in to getting the app up and running with multiple containers.