404 After Deploying a React App to Azure

Posted by Joseph McGurkin on 1/30/2019


  1. In the React App, add a web.config file in the /public folder
  2. Add the content below to the web.config
  3. Redeploy
<?xml version="1.0"?>
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
                <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" />
                    <action type="Rewrite" url="/" />