1

I've been trying to deploy my ASP.NET Boilerplate project to Azure and so far I've succeeded to publish my project to Azure using Visual Studio publish. Right now I have my back-end up and running and I can access the swaggerUI page and execute API calls on my back-end.

Whenever I try to deploy the Angular front-end to the server I only seem to get 404 - Resource not found errors for each file and route I try to access. I have been loosely following this guide, the only difference is that I have a merged project, meaning the back-end and front-end are both located on the same Azure appservice.

I deploy Angular by first running ng build --prod locally and then moving all the files in my local wwwroot/dist folder to the wwwroot folder of my Azure web app using FTP. I make sure the appsettings.production.json and assets/appconfig.production.json files contain the right URLs and I have added the <mimeMap fileExtension=".json" mimeType="application/json" /> rule to my web.config file.

Whenever I try to go to either the base url of my site, go to an asset ie /assets/images/login_background.png, or to a specific route, I get a console error that then immediately dissapears. Perhaps this has something to do with the routing?

My assets/appconfig.production.json file:

{
  "remoteServiceBaseUrl": "https://orchestra-agenda.azurewebsites.net/",
  "appBaseUrl": "https://orchestra-agenda.azurewebsites.net/",
  "localeMappings": [
    {
      "from": "pt-BR",
      "to": "pt"
    },
    {
      "from": "zh-CN",
      "to": "zh"
    },
    {
      "from": "he-IL",
      "to": "he"
    }
  ]
}

My appsettings.production.json file in the wwwroot folder:

{
  "ConnectionStrings": {
    "Default": "Server=orchestra-agenda.database.windows.net; Database=MyDatabaseName;User ID=MyUserName;Password=MyPassword"
  },
  "App": {
    "ServerRootAddress": "https://orchestra-agenda.azurewebsites.net/",
    "ClientRootAddress": "https://orchestra-agenda.azurewebsites.net/",
    "CorsOrigins": "https://orchestra-agenda.azurewebsites.net/,http://orchestra-agenda.azurewebsites.net/"
  },
  "Authentication": {
    "JwtBearer": {
      "IsEnabled": "true",
      "SecurityKey": "OrchestraAgenda_C421AAEE0D114E9C",
      "Issuer": "OrchestraAgenda",
      "Audience": "OrchestraAgenda"
    }
  }
}

My Web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\OrchestraAgenda.Web.Host.dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" forwardWindowsAuthToken="false" startupTimeLimit="3600" requestTimeout="23:00:00" hostingModel="InProcess">
      <environmentVariables>
        <environmentVariable name="COMPLUS_ForceENC" value="1" />
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Development" />
      </environmentVariables>
    </aspNetCore>
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>
<!--ProjectGuid: 38e184bd-e874-4633-a947-aed4fdb73f40-->

Please let me know if you have any idea what could cause this problem

Jobje325
  • 55
  • 12

1 Answers1

0

I figured out what the problem was. The server expects the web.config file in the /src folder, not in the root folder. You also need to add the src/web.config to the assets in the angular.json and add a few rules to the web.config. I solved it after I found this post where they elaborate on it in more detail: angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

Jobje325
  • 55
  • 12