How to Deploy Angular 6 to Azure Web App - You do not have permissions

Question

I have created a clean Angular 6 App. I add following web.config to the src folder:

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

I added "src/web.config" in the assets section in the angular.json file. I have updated the node version on the web app to 10.6.

When I deploy the application and navigato to site I get following:You do not have permission to view this directory or page.

I followed following sample: https://itnext.io/easy-way-to-deploy-a-angular-5-application-to-azure-web-app-using-vsts-pipelines-4a288b9deae1

Any suggestions?

Answer 1

It took me entirely too long to figure this out. I hope it helps.

• In your app service, Click "Application Settings". Scroll to the bottom. You will see "Virtual applications and directories". Your virtual path should be "/" and physical path should be "site/wwwroot/" Change your Physical path to "site/wwwroot/'appname'" "appname" should be whatever the name of your application is. Or it should be whatever folder is inside of your "dist".