ASP.net OWIN AngularJS html5mode url redirecting - asp.net

Question

I am trying to setup a single page application with a Web API restful back-end. I used the "OWIN WebAPI SPA Template" to start my project. This template defaults the static file serving to the public/ folder within the solution's root directory. I want to support html5 urls, IE. localhost/madeUpPath which should hit the index.html page. In order to do this, I setup a rewrite rule in the Web.config file:
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_URI}" pattern="api/" ignoreCase="true" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
The issue I am having is that since the static files live in /public/ the {REQUEST_FILENAME} thinks the file is relative to / and the url localhost/main.css is rewritten to localhost/
I have tried changing the rule to this:
<add input="public/{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="public/{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
but that did not work. How can I achieve my desired result? Thank you.
Edit: I found something that seems to work, but isn't exactly what I was looking for.
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url="([a-zA-Z0-9-_.\/]+\.(css|js|less|json|jpeg|jpg|png|gif|svg|xml|html))$" />
<action type="Rewrite" url="/public/{R:0}" />
</rule>
<rule name="Second 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="/" />
</rule>
</rules>
</rewrite>

Answer 1

Firstly, this code doesn't because you're using OWIN server for static files:
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
Could you please to use next code:
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url="^((?!(api|\.)).)*$" />
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
Regular expression gives us ability to ignore api and any file paths.

Answer 2

We also use Owin to serve content out of a sub folder and the following works perfectly for us:
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{APPL_PHYSICAL_PATH}public{URL}" matchType="IsFile" ignoreCase="true" negate="true" />
<add input="{APPL_PHYSICAL_PATH}public{URL}" matchType="IsDirectory" ignoreCase="true" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
It's very similar to this comment, but I changed their {REQUEST_URI} variables to {URL} so that it will also ignore existing files even if they have query strings, which is necessary for cache busting resources, like site.css?ec99043d9af49f2bd7c2.
Edit: I also just found this Microsoft example which with some tweaking may also work for this scenario, but I haven't tested it myself:
<rewrite>
<rules>
<rule name="Angular Routes" 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="/MyApp/" />
<!--<action type="Rewrite" url="/" />-->
</rule>
</rules>
</rewrite>