Building An Angular App With Azure Static Web Apps Service

A Complete Guide with an example project

Bhargav Bachina
Aug 3, 2020 · 10 min read
Azure Static Web Apps

Nowadays there are so many ways to build and deploy Angular apps such as angular with Java, Angular with Nodejs, serverless, etc. Building with Azure Static Web apps service is one of them and it is recently released by Microsoft Azure and it's in the preview mode. With this service, you can develop modern apps fast with global reach and scale.

You can accelerate your app development with a static front end and dynamic back end powered by serverless APIs. Experience high productivity with tailored local development experience, GitHub native workflows to build and deploy your app, and unified hosting and management in the cloud.

In this post, We will see how we can develop an Angular app with this service with an example frontend and backend NodeJS API calls.

  • Benefits of Azure Static Web Apps
  • With Other Frameworks
  • Prerequisites
  • Example Project
  • Create a GitHub Project
  • Configure an Azure Static Webapp In Azure
  • Folder Structure and Configuration
  • Angular Development
  • Azure Functions Development
  • How To Run the Whole Setup Locally
  • Publish the App to Azure
  • Demo
  • Summary
  • Conclusion

Benefits of Azure Static Web Apps

There are a lot of benefits to using Azure static web apps. If you are looking for a faster development and deployment process with just a git commit you would definitely check this out. Here are some of the benefits according to their website.

  • Productivity from local development to GitHub native workflows for CI/CD
  • Managed global availability for static content
  • Dynamic scale for serverless APIs
  • Streamlined management including custom domain configuration and authentication and authorization

With Other Frameworks

You can build Azure static web apps with any frontend framework. Check out the same article with other frameworks.

Prerequisites

You need to know a lot of things as prerequisites if you want to understand the Azure Static web apps service. First, you need to create two accounts: a Github account to store the source code and Microsoft Account to deploy that code using Azure static web app service. Let’s create these accounts by following the below links. You can start both for free.

Since we are building an Angular application you need to be familiar with Angular CLI, nodejs, and typescript. First, you need to install NodeJS, Angular CLI and then you can create an application with Angular CLI.

All the API code that you develop for the application will be converted to Azure functions at the time of deployment. You need to be familiar with the following. When you make API calls from your app you need to proxy those calls to API you need a Live Server extension for that.

Example Project

Here is an example of a simple todo application that creates, retrieves, edits, and deletes tasks. In a normal way, we actually run the API on the NodeJS server and you can use MongoDB to save all these tasks.

When it comes to Azure Static web apps you have to run the API with Azure Functions. We need to go through a series of steps to set it up. Let's dive into those steps in the following sections.

Create a GitHub Project

Azure Static Web Apps publishes websites to a production environment by building apps from a GitHub repository. If you don’t have a Github account it's time to create one. I created a repository for the project called angular-azure-static-web-app.

Github Repo

Configure an Azure Static Webapp In Azure

You need to create a Microsoft Azure account before you do anything. Once you log in and you can click on create a resource and select Static Web App

Static Web App

You can go to this below page gives all the necessary details such as Resource Group, name, region, etc. You should log in to your Github account under the source Control Details section and select appropriate details such as the repo, branch to trigger the action, etc.

Static Web App Setup

You can notice that I gave the same project that I created above in the Github Account. You need to give the details such as App location, API location, and artifact location. All the API code is under the folder api and when I build the Angular application all the built files are placed under the folder dist.

build details
Review and Create

Once the deployment is completed you can go to the overview page of the resource.

Resource Overview Page

After the deployment is completed the deployment automatically creates the workflow action and CI/CD pipeline like below.

Here is the complete YAML file generated by the Azure static web app service. You can notice all the details which are given in the resource creation process.

Build Details
https://github.com/bbachi/angular-azure-static-web-app/blob/master/.github/workflows/azure-static-web-apps-red-beach-06af81e0f.yml

Folder Structure and Configuration

The App’s folder structure is very important and I would recommend you maintain a separate folder for Angular and Azure Functions as below.

folder structure

Once you decide on the folder structure you need to configure and let the workflow knows where are the App code and API code in the Azure static web apps YAML file like below. Notice the app_location, api_location, and app_artifact_location in the below YAML file. Since when I build the Angular code it will be in the folder called /dist/todo-app so we need to give this location as app_artifact_location.

Azure static web app configuration file

Angular Development

Once you create the separate folder for Angular code you need to start with the following command to scaffold the Angular structure with the help of Angular CLI. We will not build the entire app here instead we will go through important points here. You can clone the entire GitHub Repo and check the whole app.

ng new todo-app

Here is the AppModule for the app and AppComponent as the bootstrap component that means this is the first component that loads in the browser.

app.module.ts

Here are the app component and HTML files. This is a simple application where you add, update, delete tasks. You can go through the GitHub repo to check the rest of the files.

App Component Files

Here is the service file which calls the API, in this case, Azure Functions. We have four API operations to get, add, edit, and delete tasks with root path /api.

app.service.ts

Run the Angular code in local with the following command which runs on port 4200 on localhost. Make sure you are in the root folder of Angular code which is todo-app here.

npm start
Angular Code running on port 4200

Azure Functions Development

Make sure you install VSCode extensions as I mentioned in the prerequisites section. Let me go through the whole creation process for one function here. Once you install those extensions.

First, you need to create a project with the Azure Functions extension in the VSCode and click on the folder icon on the top to create an Azure Functions project.

Browse the folder

You can select the api folder where all the Azure Functions code goes

Select a language

You need to select the language that you need to write functions with. In our case, select the Javascript.

Select a template for your project’s first function

Select a template HTTP trigger since we are writing an API for our angular code.

The whole process creates an Azure functions project with the following structure. It contains a package.json where you can run the project with this command npm start

Azure Functions Project Structure

This is a package.json file where the start command is defined in the scripts section.

package.json

We have four functions defined for the four API routes. Let's have a look at the todos-get function. We have two files for each function: index.js and function.json.

index.js

Every function has an index.js file as the starting point and receives HTTP requests and context objects and sends an HTTP response back. You can access the HTTP request and response through the context object. You can import other files into this for the processing, database access layer, etc.

index.js

function.json

Every function has a function.json file which defines the route, type of HTTP method, directions of the request, and response objects. For example, This is the get request and the direction is in with the req object. The object is res for the direction out.

function.json

You have the route called todos in the JSON file that means when you start the Azure Functions with this command func start you can access on http://localhost:7071/api/todos

Access the API in the browser

Here are the helper files that act as a database and can be used with all the functions.

helper files

Once you have all the functions in place and you can just start and test all the functions. You can see all the functions ready when you run the command npm start

Azure Functions start

How To Run the Whole Setup Locally

Now you have the Angular app running on port 4200 and the Azure functions running on port 7071. All you need to add proxy.conf.json to have an interaction between these.

Local Development

Here is the proxy.conf.json where you define the Azure functions API URL. All the calls that start with context path /api will be redirected to Azure functions API.

Running the entire setup locally

Publish the App to Azure

Once everything is working as expected in the local environment. It’s time to push it to Azure and test it out.

Since everything is configured already when you create the Github project all you need to push the code into your master branch. As soon as you push the code into the master branch Github actions trigger the build and deploy your Angular App into Azure Static web apps service. All the code under API will be converted into Azure Functions. Let’s see that in action.

static web app in action
Successful Deployment
Deployment Successful

Demo

As soon as your job is successfully done You can explore the recent deployment in the Azure portal. You can see the APIs are converted into Azure Functions.

Demo

All the API functions are converted into Azure functions you can see that on the below screen.

Azure Functions

Summary

  • Building with Azure Static Web apps service is one of the deployment strategies and it is recently released by Microsoft Azure and it’s in the preview mode. With this service, you can develop modern apps fast with global reach and scale.
  • You can accelerate your app development with a static front end and dynamic back end powered by serverless APIs.
  • You need to create two accounts: a Github account to store the source code and Microsoft Account to deploy that code using Azure static web app service.
  • Azure Static Web Apps publishes websites to a production environment by building apps from a GitHub repository. If you don’t have a Github account it's time to create one.
  • You need to create a Microsoft Azure account before you do anything. Azure static web apps service is in preview mode at the time of writing.
  • It's better to create a separate folder for Angular and API development.
  • Once you decide on the folder structure you need to configure and let the workflow knows where are the App code and API code in the Azure static web apps YAML file especially, the app_location, api_location, and app_artifact_location.
  • We need to write the API with Azure functions. Make sure you install the Azure Functions extension for Visual Studio Code, Live Server extension for Visual Studio Code, and go through these Azure Functions if you are not familiar.
  • By default, Angular runs on port 4200 and Azure functions run on port 7071 in the local development.
  • You can use proxy.conf.json to facilitate communication between Angular and Azure functions in the local environment.
  • As soon as you push the code into the master branch Github actions trigger the build and deploy your Angular App into Azure Static web apps service. All the code under API will be converted into Azure Functions.

Conclusion

Azure static Web Apps service is a great service introduced by Microsoft Azure. This is in preview mode right now. If you want to build a webapp and go from local development to production environment within minutes and take advantage of all the production-grade features out of the box. You should definitely try this service.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store