Let’s Azure : Deploy Angular App into Azure through Azure DevOps Pipeline

Deploying an Angular app into Azure was never easier, thanks to Azure App Services and Azure DevOps Pipeline.

Setup the Code

Once the Angular code is developed, check in the code to repository. Here in this blog we are using Azure Repo Git (Azure DevOps Repo) as our Git repository. You may use #GitHub, #SVN, #Bitbucket or any othe Git repository.

Setup the App

The next is to setup the target deployment location. The beauty here is we will not be using any server or virtual machine (VM) in this deployment. So no server setup, no installation, no hardware configuration is required. We can use the Azure’s App Services, where we can quickly setup and enterprise-ready web app and deploy on a scalable and reliable managed infrastructure. This is a fully managed service with security and compliance requirements, provides enterprise-grade performance, and handle more than 60 billion requests per day. So we don’t need to worry about hardware, network cores and memory while deployment and security, performance and scaling post deployment.

The only thing that we need to decide during deployment is the App Service plan & pricing tier which determines the location, features, cost and compute resources required for the app.

Setup the Pipeline

For setting up the Pipeline, use the classic wizard. The picture here detailed out the Build and Publish steps. The pipeline job will need 9 tasks including 3 optional tasks

The first three tasks are for installing the npm and CLI into the build agent. The next three steps are optional. The 7th step is where we will be running the build command to build the angular application. The last two steps are for publishing and deploying the build into target application. Refer to below YAML for configuring individual tasks.

Note that the build needs to uploaded into the target location using FTP, the details of which are available in the web app console.

Setup Pipeline Using YAML

Here is a sample YAML to setup the pipeline, when the classic wizard is not used. Refer to this YAML for configuring individual tasks of the classic wizard as well.

pool:
name: Azure Pipelines
variables:
Parameters.project: ''
steps:
- task: NodeTool@0
displayName: 'Use Node 10.x'
inputs:
versionSpec: 10.x
- task: Npm@1
displayName: 'npm install'
inputs:
verbose: false
- task: Npm@1
displayName: 'install angular cli'
inputs:
command: custom
verbose: false
customCommand: 'install -g @angular/cli@latest'
- task: RaulARuiz.angular-cli-1.angular-cli-build-task.AngularCLI@1
displayName: 'ng test'
inputs:
command: test
project: '$(Parameters.project)'
continueOnError: true
- task: RaulARuiz.angular-cli-1.angular-cli-build-task.AngularCLI@1
displayName: 'ng lint'
inputs:
command: lint
project: '$(Parameters.project)'
continueOnError: true
- task: RaulARuiz.angular-cli-1.angular-cli-build-task.AngularCLI@1
displayName: 'ng e2e'
inputs:
command: e2e
project: '$(Parameters.project)'
continueOnError: true
- bash: |
# Write your commands here
echo 'Building Angular for Dev'
node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --verbose
echo 'Angular Build complete'
displayName: 'Build for DEV - Bash'
- task: PublishBuildArtifacts@1
displayName: 'Publish Artifact: Angular App'
inputs:
PathtoPublish: dist
ArtifactName: ‘my-angular-app’
- task: FtpUpload@2
displayName: 'FTP Upload to Azure: Production Deployment'
inputs:
credentialsOption: inputs
serverUrl: ‘**************************'
username: '**************************'
password: **************************
rootDirectory: /***/***/***/1/s/dist
remoteDirectory: /site/wwwroot
enableUtf8: true
cleanContents: true
preservePaths: true
trustSSL: true

If you like this, do comment here and let us know.

Isn’t it interesting. If you like this and wanna read more on Azure, follow Let’s Azure and also click here to Follow this author.

If this story is helpful for you forward to your friends and if you have suggestions, do let us know your thoughts in comments.

Happy Azuring and Happy Coding !!!!