Skip to content

Instantly share code, notes, and snippets.

@maxan

maxan/web.config

Last active November 14, 2023 11:43
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45 to your computer and use it in GitHub Desktop.
Save maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45 to your computer and use it in GitHub Desktop.
Download ZIP
IIS Config to React Router App
Raw
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>
@faherrera
Copy link

EN: Remember! In IIS 7 (and some others versions) you need to install the "URL Rewriter". Here the link to Install, later you must create web.config with the configuration above.
ES: Recordar! En IIS 7 ( y algunas otras versiones) se necesita instalar previamente el "URL REWRITER". Dejo adjunto el link para instalarlo, luego de eso pueden hacer la configuración de arriba,

Link: https://www.iis.net/downloads/microsoft/url-rewrite

@faherrera
Copy link

Thanks Maxan!

@aflansburg
Copy link

aflansburg commented Aug 28, 2018 •
edited

Thanks for this - the first config worked for me. My use case was a bit different - no React Router, however I was passing a parameter in my url from a third party app on certain occasions which I needed my React app to use. This stopped the attempt to redirect off page to the non-existent resource.

@aibars
Copy link

aibars commented Jan 18, 2019 •
edited

Hi, I have a question, what would be the configuration required to map all static files to an URL containing a path like domain.com/path ?
In my case, I used the following rule

 <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="/survey" />
      </rule>

which did not work.
Thanks in advance

@SD-Dude
Copy link

SD-Dude commented Apr 3, 2019

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

@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 •
edited

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 •
edited

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