How to configure Deployment Source in VSCODE?

Question

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

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

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:

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:

Answer 1

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.

Answer 2

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

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