'How to configure Deployment Source in VSCODE?

I am trying to deploy basic Angular App to Azure. I installed these extensions:

enter image description here

When I right click on my AppService, I see this menu:

enter image description here

If I try to select Configure Deployment source, I do not see any browse option that numerous articles on the web speak about. I see only this:

enter image description here

How can I enter the directory of my compiled app there? Simple deployment results in my whole uncompiled app being placed into the wwwroot of my AppService.

This is the only confirmation dialog that I see when I click Deploy web app:

enter image description here

angularazureazure-appservice


Solution 1:[1]

Before deploying the app to Azure , you need to build the angular application for production environment by running this command in the terminal tab in Visual Code:

ng build --configuration=production

Once you login to azure with the extension, you will see all the App Services under your subscription

enter image description here

Next right click on you App Service application and choose “Deploy to Web App”, a command popup will be showing on the right. Click on Browse and choose “dist\yourApp” folder under your application and then Click Deploy

Solution 2:[2]

2022 Answer:

Ran into the same problem in 2022, I solved it by going to the .vscode folder in your project directory and editing the settings.json file. Delete "appService.deploySubpath": "<whatever-path>". Then try to Deploy to Web App again and you should see the browse that allows you to pick what folder you want to deploy.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sajeetharan
Solution 2

Related Questions