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.