Azure App Service Not Working With Custom Routing In React-redux Web App - Need Wildcard Virtual Directories?

I have custom routes like follows: // @flow import React, { PureComponent } from 'react'; import { Switch, Redirect } from 'react-router-dom'; import { withRouter } from 'react-ro

Solution 1:

If you have your repo connected to the Azure Web App, then you can place this web.config file in the /public folder of a create-react-app project.

<?xml version="1.0"?><configuration><system.webServer><directoryBrowseenabled="false"/><urlCompressiondoDynamicCompression="true"doStaticCompression="true"/><!-- <staticContent>
            <clientCache cacheControlMaxAge="120.00:00:00" cacheControlMode="UseMaxAge"/>
        </staticContent> --><cachingenabled="true"enableKernelCache="true"><profiles><addextension=".css"policy="CacheUntilChange"kernelCachePolicy="CacheUntilChange"/><addextension=".js"policy="CacheUntilChange"kernelCachePolicy="CacheUntilChange"/><addextension=".svg"policy="CacheUntilChange"kernelCachePolicy="CacheUntilChange"/><addextension=".png"policy="CacheUntilChange"kernelCachePolicy="CacheUntilChange"/></profiles></caching><rewrite><rules><rulename="React Routes"stopProcessing="true"><matchurl=".*" /><conditionslogicalGrouping="MatchAll"><addinput="{REQUEST_FILENAME}"matchType="IsFile"negate="true" /><addinput="{REQUEST_FILENAME}"matchType="IsDirectory"negate="true" /><addinput="{REQUEST_URI}"pattern="^/(api)"negate="true" /></conditions><actiontype="Rewrite"url="/index.html" /></rule></rules></rewrite></system.webServer></configuration>

Solution 2:

Since you're on Windows based App Service Plan, your Azure webapp is running under IIS with URL Rewriting module enabled. As such, you can create a simple URL Rewrite rule that directs all requests coming from https://mysite.azurewebsites.net/chapter/* to your site root in which case the client will receive your React/Redux application, and your React application would take care of all subsequent logic and rendering of content etc..

Here are the steps to create this URL Rewrite rule:

1. In Azure Portal, create FTP deployment credentials.
2. Locally on your computer, create a Web.config file with following content:

<?xml version="1.0" encoding="UTF-8"?><configuration><system.webServer><rewrite><rules><rulename="Chapter-Redirect"stopProcessing="true"><matchurl="chapter/*" /><actiontype="Rewrite"url="/" /></rule></rules></rewrite></system.webServer></configuration>

3. Open up FTP client (Filezilla is a good one) and login to your site and upload the Web.config file.
4. Test by visiting: https://mysite.azurewebsites.net/chapter/*

Here's more info on IIS URL Rewrite.