maxan/web.config

faherrera · 2018-08-14T23:38:32Z

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 · 2018-08-14T23:39:24Z

Thanks Maxan!

aflansburg · 2018-08-28T18:10:24Z

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 · 2019-01-18T17:45:28Z

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 · 2019-04-03T21:42:52Z

@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 · 2019-08-27T14:57:02Z

Thanks a lot. It works

rajbgm · 2019-10-25T15:02:37Z

does it works with @reach/router??

Oner-T · 2020-02-25T11:13:08Z

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 · 2020-02-28T18:42:03Z

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 · 2020-03-17T21:09:20Z

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 · 2020-03-19T13:04:24Z

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 · 2020-08-28T15:15:16Z

Adding the config file to the build folder worked for me

erikswed · 2021-04-03T14:52:15Z

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 · 2021-04-24T10:18:34Z

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 · 2021-06-29T13:48:54Z

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

maxan/web.config

faherrera commented Aug 14, 2018

faherrera commented Aug 14, 2018

aflansburg commented Aug 28, 2018 •

edited

Loading

aibars commented Jan 18, 2019 •

edited

Loading

SD-Dude commented Apr 3, 2019

mhmtugur commented Aug 27, 2019

rajbgm commented Oct 25, 2019

Oner-T commented Feb 25, 2020

gurkangul commented Feb 28, 2020 •

edited

Loading

happygrizzly commented Mar 17, 2020

rajbgm commented Mar 19, 2020

TamarZanzouri commented Aug 28, 2020

erikswed commented Apr 3, 2021

KHassen91 commented Apr 24, 2021

miccoh1994 commented Jun 29, 2021 •

edited

Loading

	<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/web.config

faherrera commented Aug 14, 2018

faherrera commented Aug 14, 2018

aflansburg commented Aug 28, 2018 • edited Loading

aibars commented Jan 18, 2019 • edited Loading

SD-Dude commented Apr 3, 2019

mhmtugur commented Aug 27, 2019

rajbgm commented Oct 25, 2019

Oner-T commented Feb 25, 2020

gurkangul commented Feb 28, 2020 • edited Loading

happygrizzly commented Mar 17, 2020

rajbgm commented Mar 19, 2020

TamarZanzouri commented Aug 28, 2020

erikswed commented Apr 3, 2021

KHassen91 commented Apr 24, 2021

miccoh1994 commented Jun 29, 2021 • edited Loading

aflansburg commented Aug 28, 2018 •

edited

Loading

aibars commented Jan 18, 2019 •

edited

Loading

gurkangul commented Feb 28, 2020 •

edited

Loading

miccoh1994 commented Jun 29, 2021 •

edited

Loading