Configure React Router for Azure Web App

If you have deployed an react app to the azure app service. Its possible that some may experience issues with routing/navigation. It will be like this.

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

This is because the react router is not configured for Azure.

In this blog I’ll guide you step by step instruction on how to solve this issue

CREATING WEB.CONFIG:

At Public folder in react app Create a web.config file

ADD URL REWRITE MODULE:

In web.config file copy-paste below content in to it.

<?xml version="1.0"?>
<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" />
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
         </conditions>
         <action type="Rewrite" url="/" />
       </rule>
     </rules>
   </rewrite>
 </system.webServer>
</configuration>

Again take the build and deploy. Now if you navigate your react app will not get an error and able to see correct page.

Hope this article will solve the routing problem.

Happy coding !