React Route Fails in IIS

Step 1

Install URL Rewrite extension. The chances that your VM is a x64 one are high, so click “View additional downloads” below “Install this extension”. I don’t know why Microsoft is assuming that you’ll be using x86 architectures. Bad User Experience. Anyway … restart IIS Server.

Step 2

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- <add input="/booking" matchType="IsDirectory" negate="true" /> -->
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Step 3

• Create a folder called iisConfig in the project root (not part of the src).
• Inside there put the web.config file
• Create a new file copyIISConfig.js
• Put the code below to copyIISConfig.js

const fs = require('fs-extra');

const webConfigPath = './build/web.config';

if (fs.existsSync(webConfigPath)) {
    fs.unlinkSync(webConfigPath);
}

fs.copySync('./iisConfig/web.config', webConfigPath);

Step 4

In the package.json file inside the scripts part add the additional build step on the postbuild event:

"postbuild": "node iisConfig/copyIISConfig.js"