When you initially upload a react app to IIS, you’ll find that the routes you have created, such as website.com/story/1 will return a 404. This is because IIS is expecting content to be literally in the folder structure specified.

To allow the application to use javascript to route the requested location, we need to enable URL Rewriting in IIS via the Request Filtering setting.

We can then either set up the routing in the web.config or via the IIS manager.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="React Routes" stopProcessing="true">
        <match url=".*" />
        <conditions>
          <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="/" appendQueryString="false" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>