Course info
May 25, 2018
1h 1m

Play by Play is a series in which top technologists work through a problem in real time, unrehearsed, and unscripted. In this course, Play by Play: Build and Deploy Angular to the Cloud, Simona Cotin and John Papa take you through deploying an existing angular application to Azure using CircleCI and Docker. Learn how to run your application locally in a docker container, debug it using VS Code, and then push it to Azure. By the end of this course, you’ll have all the tools necessary to build and deploy Angular to the cloud.

About the author
About the author

Simona Cotin is a web developer with a passion for teaching. She spends most of her time tinkering with JavaScript in the cloud and sharing her experience with other developers at community events like meetups and conferences or online.

More from the author
Play by Play: Build a Serverless Node Web API
1h 16m
Apr 9, 2018
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Developing Faster with the Vue CLI
2h 26m
Jan 1, 2019
Angular CLI
3h 22m
Aug 31, 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi. I'm John Papa, and welcome to this Play by Play in deploying an Angular app to the cloud. In this Play by Play, myself and Simona Cotin, we're going to walk you through deploying a web app from your local machine to GitHub to CircleCI to Azure in the cloud. And this is basically going to enable us, developers, to write code and not care about anything else. That's awesome. So we hope you enjoy following along with us in this course and deploying Angular to the cloud.

Getting Started
Welcome to this Play by Play of deploying Angular to the cloud. My name's John Papa, and I'm a web developer. I'm Simona Cotin, and I'm a web developer as well. And today, we're going to talk about how you can take an Angular app and deploy that to the cloud, and we're going to look at different things along the way, such as using Docker or CI systems, running tests. But everything we're doing can work with Angular or Vue or React or, pretty much, it's very little Angular and more about the process of getting today's modern SPA applications up into the cloud. Is that right? That's correct, John.

Simona, we have decided we're going to use CircleCI as our CI platform, but tell us little bit about what are we getting out of a CI platform in general? What does it do for us? Well a CI platform basically allows your team, as it grows, to integrate their code and to also run builds and make sure that the code that they've checked in is actually correct, as well as run tests to make sure that the quality of the code is also good and is according to the requirements. And if that works or fails, we'd get notifications. We can configure all kind of stuff. Yep. And we can set up releases too, right? So we can set up releases to different environments and a lot of cool stuff. Basically, it automates the whole process of deploying and testing and building for us. Why did you choose CircleCI? Well, there's a lot of options out there, right, and I've worked also with Jenkins and Travis CI. But what I really like about CircleCI is that it has a free offering so you have like maybe 1500 minutes, but I'm not sure if that's the correct number. But it has a number of minutes free for both open source or even, like if you're a small startup, you can still use CircleCI for free. But that's not the only reason why, right? Because it also has a very nice UI and it's super easy to get started. Okay. And most important, it runs in the cloud, which means that I don't have to host my own CI. You don't have to install anything or do anything, just go to a web browser, yeah. And I don't need an actual computer to run CI. And I've used Travis quite a bit. That was like my favorite for a long time, a very similar type of style, but I've since looked at CircleCI. I do like the UI better. It feels easier to use. I've used a lot of Jenkins where I've hosted it internally or in a PaaS as well. There's so many different CI apps out there, so we're going to use CircleCI. Part of the point there is we like that one, but you can also use whatever CI program you want to build these apps. Cool.

Pushing Directly to the Cloud with Docker
Okay, so we have our Angular application and we want to push that to the cloud, and the way we're going to do that is using Docker. Okay. And we're going to need a place to store our Docker image, right? Right. And there's a few options there. One of them is Docker Hub. And in Docker Hub, you can publish your image publicly. And we also have the Azure Container Registry, which allows you to publish your images in a private repository, or if you really wanted to make it public, then that's fine as well. You can make it public. Sure. And so we can go to our Azure portal, and in order to do this we need an Azure subscription. So you can find here the link to create a new account. Okay, they have a free trial so people can sign up and try this out and pretty easily create what we're going to do right now, which is create the container registry, right?

Next Steps
We built this whole app and ran it through all of our CI process and also CD, Continuous Integration and Deployment to get it out the door and into the Azure cloud. And you've got some great resources though so everybody at home can follow along. You want to share what those are? So the first thing that we need is a CircleCI account. Okay, makes sense. And then we have to go to Azure, and we can just maybe create a free trial account just to try it out. And then, I'm going to also link you to the GitHub repository that we've just created and we've walked through. And I'm going to add some of the description and more meaningful information. Yeah, we'll update the README so people can follow at home. And it doesn't have to be an Angular app, ours is Angular, but the cool parts inside your app, the coolest parts are the Dockerfile so people can follow along. You could use your own Dockerfile. And then of course, the CircleCI YML configuration, which is important. Yeah, definitely. Hey, thank you so much for coming here and sharing all this great knowledge on how to deploy using Angular to CircleCI to Azure. Thank you for having me. Thanks for joining us.