I'm trying to get my routes to work with IIS and React Router v4 using BrowserRouter.
On my localhost I have all my routes working as expected. React Router handles everything like I want it to:
http://www.example.com/appfolder/dest
http://www.example.com/appfolder/dest/CODE
http://www.example.com/appfolder/dest/CODE/INVALID/URL
Now, in IIS I've set up a rule that ignores '/appfolder/api/*' for the purpose of serving an api for my app. That works.
How do I get IIS to redirect to 'http://www.example.com/appfolder/dest/CODE' and have React Router handle it according to its rules. If I redirect to '/appfolder/index.html' I loose my 'CODE' which I'd like to keep for ReactRouter to handle.
If I try to redirect to 'http://www.example.com/appfolder/dest/CODE' by using regexp capture groups, I get a 'ERR_TOO_MANY_REDIRECTS'.
I currently have this rule in my web.config:
<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="^/appfolder/api/" negate="true" />
</conditions>
<action type="Redirect" url="/appfolder/dest/CODE" />
<!-- also tried this -->
<!-- action type="Redirect" url="/appfolder/index.html" /-->
</rule>
I found the solution. I changed my action type to Rewrite and it worked like a charm.
IIS rule final solution:
<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="^/appfolder/api/" negate="true" />
</conditions>
<action type="Rewrite" url="/appfolder/index.html" />
</rule>
The only way I was able to get things to work for me using react-router v4 was to use a HashRouter: https://reacttraining.com/react-router/web/api/HashRouter
No web.config changes required!
Related
So, I have my react app hosted in ISS fine, and I have set up the url rewrite module and my react router navigation works fine.
My issue is,
HomeSite/Searchpage I have a table with search results.
When user clicks on one of the results, it will navigate to i.e.
https://www.site/LWM2/Detail/[itemid]
and then on my detail page it gets [itemid] from url to populate information on the page. via
const { [itemid] } = useParams();
How do I set up rules in Url Rewrite to have it go to detail page and preserve the [itemid] information
Current rules:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="RemoveTrailingSlashRule1" stopProcessing="true">
<match url="(.*)/$" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Redirect" url="{R:1}" />
</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="/LWM2/" appendQueryString="false" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I've just created an empty .net core 3.1 / react app with the dotnet cli (dotnet new react -o new-app) and published it into Azure (via WebDeploy base on the downloaded publish profile).
The publish runs successful every time but after it I can't access the client app. The only thing I can see is the default page of azure:
Other parts of the application are working because if I call any endpoint then I got the correct response (e.g. the example action in the example controller of the template returns a valid json).
How should I change to access the client app?
I found the solution. I had to modifiy the web.config because of the client side routing. It is described below:
added a rule to pont the root url to wwwroot/index.html
<rule name="empty-root-index" stopProcessing="true">
<match url="^$" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
<add input="{QUERY_STRING}" pattern="^$|^lc=" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
an other one which gets all the static content from wwwroot (where the client app lives)
<rule name="wwwroot-static" stopProcessing="true">
<match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|ico))" />
<conditions logicalGrouping="MatchAll">
<add input="{HTTP_METHOD}" pattern="GET|HEAD" />
</conditions>
<action type="Rewrite" url="wwwroot/{R:1}" />
</rule>
also one needed to get the client side routing work:
<rule name="html5-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="{HTTP_METHOD}" pattern="GET|HEAD" />
</conditions>
<action type="Rewrite" url="wwwroot/index.html" />
</rule>
last but not least the we have to set the mime types
<handlers>
<add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
<!-- More goes here -->
<handlers>
I have an angularjs app running on .net framework. when i try to run it on .net core, i cannot fix the html5mode fallback on refreshing the page gets error 404
I already tried to create a web.config for url rewrite and creating a middleware.
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS 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>
I want to run angularjs html5mode on .net core using URL Rewrite
On your project, create a xml file like IISUrlRewrite.xml and copy paste the configuration
<rewrite>
<rules>
<rule name="AngularJS 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>
Then on your Startup.cs Configure() read that file and attach it on RewriteOptions().AddIISUrlRewrite
using (StreamReader iisUrlRewriteReader = File.OpenText("IISUrlRewrite.xml"))
{
var rules = new RewriteOptions();
rules.AddIISUrlRewrite(iisUrlRewriteReader);
app.UseRewriter(rules);
}
app.UseFileServer();
source reference here
I have been struggling to understand the rewrite rules in IIS 8.5 and would like some help. Basically for React app I would need to rewrite all the urls to enter at index.html plus optional queryparams.
the React app has to life in a sub director of the web server, as it is only an extension to the main-site
so but for the assets (folder), static (folder) and manifest.json (file) I do not need it to rewrite the url. these would fall in
www.some-site.com/catalog/door-selector/(folders or files and also the index.html)
all routes would start here too, see 2 examples:
www.some-site.com/catalog/door-selector/doors
www.some-site.com/catalog/door-selector/doors/(name of the door)
So I came up with the following: (doesnt work)
<rule name="Door Selector Door" patternSyntax="ExactMatch">
<match url="^catalog/door-selector/.+" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^~/static/~(.*)" negate="true" />
<add input="{REQUEST_URI}" pattern="^~/assets/~(.*)" negate="true" />
<add input="{REQUEST_URI}" pattern="^~/manifest.json" negate="true" />
</conditions>
<action type="Rewrite" url="catalog/door-selector/index.html" appendQueryString="true"/>
</rule>
With a simple rewrite and no conditions I get it to work but I would prefer to do it with only a couple of rules.
note: I forgot that certain assets were coming from the production server. and that was rewriting parts of the url!
final rule settled on:
<rule name="Door Selector React" enabled="true">
<match url="catalog/door-selector/(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="catalog/door-selector/index.html" appendQueryString="true"/>
</rule>
You could use below url rewrite rule:
<rule name="React Rewrite" enabled="true" patternSyntax="ECMAScript">
<match url="(.*)" negate="false" />
<action type="Rewrite" url="/index.html" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="^(/assets/)" negate="true" />
<add input="{REQUEST_URI}" pattern="^(/static/)" negate="true" />
<add input="{REQUEST_URI}" pattern="manifest.json" negate="true" />
</conditions>
</rule>
Note:If you want to match subdirectory of your application or site you could set the condition as per your requirement.
Or you could share your site folder structure so we can help you more.
Regards,
Jalpa
you can use the below URL redirect. in web.config file
ile
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<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="/IIS folder path/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
this will add new IIS redirect rule
I'm trying to get an angularjs + web api 2 with OAuth. Basically I select individual accounts from the Visual Studio ASP.NET Web Application template.
I need a rewrite for the angular stuff but I'm finding that makes it so I can't get my /token for the OAuth stuff? How can these 2 play nice?
<rewrite>
<rules>
<rule name="angularjs 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>
I always get this after I post ><
I added this to the conditions and it worked...
<add input="{REQUEST_URI}" pattern="^/token" negate="true" />