Application deployment
Angular Azure Azure App Services CICD Continuous Deployment Continuous Integration DevOps Git Kudu PaaS Powershell SPA Top

Deploying an Angular Application to an Azure App Service

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:

Angular azure app service

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:

First, we develop and test our Angular application in our local 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:

  1. optimized JavaScript files used to run the application in the production environment.
  2. An assets folder:

This will contain your stylesheets and other content, such as images that are within the application’s source asset folder.

Next, login to Azure portal and create a Web 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.

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.git

We 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://[email protected]/ah-angular-wep-app-001.git

The format of the git clone is now:

https://[deployment user]@[app service].scm.azurewebsites.net/[app service].git

Next, we will clone the App Service repo into a local folder.

Inside your repository folder, enter:

git clone https://[email protected]/ah-angular-wep-app-001.git

Inside your repository folder, enter (change where your deployment user and application name differ):

git clone https://[email protected]/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://[email protected]/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.net

In your own application the Azure App Service web application the URL will be of the form:

https://[app name].azurewebsites.net

If 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.

Social media & sharing icons powered by UltimatelySocial