IIS 8.5 rewrite rule subdirectory and ReactJs

2
votes

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>
2
reactjsiisurl-rewriting

2 Answers

2
votes

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

0
votes

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