Azure App service not working with custom routing in React-Redux web app - need wildcard virtual directories?

Question

I have custom routes like follows:

// @flow

import React, { PureComponent } from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { withRouter } from 'react-router';

import { Route } from 'components/Routes';
import Story from 'pages/Story';
import Page404 from 'pages/404';

class Routes extends PureComponent<{}> {
  render() {
    return (
      <Switch>
        <Route exact path="/" render={props => <Story {...props} />} />
        <Route
          exact
          path="/chapter/:id"
          render={props => <Story {...props} />}
        />
        <Route path="/404" render={props => <Page404 {...props} />} />
        <Redirect to="/404" /* Must be the last one */ />
      </Switch>
    );
  }
}

export default withRouter(Routes);

This works fine in localhost, if I visit localhost:3000/chapter/3 the web app redirects successfully, unfortunately in live builds running on azure app services if I visit: mysite.azurewebsites.net/chapter/3 I'm given an error:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

I'm running a Windows based App Service plan. I'm sure there's some option to set up redirecting, i.e. /chapter/* -> /www_siteroot/ but I haven't been able to figure out how to do it.

I fixed the issue by going to the app service settings and adding /chapter/1, /chapter/2, etc, etc under 'Virtual applications and directories' and directing them to site\wwwroot.

I'd prefer to have a wildcard option like /chapter/* but it doesn't seem to work and I get an error.

Answer 1

Solution to those who are running App Service with Linux is to create configuration file .htaccess instead of web.config. Create this file to root of your public folder with the following content:

RewriteEngine On
RewriteRule "^[^\.]+$" "index.html"