Building An Angular App With Azure Static Web Apps Service
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
- 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
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.
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.
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.
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
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.
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.
Once the deployment is completed you can go to the overview page of the resource.
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.
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.
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.
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.
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.
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.
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.
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
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
This is a package.json file where the start command is defined in the scripts section.
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.
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.
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.
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
Here are the helper files that act as a database and can be used with all the functions.
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
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.
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.
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.
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.
All the API functions are converted into Azure functions you can see that on the below screen.
- 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.
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.