I’ve shared How to host an Angular App on GitHub. Today, I’m going to show you how to host an Angular app on Azure.

Azure release a new feature called Azure Static Web Apps. It integrates with GitHub Actions. GitHub Actions provides a native workflow for CI/CD pipeline. Build, deploy and host your static front-end app becomes a click-and-go.

The example I’m going to use is the same Angular App NSW COVID-19 Cases Tracking. If you navigate to Actions, you will find an existing Azure Static Web Apps CI/CD workflow. It is automatically generated by Azure.

Let’s get started. Login to your Azure Portal, search for Static Web Apps. In the Static Web Apps page, click the Add button. You are asked to fill in the Project Details. What’s important here is you must sign in with your GitHub account, so that you can pick up your the GitHub repository to deploy and host.

alt text

Click Next: Build. In this step, it’s crucial that you enter the right App artifact location. It is the built outputPath specified in your angular.json file. For my nsw-covid-19 app, the output path is “dist/nsw-covid-19”.

alt text

All done. Simply click Review + create. Azure will generate a new Workflow file into your GitHub repository. You can find it in the GitHub Actions. And it will trigger the CI/CD pipeline. When the build is successfully, you are able to visit your app hosted on Azure. You can find the Azure URL in your Azure portal.

Although the example I’m giving is an Angular app, but it’s the same super easy for React or other static web applications. All you have to do is pick up your GitHub repository, choose the right branch, and specifiy the right built output location. That’s it. The build, deploy process are automated by GitHub and Azure.

Azure Static Web Apps is free right now.