Skip to content

Instantly share code, notes, and snippets.

@maxan
Last active November 14, 2023 11:43
Show Gist options
  • Save maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45 to your computer and use it in GitHub Desktop.
Save maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45 to your computer and use it in GitHub Desktop.
IIS Config to React Router App
<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>
@mhmtugur
Copy link

Thanks a lot. It works

@rajbgm
Copy link

rajbgm commented Oct 25, 2019

does it works with @reach/router??

@Oner-T
Copy link

Oner-T commented Feb 25, 2020

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

@gurkangul
Copy link

gurkangul commented Feb 28, 2020

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>

@happygrizzly
Copy link

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

@rajbgm
Copy link

rajbgm commented Mar 19, 2020

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.. :)

@TamarZanzouri
Copy link

Adding the config file to the build folder worked for me

@erikswed
Copy link

erikswed commented Apr 3, 2021

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?

@KHassen91
Copy link

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?

@miccoh1994
Copy link

miccoh1994 commented Jun 29, 2021

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```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment