Deploy Angular/Vue/React App to Azure Portal through Azure DevOps CI/CD

Overview

Today we will learn how to deploy the angular app to Azure Portal through CI/CD. For this, first of all, you need to create new App Services in the Azure portal. You can follow the first 3 steps as mentioned in the link below. Below URL is to deploy the angular app manually through Visual studio code.

https://setiasunny.blogspot.com/2020/05/deploy-angularvue-app-to-azure-portal.html

Once your app service is ready then make sure code is check-in the Azure DevOps. The first step is to create a new build.

Step 1: Build a Pipeline

Login to Azure DevOps and click on the Pipeline link as shown in the snapshot below and then press New Pipeline

Step 2: Specify where is your code?

I'm selecting Other Git options for the angular app as our code exists in the Azure DevOps Repo.

Step 3: Select a source

Specify your Project and repository as shown below

Step 4: Select a template

I'm selecting an empty job here. So, we perform all the steps manually here.

Step 5: Add New Tasks

In the pipeline Task, you can specify the default Agent pool and specifications.

Get sources Task, Project, and Repository is already selected. if not, select your project.

Add your 3 new tasks, as shown below.

1. Npm task
2. Npm task
3. Publish build artifact

1. You need to press the "+" symbol and add a new npm task here. The First npm task is to install all npm package that is required for the angular app.

2. The second npm task is to build the project. I'm selecting custom command here and specify the working folder where you package.json exists.
Then write build command. In my example, we have run the build command 

OR

You can add build:prod for production env.

3. Add a new publish artifact task and specify the path to publish, it should be in the dist folder. In my case, it is in the folder/dist. your package.json might be outside the folder then you will write only dist and specify the artifact name, it can be anything.

OR

Step 6: Press the save and queue button.

You can see the build has succeeded and will create artifacts for you.

Step 7: Create a release

Click on the release button as shown in the snapshot below and click the "Create Release" button.

Step 8: Select the template

We will select the default template i.e Azure App Service deployment

Step 9: Add an artifact

Specify your Project and build pipeline here, so it can pick the code from that pipeline.

Step 10: Select the Deploy Azure app service task

Specify the following options

1. Connection Type
2. Subscription (Your Azure Subscription)
3. App Service Type (it should be a Web app) as we have an angular app.
4. App Service Name (Once you select the subscription, it will automatically fetch all the Web App that you have created on Azure Portal). Select that app service name here.

Step: 11 Create the release.

Once the release is succeeded, It will automatically deploy all the code to the Azure web app.

This is all about this article and let me know if you have any questions.

Deploy Angular/Vue App to Azure Portal Through Visual Studio Code

Create a new App Service in Azure Portal

Step 1: The first step is to create a web app in the Azure portal. Go to the Azure Portal and click App Services and then click Add button

Step 2 Select the following options

• Subscription, 
• Resource Group (If a resource group is not available then create a new)
• App Name(Unique name), 
• Runtime Stack - Asp.net 4.7/Node latest version
• OS (Windows)
• App Service Plan (Create a new service plan if it is not available)

Press review + Create to create a web app.

Step 3 - Once the app is created then you can see the URL in the overview as shown in the snapshot below.

Deploy your code to Azure Portal 

Step 1 - Open your code in Visual Studio Code

Step 2 - You need a Visual Code Code Extension to deploy the code

Step 3 - Search Azure App Service in the extension and install.

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice

Step 4 - Click on the Azure Menu and log in with your Azure credentials and it will load your web app here.

Step 5 - Right-click on the web app/dist folder and click on Deploy to the Web app.

Step 6 - You need to browse your code folder. For the angular/vue app, you need to upload the dist folder

The application will automatically create the folder once you build the angular project with the npm run build. 

Note: If the dist folder is not available then you need to run the ng build command. It will create a dist folder automatically.

Once you select the folder, you can see the below-deploying message.

Step 7 - Once the deployment is completed it will display the message below.

Hurray!! The website is deployed and you can click on the Browse Website button.

Note: If your dist folder contains a subfolder then your side won't work. Then you need to go to Azure portal --> App Services --> Configuration --> Path Mappings --> Update Physical Path.

This is all about this article, if you have any questions then do let me know.