Blazor Web Assembly - On refresh getting - HTTP Error 404.0 - Not Found - after publishing the app in IIS

Question

I published a sample blazor WASM app and deployed it in IIS in my local machine. I'm able to access all the pages in from the hosted port,

however when i refresh the page on counter or weather i'm getting below error - home page refresh is working the other two pages are having this issue. the browser is looking for a weather document as per what is shown in the network tab

How can i resolve this?

Answer 1

Hi Dixan Thomas, If you create blazor web app with the web assembly only inside the visual studio and publish to the folder. The published folder content will be like this:

Then you should set the IIS web site's folder to this folder instead of the wwwroot folder. Like below path(The web.config is outside the wwwroot not inside the wwwroot folder ):

Then we could add it inside the IIS management console:

Below is the url rewrite rule for the sample web site:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".blat" />
      <remove fileExtension=".dat" />
      <remove fileExtension=".dll" />
      <remove fileExtension=".webcil" />
      <remove fileExtension=".json" />
      <remove fileExtension=".wasm" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".blat" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".webcil" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
    <httpCompression>
      <dynamicTypes>
        <add mimeType="application/octet-stream" enabled="true" />
        <add mimeType="application/wasm" enabled="true" />
      </dynamicTypes>
    </httpCompression>
    <rewrite>
      <rules>
        <rule name="Serve subdir">
          <match url=".*" />
          <action type="Rewrite" url="wwwroot\{R:0}" />
        </rule>
        <rule name="SPA fallback routing" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="wwwroot\" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

When you load the app, and navigate to /weather, the blazor router is capturing the url at the client and processing. If you hit refresh, the full url is sent to the server and of course there is no /weather file to return. The server needs to be coded to load the blazor host page if it’s a valid client url. Once loaded, the client code will process the url navigation.

You could use iis rewrite rules to implement the proper server routing. https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/creating-rewrite-rules-for-the-url-rewrite-module

you can also write a hosting app, that maps the urls to the hosting page.