Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket

Introduction

 
This article isabout Angular application's  auto deployment for CI/CD pipelines using Azure app service, azure DevOps, and Bitbucket repository. Please follow the below steps.
 

Create Azure App Service

 
If you are using Azure for the first time and want to explore the same, please check if the free subscription is available.
 
If you have not created a resource group and Azure web service, please create one. Then make sure you select ‘.NET Core 3.0’ in the ‘Runtime Stack’ option and web service name (here I have used “angular-auto-deployment”).
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Once you have filled in the details, click on the “Review and create” button. On the next screen click the “Create” button to see the newly created resource.
 
Click your resource file. The recently created web app service is now available on your list. Please refer to the below image for your reference.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 

Auto Deployment Setup in Azure DevOps

 
Azure DevOps is used to deploy an application to the cloud.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
If you don’t have an organization, please create one and then click on the ‘Create Project’ button.
 
Create a new project, enter the project name and description, select the visibility as “public” or “private”. Expand the ‘advanced’ button, select the version and work item process.
 

Create a new pipeline

 
Select the ‘Pipelines’ from the left side menu and click on the ‘New Pipeline’ button at the center of the screen. Please refer to the below image.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
To create a pipeline, click “Use the classic editor” link on the page. Then select a repository source and use the existing repository bitbucket cloud.
 
Now verify the authorized username and password and select your application branch (example “master” or “develop”).
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
The next step would be to create a pipeline job. Here I have to create an “Angular Deployment Job”. Initially, an empty job will be created, we will be adding a few details which are shown below the image. Click the “+” icon to add or configure the pipeline set-up.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Add the following list to your pipeline
  • Install node
  • Install Angular CLI
  • npm install
  • Create a deployment build
  • Azure app service to deploy
  • FTP upload
Install Node
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Select the “Angular Deployment Job” or the job name that you have created. To add node configuration, search for ‘node’ text in the search box. Click on “Node.js Tool Installer” and then click on ‘Add’ button
 
Change the display name as “Node Reference Available” and add the version spec of the node js version. Please refer to the below image.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Install Angular CLI
 
Now search for “npm” in the search box and click the ‘Add’ button as shown in the below image
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Enter display name as “Angular CLI” and Command as “install”
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
npm install
 
Continue the above process, search for “npm” and click the add button to fill the npm dependencies.
 
Create a deployment build
 
Add the same npm for a production build. Enter Display Name as “Create a deployment build”, Command as “custom” and Command and arguments as “run build”. The run build is also called the “ng build –prod" command and it is already written as a script in our application package.json file. This helps us to create a deployment build.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Azure app service to deploy
 
Next search for “Azure App Service Deploy” and add it to the list. Fill in the details as in the below image “Azure subscription” needs to authorize and select your subscription,
then select “App Service name” in this case, it is “angular-auto-deployment” and Package or folder is “dist/”.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Continuous Deployment
 
If the job has to be triggered continuously then go to the ‘Triggers’ tab, click Test Angular pipeline and enable the “Enable continuous integration” checkbox. Your job will now trigger continuously. Whenever you commit, check-in or create a pull request and merge your code, the build will automatically run.
 
After entering all the list details, click the “save and queue” button to run the job. The page navigates to the pipeline build’s page.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
After completing the job check the status on the Test “Angular-CI". Please refer to the above screenshot for your reference.
 
Setup A CI/CD Pipeline For Deploying Your Angular Application To Azure And Bitbucket
 
Your application is now successfully deployed. I hope this article is helpful. Thank you