Deploy simple Angular 8 app to Azure with Visual Studio Code

Question

I've followed several online tutorials with no luck. I am trying to deploy an Angular 8.3 web app to Azure. I tried creating a web app, both Windows and Linux, but always gives me either the standard hostingstart.html page or internal server error occurred message. I tried manually uploading the dist files as well as using the Azure App Service extension in Visual Studio Code.

All of the tutorials seem to be out of date from current Visual Studio Code and Azure settings. Is there someone who can walk me through the steps to get my Angular app running on Azure? I also have a .NET Core api to go along with it, but that can be addressed later.

I honestly have no idea what the correct steps are or if there is something wrong with my app regarding versions of node or anything like that. I have the app running fine on a local IIS server including URL Rewrite module for IIS and a web.config file set up correctly.

Thank you! Jeremy

Answer 1

There is a Azure App Service management extension for Visual Studio Code, with this you will be able to deploy and scale web.

There is a tutorial about how to deploy .net core web with visual studio code. Except this way , you could choose deploy to web app in the Azure App Service explorer.

Alternately, open the Command Palette (F1), type deploy to web app, and select the Azure App Service: Deploy to Web App command. Then select your current folder for the app and follow the prompts.

Answer 2

If you directly want to deploy from Visual Studio, follow the below steps

Step 1: run ng build --prod (this will create a dist folder in your application)

Step 2: open visual studio and select open >> website and then the path of your project inside dist folder and open

Step 3: Right-click on your project and select Publish Web App then select your published profile setting and deploy it

if you want to deploy using Azure DevOps with the CI/CD pipelines follow this tutorial

Answer 3

Somehow the issue was related to my web.config file.

Here is what I had in my non-working web.config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <defaultDocument enabled="true">
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
    <rewrite>
      <rules>
        <rule name="Angular Routes" 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="/di/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Here is the changed web.config file that worked (I removed the default document section during my troubleshooting, and then ended up with the following, which has the addition of the system.web section. Not sure which actually fixed it.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" 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="/di/" />
        </rule>
      </rules>
    </rewrite>
    <httpErrors errorMode="Detailed" />
  </system.webServer>
  <system.web>
    <customErrors mode="Off" />
    <compilation debug="true" />
  </system.web>
</configuration>