-1

we're creating a new architecture for our microfrontends, and we'd like to avoid the use of another framework to orquestrate it, like single-spa. Our company currently use IIS for other products, and we need to keep it that way.

So, in order to have multiple SPAs responding to the same address, we simply depose our built SPAs in IIS's content directory, like this:

IIS root folder:

  • spa1
  • spa2

I can access myhost/spa1 and myhost/spa2 normally, and navigate thought their own internal routes (we're using Angular).

The problem is, we want to have URLs without #, and than we need to tell IIS to redirect whatever is a sub-route, to it's SPA main route.

We have something in place, it works for myhost/spa1, myhost/spa1/detail, but does not work for myhost/spa1/detail/1. Let's say, the third level.

Could someone help me with this?

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA Rule" stopProcessing="true">
                    <match url="(.+)/.*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
            </rules>
        </rewrite>
        <directoryBrowse enabled="true" />
    </system.webServer>
</configuration>
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
Davi Daniel Siepmann
  • 169
  • 2
  • 13
  • Does it work if you disable directory browsing and change your action to url="{R:1}/index.html"? – MisterSmith Jan 13 '21 at 20:29
  • sorry for the long delay, although you're rule seems to work in some scenarios, I couldn't get it to work in mine. I did find a solution myself, after quite a few trials. I'm posting it here. Thank you for the effort. – Davi Daniel Siepmann Jan 20 '21 at 18:35

2 Answers2

1

Try to use this URL rewrite rule:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA Rule" stopProcessing="true">
                    <match url="(.+)/(.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/{R:2}" />
                </rule>
            </rules>
        </rewrite>
        <directoryBrowse enabled="true" />
    </system.webServer>
</configuration>

enter image description here

Ding Peng
  • 3,702
  • 1
  • 5
  • 8
0

After a few trials, and another requirement (we need to have a selected "company" in the URL), I came up with something that's working pretty well:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Application Hub Rule" stopProcessing="true">
                    <match url="(hub)(/?.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
                <rule name="CRM Customer Rule" stopProcessing="true">
                    <match url="(crm/customer)(/?.*)" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

It's quite unique as requirement, I know. But it turns out the rules are working pretty well. As soon user enters my-host/COMP_CODE/hub, my Angular application handles the URL changes, because everything after my-host/COMP_CODE/hub/**/** is redirected by IIS to the Hub's root folder. Once you enter my-host/COMP_CODE/crm/customer and it's sub-routes, IIS redirects everything to Customer's root folder, and Angular takes care of URL changes.

Only thing is, in your Angular's RouterModule.forRoot() configuration, you need to make sure Angular's Router understands path: ':db/hub' (among other things).

Thanks for the guys who tried to help.

Davi Daniel Siepmann
  • 169
  • 2
  • 13
  • this way we don't need to have a web-shell, single-spa or anything... same rules could be created for nginx, as far as I can tell, so you can replicate for a Docker container. If this is the best aproach, in the other hand, I'm not totally sure – Davi Daniel Siepmann Jan 20 '21 at 18:49