Welcome to today’s post.
I will discuss how to deploy a basic Angular application into an Azure Web App Service. Below is a typical architecture for the development and deployment for an Angular Azure application:
In our local development environment, we develop and maintain our code base using a source control system like GitHub or Azure DevOps.
When we are ready to deploy our application, we build our application as a production release, clone the remote Azure App Services git repository into our local deployment folder, move the re-built artifacts into our local deployment folder then commit and push the changes to the Azure App Services git repository.
After the changes are pushed into the remote Azure App Services git repository, the Kudu build service will apply the changes to the Azure App Service web site.
I will go through the steps as follows:
- Develop and ensure that the Angular application is tested in our local environment.
- Creation of an Azure App Service web application
- Configuring the App Service for Git deployment
- Deploying the local Angular Application to Azure using Git Deployment
Developing and Testing our Angular application locally
In this section I will give an overview on developing and testing our Angular application in our local development environment.
This is done using Visual Studio code to develop, build and test our Angular web application locally.
To develop, build and test we use the Visual Code IDE and the basic Angular CLI commands:
ng build
ng serve
Once our application has been sufficiently tested, we can then proceed to build your application:
ng build --prod
What does this build option provide?
The resulting application folder after building in prod mode will show a new folder dist as shown:
The dist folder contains the following artifacts:
- optimized JavaScript files used to run the application in the production environment.
- An assets folder:
This will contain your stylesheets and other content, such as images that are within the application’s source asset folder.
Our next task is to create a web application within an Azure App Service that will contain our web application.
Creation of an Azure App Service Web Application
Login to the Azure portal and create a web application within the Azure App Service.
Select Create a Resource. Select Web App.
Enter the app name. OS, region, and plan.
If you are using Azure for learning, choose F1 (Free Tier).
You can skip monitoring.
Enabling the Application Insights is ideal if you are deploying the application as production-ready and wish to monitor it for the first few days or weeks after deployment to gather statistics on errors, usage etc.
Confirm the parameters. Then select Create.
Once your deployment is complete, you can start configuring git deployment, which is what I will explain in the next section.
Configuring the App Service for Git Deployment
Open the newly created App Service and select Deployment Center located to the bottom left as shown:
Under Deployment Center, source control, continuous deployment (CI/CD), select Local Git and Continue.
In Build Provider, select App Service build service and continue:
Next, click Finish to build the Git repository:
Once completed, you will be shown the git clone URL:
In this case, the git Clone URL for the above app is:
https://ah-angular-wep-app-001.scm.azurewebsites.net:443/ah-angular-wep-app-001.gitWe then create a deployment user:
az login
az webapp deployment user set --user-name angularuser121120 --password [pwd]
After the above command has been run in the Azure CLI, go to the App Service overview, and notice the git deployment user has changed:
The Git clone URL is now:
https://angularuser121120@ah-angular-wep-app-001.scm.azurewebsites.net/ah-angular-wep-app-001.gitThe format of the git clone is now:
https://[deployment user]@[app service].scm.azurewebsites.net/[app service].gitIn the next section, I will show how to deploy the locally versioned Angular application to Azure using git commands.
Deploying the local Angular Application to Azure using Git Deployment
Before I show how to deploy the local Angular application source into the Azure web application using Git, we will first clone the App Service Git repository into a local folder.
Inside your repository folder, enter:
git clone https://angularuser121120@ah-angular-wep-app-001.scm.azurewebsites.net/ah-angular-wep-app-001.git
Inside your repository folder, enter (change where your deployment user and application name differ):
git clone https://angularuser121120@ah-angular-wep-app-001.scm.azurewebsites.net/ah-angular-wep-app-001.git
Enter credentials when they pop-up:
You will get a warning of cloning an empty repository, this can be ignored.
Next, copy your Angular application dist folder into the cloned folder.
Next, push and commit your application into the Azure App Service remote repository:
PS C:\Users\xxxxxxxx> cd "C:\development\angular sites\angular-azure-app-1"
PS C:\development\angular sites\angular-azure-app-1> git clone https://angularuser121120@ah-angular-wep-app-001.scm.azurewebsites.net/ah-angular-wep-app-001.git
Cloning into 'ah-angular-wep-app-001'...
warning: You appear to have cloned an empty repository.
PS C:\development\angular sites\angular-azure-app-1> cd .\ah-angular-wep-app-001\
PS C:\development\angular sites\angular-azure-app-1\ah-angular-wep-app-001> git add .
warning: LF will be replaced by CRLF in 3rdpartylicenses.txt.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
PS C:\development\angular sites\angular-azure-app-1\ah-angular-wep-app-001> git commit -m "init commit"
[master (root-commit) 1d7e62d] init commit
11 files changed, 409 insertions(+)
create mode 100644 3rdpartylicenses.txt
create mode 100644 assets/banner-img.jpg
create mode 100644 favicon.ico
create mode 100644 index.html
create mode 100644 main-es2015.8e48a77dd19c13976adf.js
…
Next, push the new changes to the Azure app services repository:
PS C:\development\angular sites\angular-azure-app-1\ah-angular-wep-app-001> git push
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 4 threads
Compressing objects: 100% (12/12), done.
Writing objects: 100% (13/13), 304.55 KiB | 4.06 MiB/s, done.
Total 13 (delta 0), reused 0 (delta 0)
remote: Updating branch 'master'.
…
The output ensuing from the transfer of artifacts from our Angular dist folder into the Azure app service web site as shown below:
Next, to test the Azure deployment by browsing to the site:
https://ah-angular-wep-app-001.azurewebsites.netIn your own application the Azure App Service web application the URL will be of the form:
https://[app name].azurewebsites.netIf all the above has been successfully executed, within our browser the page will display as an Azure web site as shown:
We have successfully deployed an Angular app into Azure!
In a future post I will show how to deploy an Angular app, a web API app, then show how to use Web APIs from our Angular web app.
That’s all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
