Deploying Angular with Vercel

[00:00:00]
>> So, when we talk about development or deploying applications, there are what I would consider three viable options for doing this. So the first viable option is generating your static files and putting them somewhere and serving them up. I would say one of the most viable targets for that, and I use it fairly frequently is S3.

[00:00:30]
Is that when you generate your Angular application that you can take those files and you can put them into S3 behind a CDN. And it's highly, highly performant. And so I would say for deploying an Angular application, that one of the best ways to do that. And this is with any React, or any of these, is that if you're just generating static files that exist within your dist folder, you can pick those up even put them into S3.

[00:01:03]
And you can point a CDN to it, and you are absolutely good to go. Because you're just rendering files, you're just serving them up. Where you would need to do something different is that if you're doing like server side rendering. Which if SEO is a concern for your application, and it's not often, but it is a thing that you can use server side rendering to increase your performance.

[00:01:36]
Now that is where I would put like that into a Dockerfile. And then I would deploy that. And because you have to have a server typically express that's rendering those things and then serving that up. But if you don't have that, or you're not actually doing server side functionality, a very viable candidate is to just put your Angular application in S3 behind a CDN Cloud in this case, and you're good to go.

[00:02:04]
Now, which leads to I think on the other side is that, you put your Angular application into Docker and you deploy it. Now there's kind of an intermediate step that I think is really, really good. And you have these platforms like Heroku, Vercel which I think was now or a site previously, that you very quickly can kind of put those things up and deploy them.

[00:02:31]
And so, one of the sites that I use on a semi frequent basis it's actually for sale. So I always knew it as Zeit, but I just want to quickly show this example. So what this allows you to do, and I have a pro trial now but there's a free plan, is that you're able to plink this to your GitHub repo.

[00:03:02]
So essentially, I just allowed it to grab the repo. And then from here, under the hood, is it set up a bunch of stuff and essentially deployed this for me. And so I can go under the hood here, and everything that we're seeing here is the same exact things that we saw from our trusty command line as we are running this.

[00:03:32]
And so this is when we're running this and we're building this that what we're seeing in our command line, it's essentially doing in the Cloud. And so it's basically building this and it is deploying it. So not only am I able to build to a specific or build it and deploy, but I can actually do it against branches.

[00:03:57]
And so if I go back here, you can see that is I push up these branches that it's going to generate a deployment for that branch. Which I think is pretty cool. And from here, I can just click on this Deployment link and from here go ahead and click on this and you can see this application.

[00:04:26]
Now the one piece that I haven't hooked up that would not be hard to do is doing the same thing for the API. But you'll notice here that I have deployed this into a publicly accessible domain, and this was incredibly easy. It took me less than, I would say five, ten minutes, or less.

[00:04:52]
And the only thing that I had to do is, let me see if I can pull this up, that within this project I had to, here we go. So the one thing that I had to change to get this to work is you notice it has a framework preset, which is awesome that I had to set my output directory to, well, where's it being built to?

[00:05:20]
So I just overrode that. And I was able to then point it to dist/app/dashboard, done. And what I could do is even go into here and take this. And I could in theory and I don't know if I want to do this immortalize this forever. But you could go in here, override this, and do ng build--prod, and save that make it even better.

[00:05:54]
So there's ways to configure that. So this is a real quick example. This is using Vercel which was designed for a very, very long time but you have your constatic deployment option. Then you have your Docker option, which we'll show in just a moment how to build that and then kind of what we can do with that.

[00:06:11]
And then in the middle of that, we have platforms like Vercel, Heroku, even DigitalOcean that allows you to very quickly what I would consider kind of these intermediate platforms, to go ahead and deploy that. And so when I'm working with developers, and we're working through concepts, that it's not enough to just build an application and submit the repository for me that I also want them to deploy it somewhere.

[00:06:41]
And so I've used Zeit now for sale for a long time for this. So it's really, really handy when you're developing and sharing your work with even QA or to a stakeholder that not only do you build the application or you submit the code. But it's built, and then it's done in such a way that when you want to communicate that it is working.

[00:07:09]
Then all I have to do is say, hey, QA engineer or whatever, I've went ahead and I've implemented this feature. Can you click on this app and verify that it works? And so this is an example that I think it's important using Vercel or use Heroku. But Vercel is a really quite a good platform for just hooking it into your GitHub repo.

[00:07:35]
And once you point it to that right distribution directory is that you essentially get this for free.