If you intend to run the application under IIS, you need to install Application Request Routing 3 extension for IIS first. Once it's installed, you have to enable ARR and reverse proxying from IIS management console:
Next, you will have to enable X-Forwarded-*
headers in URL Rewrite settings:
The variables you have to add are HTTP_X_FORWARDED_HOST
, HTTP_X_FORWARDED_PROTO
, and HTTP_X_FORWARDED_SCHEMA
.
Next, you have to go to your site's configuration, to URL Rewrite settings:
From here, you have to create 2 rules: one to reverse proxy to the API server, and another to serve index.html to all 404s. They should also be in that exact order. Let's set up the reverse proxy first:
Replace localhost:5000
with your configured API server location. If your server does not use TLS, check "Enable SSL
offloading". Once the rule is created, you can optionally rename it. In this example, I will name the rule "API".
Let's configure it, so that it functions properly. Double click it to edit it.
In here, you want to set the options as follows:
- Match URL
- Requested URL: Matches the Pattern
- Using: Wildcards
- Pattern:
api/*
- Ignore case checked
- Conditions
- Remove all
- Server variables
HTTP_X_FORWARDED_HOST
with value of{HTTP_HOST}
, and "Replace existing value" checked.HTTP_X_FORWARDED_PROTO
with value ofhttps
orhttp
, depending on whether you serve requests using TLS or not.
- Action
- Action type: Rewrite
- Rewrite URL:
http://<api host>/{R:0}
, wherehttp
is replaced withhttps
if the API server uses TLS.<api host>
will be replaced with the host you entered earlier. - Append query string checked.
- Stop processing of subsequent rules checked.
Once that's done, press Apply on the right, and go back to the rules. Time to set up the SPA rule. Create a new blank rule, and name it "AngularSPA".
You want to set it up as follows:
- Match URL
- Requested URL: Matches the pattern
- Using: Wildcards
- Pattern:
*
- Ignore case checked
- Conditions Create 2 new as follows:
{REQUEST_FILENAME}
: Check if input string: Is Not a File{REQUEST_FILENAME}
: Check if input string: Is Not a Directory
- Server variables None
- Action
- Action type: Rewrite
- Rewrite URL:
index.html
- Append query string checked.
- Stop processing of subsequent rules checked.
Once that's done, press Apply.
At this point, you should have a working configuration.