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>

        <directoryBrowse enabled="false"/>

        <urlCompression doDynamicCompression="true" doStaticCompression="true"/>

        <!-- <staticContent>
            <clientCache cacheControlMaxAge="120.00:00:00" cacheControlMode="UseMaxAge"/>
        </staticContent> -->
        <caching enabled="true" enableKernelCache="true">
            <profiles>
                <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".svg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".png" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
            </profiles>
        </caching>

        <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="/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>
                <rule name="Chapter-Redirect" stopProcessing="true">
                    <match url="chapter/*" />
                    <action type="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.