IIS URL Rewrite Example

I recenlty played around with the URL rewrite module in IIS, and would like to tell you what I have learnt.

URL rewrite is happening on server side and any parameters after ‘#’ will not be passed to server. For references, you can learn from the following links. I will explain how to define rewrites using regular expressions (regex).

http://www.iis.net/learn/extensions/url-rewrite-module/url-rewrite-module-configuration-reference
http://www.iis.net/learn/extensions/url-rewrite-module/url-rewrite-module-20-configuration-reference

For URL rewrite rules, there are few parameters you can define:

  1. URL; this is the original URL without hash value. You can define to match a regex and use matched values by {R:N} in new URL, where N is between 0 and 9.
  2. Conditions; You can define to match all or any of the conditions. When define a condition, it is similar to rules. You need to define the input and pattern fields; which inputs needed to match the regex defined in pattern field. You can also use matched values in new URL by {C:N} where N is between 0 and 9. By default, only the last condition can be referenced. If you want to reference all matched value in conditions, you need to select the checkbox “Track capture groups across conditions” under condition list. For input, you can use {R:N} or server variable like {REQUEST_URI}/{QUERY_STRING}; and you can also apply a rewrite mapping to lookup a new value. For example, I can define a rewrite mapping named “NewSiteRewrites” and uses it to map URL ({R:0}); the input will be {NewSiteRewrites:{R:0}}.

Rewrite Rule Definition screen capture

Let’s say the original URLs are http://yourdomain.com/redmond/events?start=10/01/2014&end=11/01/2014. The expected redirect is http://newdomain.com/washington/redmond?start=10/01/2014&end=11/01/2014#events.  Also original URL query string and new URL hash are optional; and it can be HTTP or HTTPS.  Another valid original URL can be https://yourdomain.com/redmond/details, redirected to https://newdomain.com/washington/redmond

Before start defining the rule and mapping, I would like to show the value of each variable for the original URL:

  1. {REQUEST_URI} = /redmond/events?start=10/01/2014&end=11/01/2014
  2. {QUERY_STRING} = start=10/01/2014&end=11/01/2014; Note: “?” is not included.
  3. {HTTPS} = off; this is a server variable to identify whether http or https is used.  Possible values are “on” and “off”.  You can also use {SERVER_PORT_SECURE}, which returns 0 or 1.
  4. Requested URL under “Match URL” section = redmond/events; Note: “/” is not included at the beginning.

Back to our example:

  1. I break down the new URL into parts: “http”, “://newdomain.com/”, “redmond/events”, <query string>, and <hash>.
  2. “http” part; I create a mapping “CheckSSL” and return either “http” or “https” and directly used in Redirect URL field.
  3. “://newdomain.com”, hard-coded value in Redirect URL field.
  4. “redmond/events” and <hash>, I create a mapping “MyRerouteMapping”, e.g. “/redmond/events” is mapped to “/redmond#events”; and define a condition pattern to parse the path and hash; which will be used in Redirect URL field.
  5. <query string>, I cannot use {QUERY_STRING} directly as it doesn’t have “?” at the beginning; and <query string> is optional.  Also we cannot use the checkbox “Append query string” as hash may exist. Therefore I define a condition pattern to parse from {REQUEST_URI}.

For the complete definitions, please refer to below web.config.

If your rewrite is very complicated, you can also define your only rewrite provider and call it like rewrite mapping.  For more details, please refer to http://www.iis.net/learn/extensions/url-rewrite-module/developing-a-custom-rewrite-provider-for-url-rewrite-module.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
				<rule name="RouteToWWW" patternSyntax="ECMAScript" stopProcessing="true">
				  <match url=".*" />
				  <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
					<add input="{MyRerouteMap:{R:0}}" pattern="([^#]*)(#.*)?" />
					<add input="{REQUEST_URI}" pattern="[^\?]*(\?.*)?" />
				  </conditions>
				  <action type="Redirect" url="{CheckSSL:{HTTPS}}://www.microsoft2.com/{C:1}{C:3}{C:2}" appendQueryString="false" />
				</rule>
            </rules>
            <rewriteMaps>
                <rewriteMap name="CheckSSL">
                    <add key="on" value="https" />
                    <add key="off" value="http" />
                </rewriteMap>
                <rewriteMap name="MyRerouteMap">
                    <add key="redmond/events" value="redmond#events" />
                    <add key="redmond/details" value="redmond" />
                </rewriteMap>
            </rewriteMaps>
        </rewrite>
    </system.webServer>
</configuration>

Happy URL rewrites!!

Advertisements

My readings – 2014 Week 43

  1. Web Components from CSS Tricks
  2. SMIL from CSS Tricks – if you are interested in SVG animation and want to give a try; then you probably will love to read more about this post.
  3. Good post to explain React.js – I haven’t used React.js before, I am interested to learn more about the differences of existing model-view related frameworks, such as AngularJS, KnockoutJS, ember.js, etc.  This is a good post to explain what React.js is.
  4. Simple JavaScript example, but I do learn few new techniques from it.
  5. Visualizations using JavaScript
    a. D3.js
    b. Angular-chart.js
    c. Other 7 visualization libraries
    d. Online charts
  6. Interesting js library “passwordless” that generate one-time use token for user access instead of password.
  7. Web Performance Optimization, don’t have time to read and follow up the whole list; but I really want to build a golden list for web developers role, both frontend and backend development.
  8. A collection of posts from SitePoint about Sassy
    a. CSS Post-Processing “Pleeease
    b. Using Sass Maps; if you are using Sass, you should need to know the new type.
    c. Debugging Sass Maps
  9. Critical rending path; it is good to know how browser renders the page and where the bottlenecks are.
  10. A grateful fallback for SVGs in Old IE; if you still build web for IE8, this post will give you some tricks.

Full stack developer?

I would like to share what my thinking about the tile of full stack developer.

  1. After I dive deeply in the front-end world, there are lots of things you needed to learn and pay a great effort to keep updated with the latest market standards.
  2. Previously I am a backend developer, I build some simple forms and layouts.  However once I moved to retail industry, the front-end side is quite heavy and complicated; and there are many background scripts running to support different features such as analytics, image lazy loading, animations, custom UI (sticky navigation), etc.
  3. If you are a C# developers, you will know that JavaScript is totally different; and one of the major difference is the closure concept.  As you need to know more about JavaScript syntax, jQuery, jQuery UI and many other shared libraries.
  4. Even worse, if you built an UI intensive website; you need to manage your CSS in a smart way.  In general, you will get to use some modular CSS tools and frameworks, e.g. SASS, Compass, OOCSS, etc.
  5. Oh! forget to mention the backend side; like me I need to update my C# languages; some Enterprise libraries, e.g. MS Enterprise libraries, NHibernate, Entity framework, etc.
  6. I think it is very tough job to have a position to know and keep updated with the market trends/standards in all these areas.
  7. I don’t think it is a good and healthy to assign all these works to a single position.  This may impact to the quality of the work.
  8. Above is just my sharing, and I am taking the assumption that you are working in a big and UI intensive website like retail website.  I think it makes more sense if this is a position hiring by a small to medium size company.

You are welcome to share your minds, please feel free to reply.  Just my little thought!!

My readings – 2014 Week 41

  1. JQuery dot dot dot
    It is very useful library to indicate more details for the content.  It works with responsive layout.
  2. Really great idea for picking seats
    Uses different layer including SVG and Canvas marker to speed up rendering.
  3. –CSStyleThis is a library helping you to manage your styles; I think it is good to have a try.
  4. JavaScript Closure from MDN
    It is always difficult/new concept to C# developer about JavaScript closure; but it is a critical element developers needed to understand.
  5. Good post to explain clearly about generator in ES6
  6. Nightmare – a high-level wrapper for Phantomjs

How to create SEO friendly pages

I would like to learn more about SEO friendly content; so I started to search and read bunch of posts and articles about how to boost SEO ranking or how to build SEO contents.

I would like to share those I felt useful with you:

Readings

  1. 8-tips-for-writing-seo-friendly-content
  2. I like this image from bitrebels.com, listing the top 10 SEO tips shown as below.10-simple-seo-tips
  3. 10 SEO mistakes that weaken your rankings
    Instead of telling you what to do to boost up SEO ranking, this post told you what not to do.
  4. Google ranking factorsGoo

Tools:

  1. http://www.wordtracker.com/
  2. http://www.google.com/trends/
  3. http://www.smushit.com/ysmush.it/
  4. https://developers.google.com/speed/pagespeed/insights/
  5. https://plus.google.com/u/0/dashboard
  6. http://moz.com/researchtools/ose

If you have any SEO tips to share, you are welcome to add a comment to this post!!

My readings – 2014 Week 40

  1. Six reason to define constructors with only one argument
    This is very good article to explain clearly why single input argument is better than multiple one.  I also learnt optional new anti-pattern and idempotency, which is very important when dealing with distributed transactions.  More related readings in here and here.
  2. Why using web fonts
    You can get more ideas and how to use web fonts from this post.  And compares existing web font services in the market from this post.  This post also talked about issue of @font-face usage.
  3. Email templates for major mail clients
    Read this post, this post and that post to start building your email templates; I used Premailer and litmus.com, they are easy to use.
  4. How to Build a Responsive Website That Supports Older Browsers
    I learnt those polyfills mentioned in this post and probably need to take some time to look at Respond.js.
  5. A good checklist for mobile UX
  6. Improvements in IE11
    When reading it, I found that I don’t know what is SPDY.  Then I search more, and find out that this is a fast HTTP protocol; and I think it is great to learn more about how to use server push and hint (link tag) to improve UX for your website.  You can get more information from Wikipedia and Google.  I tried to find more about hint usage, how to use/handle in different browsers; but I can’t find any single source mentioning this.  Please kindly share if you have any good resource about this.
  7. CSS Shapes
    It is very cool CSS tricks; It can be widely used once most of popular browsers are supported.  I really like the hover transition using this new CSS trick.
  8. Flexbox by CSS Tricks
  9. 5 JavaScript Array methods, Reduce method is also new to me.
  10. Interesting JavaScript library to detect language for text