React Router throwing 404 on Azure Linux Web App

Question

We are migrating our React Web App to a Linux App Service from a Windows App Service. We had a custom web.config that would handle routing so that when a user manually visits one of our routes, they would not run into a 404. This fix is not working on a Linux App Service.

We're running into 404's and we need this to work as we have custom routes that the user should be able to reach. The site works if they route to the default index.html, but custom routes don't. We've tried creating a new Windows App Service and the migration works just fine. Any ideas on how to get custom routes working in a Linux App Service?

Here's our web.config we are currently using:

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <staticContent>
 <remove fileExtension=".woff" />
 <remove fileExtension=".woff2" />
 <remove fileExtension=".otf" />
 <remove fileExtension=".ttf" />
 <remove fileExtension=".eot" />
 <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
 <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
 <mimeMap fileExtension=".otf" mimeType="application/font-otf" />
 <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
 <mimeMap fileExtension=".eot" mimeType="application/font-eot" />
 <clientCache cacheControlMode="DisableCache" />
 </staticContent>
 <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>

Did you find an answer for this? I'm coping with same problem. — Lutti Coelho, Apr 23 '20 at 00:04

score 8 · Answer 1 · answered Apr 23 '20 at 11:36

As you are running your app in a Linux App Service you don't need a web.config file since its only used by IIS, as @PeterPan already said.

To run your React web app in Azure Linux Web App Service, and make any direct access on custom routes be handled by index.html you need to configure the startup command on "Settings > General settings > Startup Command" like the exemple below. Remember to change the path to your build path.

pm2 serve /home/site/wwwroot/build --no-daemon --spa

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

I've coped with the same problem recently: React router direct links not working on Azure Web App Linux

You just me life, was gonna do all kinds of stupid things suggested in other articles.. this is the ultimate answer. — Morris S, Dec 02 '20 at 06:14
This helped so much, thanks! I was missing the `/build` part of the path in that command and getting 404 for every route — Dehn Hunsworth, Apr 11 '23 at 14:58

score 0 · Answer 2 · answered Aug 22 '19 at 10:17

Azure Linux WebApp is based on Docker Container which be different from Azure Windows WebApp with IIS and web.config.

So you just need to remove the web.config file and make it run on local or a docker container, then to build it as a docker image or use Azure CLI to deploy to Azure WebApp for Container.

There are two offical documents you can refer to.

React Router throwing 404 on Azure Linux Web App

2 Answers2