React.Js - Resource unavailable error

Happy days when everything is working in your development environment until you deploy your React project to Azure Web App.

When browsing to any page other than the default page (or index.html), suddenly you are getting this error:

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

The error occurs because the server was expecting a static file path, but it does not exist. Even though you have probably configured React Router to handle the /test path, however, it works only after the index.html file is loaded. The error you are seeing is from Azure App Service, before it even hits the index.html file.

Luckily, it is very easy fix, at least in my configuration where the application is hosted in Azure Web App (Windows OS).

A web.config file at the root folder with the following content will redirect all paths back to index.html.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Simply add the file to the 'public' folder in your project. When running 'npm run build', the file will get deployed with all other files. Now, your app will be able to handle all bookmarked URLs.

That's it for now.