IIS Config to React Router App

web.config

<system.webServer>
  <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="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

OR

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Rewrite Text Requests" stopProcessing="true">
        <match url=".*" />
        <conditions>
          <add input="{HTTP_METHOD}" pattern="^GET$" />
          <add input="{HTTP_ACCEPT}" pattern="^text/html" />
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

OR

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>         
      <rewrite>
           <rules>
                <rule name="DynamicContent">
                     <conditions>
                          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                     </conditions>
                     <action type="Rewrite" url="index.html"/>
                </rule>
           </rules>
      </rewrite>
   </system.webServer>
 </configuration>

Thanks a lot. It works

does it works with @reach/router??

Hi I have the same problem, Tried all of the examples above for IIS but still get no result. The root page loads perfectly but all routes(http://www.example.com/anyroute) gives 404 error

My react page is the build folder, made by "npm run build"
This is my react routes:

    <Router >
        <Switch>
             <Route exact path="/user" component={home} />
             <AuthRoute exact path="/login" component={userLogin} />
             <AuthRoute exact path="/signup" component={userSignup} />
             <Route exact path="/ticket" component={ticketForm} />
             <Route exact path="/ticketList" component={ticketList} />
             <Route exact path="/bekleyen" component={bekleyen} />
        </Switch>
      </Router>

this is the IIS rules I wrote(which doesn't work):

<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="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
		 <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
                 </conditions>
               <action type="Rewrite" url="/index.html" />
          </rule>
    </rules>
</rewrite>

Please help

Hi I have the same problem, Tried all of the examples above for IIS but still get no result. The root page loads perfectly but all routes(http://www.example.com/anyroute) gives 404 error

My react page is the build folder, made by "npm run build"
This is my react routes:

    <Router >
        <Switch>
             <Route exact path="/user" component={home} />
             <AuthRoute exact path="/login" component={userLogin} />
             <AuthRoute exact path="/signup" component={userSignup} />
             <Route exact path="/ticket" component={ticketForm} />
             <Route exact path="/ticketList" component={ticketList} />
             <Route exact path="/bekleyen" component={bekleyen} />
        </Switch>
      </Router>

this is the IIS rules I wrote(which doesn't work):

<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="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
		 <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
                 </conditions>
               <action type="Rewrite" url="/index.html" />
          </rule>
    </rules>
</rewrite>

Please help

you can try : open web.config inside public folder.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpErrors errorMode="Custom" existingResponse="Replace">
       <remove statusCode="404" subStatusCode="-1" />
       <error statusCode="404" path="/" responseMode="ExecuteURL" />
   </httpErrors>
 </system.webServer>
</configuration>

Hey, I'm not sure if this is the case.
If your react app is not served from ASP.NET application root folder then you need to tell the react router to use a basename prop:

<BrowserRouter basename="/build" />

or

<BrowserRouter basename={ process.env.PUBLIC_URL || '/' } />

Hi I have the same problem, Tried all of the examples above for IIS but still get no result. The root page loads perfectly but all routes(http://www.example.com/anyroute) gives 404 error

My react page is the build folder, made by "npm run build"
This is my react routes:

    <Router >
        <Switch>
             <Route exact path="/user" component={home} />
             <AuthRoute exact path="/login" component={userLogin} />
             <AuthRoute exact path="/signup" component={userSignup} />
             <Route exact path="/ticket" component={ticketForm} />
             <Route exact path="/ticketList" component={ticketList} />
             <Route exact path="/bekleyen" component={bekleyen} />
        </Switch>
      </Router>

this is the IIS rules I wrote(which doesn't work):

<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="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
		 <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
                 </conditions>
               <action type="Rewrite" url="/index.html" />
          </rule>
    </rules>
</rewrite>

Please help

Try download and installing rewrite_amd64.msi.. I was facing the same issue, but after installing rewrite_amd64.msi for IIS.. it worked for me.. Hope it helps.. :)

Adding the config file to the build folder worked for me

where is this web.config located, I publish with VS 2019 to IIS and it load up the app but only root and no routs work. In the SPA public folder I see a web.config and change that adding this OP xml but no change to SPA behavior. in the wwwroot the VS 2019 Publish feature is creating a web.config also but that one is write protected so how do you guys do this?

Hello, i have react app deployed on iis with asp.net. I had the same probleme, my website worked perfectly but i can't refresh my page, so i installed url rewrite and added web.config but it get worst, i can't even log in to my website or anything else. Can someone help me please?

The issue for me was that web.config was not being copied into the build folder, I updated my github workflow like so:

   - name: npm install, build, and test
      run: |
        yarn install
        yarn run build
        **cp Web.config ./build/Web.config**
        npm run test --if-present```