Deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure

Question

I would want to deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure. The current version of ASP.NET Boilerplate contains two solutions (one for the backend and one for the frontend) so i need to deploy it to two different AppServices and a SQL database. Here is what i tried:

Publish the back-end application:

create an Web App + SQL App Service.

configure the Web.Host/appsettings.production.json as following:

"App": {
    "ServerRootAddress": "https://myapp-backend.azurewebsites.net/",
    "ClientRootAddress": "https://myapp.azurewebsites.net/",
    "CorsOrigins": "https://myapp.azurewebsites.net/"
}

publish the application to Azure using Visual Studio
i am able to see the swager for the API when browsing to https://myapp-backend.azurewebsites.net/

Publish Angular

create a new simple Web App for the Angular Client.
run ng build -prod

copy the web.config. It looks like this:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <clear />
        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
          <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="None" />
        </rule>    
        <!-- check if its root url and navigate to default page -->
        <rule name="Index Request" enabled="true" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/home" logRewrittenUrl="true" />
        </rule>    
        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="Rewrite" url="/app" />
        </rule>    
      </rules>
    </rewrite>
  </system.webServer>
</configuration>`

This is the json configuration:

Configure the angular/dist/assets/appconfig.json like following:

{  
  "remoteServiceBaseUrl": "https://myapp-backend.azurewebsites.net",  
  "appBaseUrl": "https://myapp.azurewebsites.net"  
}

Send the publish files from dist to wwww folder to Azure via FTP
When browsing to https://myapp.azurewebsites.net/ i see an error in the console application indicating: "Unexpected token < " like in the image below:

If i type enter link description here i am getting this error message:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I assume it is probably related to the Web.config and the way the routing are set in the Angular application but i at this moment i am lost. Could you help?

Have you seen [Step by step publish to Azure Angular](https://aspnetzero.com/Documents/Step-by-step-publish-to-azure-angular)? — aaron, May 07 '18 at 14:09
Thank you, yes, i have tried it and i wasn't able to make it work. I also used the Web.config from the Angular directory. — Marius Istudor, May 07 '18 at 14:53

score 1 · Answer 1 · answered Sep 06 '20 at 07:28

the link of official doc is changed to Deployment Angular - Publish Azure.

But there is also another interesting way of publishing www/dist folder to static site and as storage account. Without worrying about asp.net we.configs and blocked json files.

Step by step guide publish to azure static web site(storage account)

Why use Azure Storage

AngularUI is a static website, therefore it can be deployed in Azure storage which provides features specifically designed for static websites. such as Custom Domains, and SSL. Also; using Azure Storage is much cheaper than deploying an app Service on Azure.

Deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure

1 Answers1