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>

@maxan and @aibars did you ever find solution? I have same issue.

I have a react app which works perfectly when launched from VS2017. The same app when hosted on Azure VM (IIS-8, Windows Server) gives me 404 or 500 errors.

My hosting directory structure works for my .Net app and mixed .net and React apps but not for my new React only app.

My directory structure is wwwroot/Dashboard. I copy my production build to this dashboard folder.

My webconfig is:

<?xml version="1.0" encoding="utf-8"?> <configuration> <location path="." inheritInChildApplications="false"> <system.webServer> <handlers> <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" /> </handlers> <aspNetCore processPath="dotnet" arguments=".\Dashboard.dll" stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout" /> <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> </location> </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```