I am trying create a single page web app combining both ASP.NET WebAPI and the Yeoman Angluarjs generator. Currently I have a project structure as laid out below
|-- yeomanAngularApp
|-- app
|-- dist
|-- scripts
|-- index.html
|-- etc...
|-- WebApiApp
|-- App_Start
|-- bin
|-- Content
|-- Controllers
|-- Models
|-- WebApiApp.csproj
|-- dist
|-- scripts
|-- index.html
When I want to build the app distribution, I copy the dist
folder in the yeomanAngularApp
into the WebApiApp
replacing the dist
folder in there.
Now this is all very easy to do. What I really then want to do is to tell the WebApiApp
not to use WebApiApp\
as the root of the project, but use WebApiApp\dist
. This means instead of going to http://localhost/dist/index.html
, I could go to http://localhost/index.html
even though index.html
is in the dist
folder. On top of this I would also like my WebAPI routing for the controllers to play nicely too.
I've been searching for a while and I can't seem to find an answer. The best I can come up with, is using URL rewriting, which to me doesn't feel right.
In ASP.NET server controls that reference resources, you can use absolute or relative paths as you do for client elements. If you use relative paths, they are resolved relative to the path of the page, user control, or theme in which the control is contained.
URL rewriting is exactly what you want, with a condition block to test if the file exists. The content under your dist
directory is static (i.e. lives on the file system) but the WebApiApp
routes are dynamic. So you simply need to test if the route matches a file that exists in the dist
directory or not, if not simply let .NET handle the route. Adding the following to your Web.config
file within the <system.webServer>
section should do the trick:
<rewrite>
<rules>
<rule name="static dist files" stopProcessing="true">
<match url="^(.+)$" />
<conditions>
<add input="{APPL_PHYSICAL_PATH}dist\{R:1}" matchType="IsFile" />
</conditions>
<action type="Rewrite" url="/dist/{R:1}" />
</rule>
<rule name="index.html as document root" stopProcessing="true">
<match url="^$" />
<action type="Rewrite" url="/dist/index.html" />
</rule>
</rules>
</rewrite>
The second rule is optional but it means a request for the root of your site will still serve the index.html
file from the dist
directory, effectively making the root of the project WebApiApp\dist
but still allowing all WebAPI routing.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With