DEV Community

Wai Liu
Wai Liu

Posted on • Updated on

Deploying Angular apps to Azure Static Web apps

Introduction

Azure Static Web Apps is a perfect hosting option for SPA frameworks like Angular or React.

The best thing is it's going to be free (or at least dirt cheap if you have a highly trafficked site) but not only that it contains a whole host of goodies out of the box. This includes the following

Content Delivery Network

Your files are served from edge servers so wherever your users are, there should be minimal latency.

CI/CD Pipelines

As development teams try to increase their velocity, one critical prerequisite is the ability to deploy quickly, automatically and consistently and to do that, you need to build CI/CD pipelines. This can sometimes be an afterthought, but with azure Static Web apps, this is the default. You have to specify your Github / DevOps repo as part of spinning one up and it automatically creates a Github Action / Pipeline for you.

Multi deployment environments

The "static" in Static Web Apps implies files (eg. HTML, JS or CSS or other asset files) that do not change - at least not without a deployment. This means it's really easy to create environments for different versions of them. This is built out of the box - you can easily spin up a new environment to test the changes of a PR or have dedicated test or UAT environments. It's all very flexible and very easy to implement.

Demonstration

Rather than explaining how it works in detail, it's much easier for me to just show you in the attached video. In this video, I'll be showcasing the features of Azure Static Web App to deploy a sample Angular solution. Feel free to like or subscribe!

Finally, the codebase can be viewed here

Top comments (0)