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

George Chen · Accepted Answer · 2020-01-16 02:03:56Z

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.

answered Jan 16, 2020 at 2:03

George Chen

14.4k2 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2020-01-15 19:09:49Z

0

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

answered Jan 15, 2020 at 19:09

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Jeremy Over a year ago

Thank you for your reply. I do not see any open >> website options. I am using Visual Studio Code, not the normal Visual Studio (i.e., 2017, 2019). I do not want any extra instructions regarding CI/CD. I simply want to deploy my Angular app to an Azure web app and show that it works.

Jeremy · Accepted Answer · 2020-01-16 19:43:11Z

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>

Collectives™ on Stack Overflow

Deploy simple Angular 8 app to Azure with Visual Studio Code

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related