.net core 3.1 / react app in Azure does not load

Question

I've just created an empty .net core 3.1 / react app with the dotnet cli (dotnet new react -o new-app) and published it into Azure (via WebDeploy base on the downloaded publish profile).

The publish runs successful every time but after it I can't access the client app. The only thing I can see is the default page of azure:

Other parts of the application are working because if I call any endpoint then I got the correct response (e.g. the example action in the example controller of the template returns a valid json).

How should I change to access the client app?

bazsibazsi bazsibazsi · Accepted Answer · 2020-03-05T00:51:26

I found the solution. I had to modifiy the web.config because of the client side routing. It is described below:

added a rule to pont the root url to wwwroot/index.html

<rule name="empty-root-index" stopProcessing="true">
   <match url="^$" />
   <conditions logicalGrouping="MatchAll">
      <add input="{HTTP_METHOD}" pattern="GET|HEAD" />
      <add input="{QUERY_STRING}" pattern="^$|^lc=" />
  </conditions>
  <action type="Rewrite" url="wwwroot/index.html" />
</rule>

an other one which gets all the static content from wwwroot (where the client app lives)

<rule name="wwwroot-static" stopProcessing="true">
   <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|ico))" />
   <conditions logicalGrouping="MatchAll">
      <add input="{HTTP_METHOD}" pattern="GET|HEAD" />
   </conditions>
  <action type="Rewrite" url="wwwroot/{R:1}" />
</rule>

also one needed to get the client side routing work:

<rule name="html5-routes" stopProcessing="true">
   <match url=".*" />
    <conditions logicalGrouping="MatchAll">
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{HTTP_METHOD}" pattern="GET|HEAD" />
  </conditions>
  <action type="Rewrite" url="wwwroot/index.html" />
</rule>

last but not least the we have to set the mime types

<handlers>
   <add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
   <!-- More goes here -->
<handlers>

.net core 3.1 / react app in Azure does not load

1 Answers