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

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”).

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.

Auto Deployment Setup in Azure DevOps

Azure DevOps is used to deploy an application to the cloud.

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.

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”).

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.

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

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.

Install Angular CLI

Now search for “npm” in the search box and click the ‘Add’ button as shown in the below image

Enter display name as “Angular CLI” and Command as “install”

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.

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/”.

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.

After completing the job check the status on the Test “Angular-CI". Please refer to the above screenshot for your reference.

Your application is now successfully deployed. I hope this article is helpful. Thank you