AngularJS, HTML 5 Mode, IIS (Express) and hitting F5/Refresh - Setting up URL Rewrite via the IIS Manager UI
In my previous post, I covered the configuration changes that you need to make in your web.config file to get IIS to route requests for URIs that should be handled by your AngularJS application back to, well, your AngularJS application. I thought I'd complete the picture by documenting how to do this via the Internet Information Services (IIS) Manager user interface as this may help someone who's less comfortable with working with config files.
The first thing to do is to load up Internet Information Services (IIS) Manager. There are a couple of ways to do this:
- Start > Type to search > Internet Infor ... By this point what you're looking for should be there to load
- [Windows Key + R] > inetmgr > OK
- Control Panel > Administrative Tools > Internet Information Services (IIS) Manager
Whichever way you get there, the next thing you need to do is choose the site that you want to apply the rewrite rule to. To do this, expand out the tree view on the left through [NAME OF YOUR COMPUTER] > Sites and then choose the site you want to work with:
Once you've done this, double click on "URL Rewrite" in the IIS section in the main area on the left hand (main) side. This will open up the URL Rewrite configuration UI where you can create a new URL Rewrite rule that matches the one that I've shown, via web.config, in my previous post.
To add the new rule, click on "Add Rule(s)..." in the "Actions" pane on the right hand side, then choose "Blank rule" (under "Inbound rules") and click "OK" in the window that has appeared. Once you've done this, you'll be presented with a quite comprehensive screen that allows you to configure the new rule. This screen consists of five sections:
- Somewhere to enter the name for your rule (We'll need this - you have to name your rule!)
- The "Match URL" section - where you describe what URLs should trigger this rewrite rule (We'll need this - we want to evaluate this URL Rewrite rule for every request)
- The "Conditions" section - where you describe what conditions should be matched for this rule (We'll need this to narrow down which requests we react to)
- The "Server Variables" section - We won't need this!
- The "Action" section - where you describe what to do if the rule matches (We'll need this as we need to tell IIS to rewrite the request!)
To match the configuration that was created in my previous post, the rule needs a name, after that we need to apply these configuration settings:
- Match URL: Choose "Matches the Pattern" for "Requested URL", "Using": "Regular Expressions" with a "Pattern" of ".*"
- Conditions: Click "Add", leave "Condition Input" blank and choose "Check if input string" "Is Not a File" and click OK to save. Repeat the process for "Is Not a Directory"
- Action: Choose "Rewrite" for "Action type" and then set the "Rewrite URL" to "/", making sure that "Append query string" is checked to preserve any query string.
Once this is done you can save the rule and then, if you want, look at your web.config file and see that the generated configuration is the same as that in my previous post.
My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.