CODEWITHSUNDEEP
reactjsazurereact-routerazure-web-app-service
needSomeAzureHelp
needSomeAzureHelp

Reputation: 1

React Router throwing 404 on Azure Linux Web App

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>

Upvotes: 0

Views: 3371

Answers (2)

Lutti Coelho
Lutti Coelho

Reputation: 2264

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

Upvotes: 8

Peter Pan
Peter Pan

Reputation: 24148

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.

  1. Create a Node.js app in Azure for Linux
  2. Run a custom Linux container in Azure App Service

Upvotes: 0

Related Questions