IIS server training slash issue solution with example

 This web.config file configures the behavior of a web application, specifically for a web server like IIS (Internet Information Services). It includes URL rewriting rules for handling URLs, file caching, and MIME type configurations. Here’s a breakdown of the configuration:

1. XML Declaration

xml

<?xml version="1.0" encoding="UTF-8"?>

This defines the XML version and encoding used in the file.

2. System Web Server Configuration

xml

<system.webServer>

This section contains settings related to the web server, such as URL rewriting and static content settings.

3. URL Rewrite Rules

The rules inside the <rewrite> tag are used to modify the URL requests before they reach the application. These rules handle common issues such as removing trailing slashes, redirecting, and serving the correct content.

Rule 1: Remove Trailing Slash

xml

<rule name="RemoveTrailingSlash" stopProcessing="true">
  <match url="(.*)/$" />
  <conditions>
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" negate="true" />
  </conditions>
  <action type="Redirect" redirectType="Permanent" url="{R:1}" />
</rule>

• Purpose: This rule removes a trailing slash from URLs that do not point to directories or the index.html file.
• Action: If the URL ends with a / but is not a directory or doesn't resolve to index.html, it will redirect to the same URL without the trailing slash.
• Example: /about/ → /about

Rule 2: Rewrite Directory to index.html

xml

<rule name="RewriteDirectoryToIndexHtml" stopProcessing="true">
  <match url="^(.*)$" />
  <conditions>
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" />
  </conditions>
  <action type="Rewrite" url="{R:1}/index.html" />
</rule>

• Purpose: This rule checks if a directory is requested, but there is no file or directory with that name. If the directory exists and contains an index.html, it rewrites the request to load the index.html file.
• Example: /about/ → /about/index.html

Rule 3: Redirect to Clean URL (No Trailing Slash)

xml

<rule name="RedirectToCleanURL" stopProcessing="true">
  <match url="^(.*)$" />
  <conditions>
    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    <add input="{REQUEST_URI}" pattern="/$" negate="true" />
    <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" />
  </conditions>
  <action type="Redirect" redirectType="Permanent" url="{R:1}/" />
</rule>

• Purpose: This rule ensures that a directory is redirected to a clean URL with a trailing slash if it is not a file and it has an index.html file.
• Example: /about → /about/

Rule 4: Angular Routes (Fallback)

xml

<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="index.html" />
</rule>

• Purpose: This rule is specifically for Single Page Applications (SPA) like Angular. If the request does not correspond to an existing file or directory, the request is rewritten to serve index.html, allowing the Angular router to handle the routing.
• Example: /about → index.html (Angular router processes it)

4. Static Content Configuration

The <staticContent> section manages the configuration for static files like images, fonts, and JSON files.

xml

<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />

• Purpose: This sets the cache control headers to instruct browsers to cache static content for 7 days.

xml

<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

• Purpose: These lines modify the MIME type configuration for certain file extensions:
  • .json files are mapped to application/json.
  • .woff files are mapped to application/font-woff.
  • .woff2 files are mapped to application/font-woff2.
• The remove statements ensure that previous mappings are cleared before setting the new ones.

<?xml version="1.0" encoding="UTF-8"?>

<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <!-- Remove trailing slash for non-directory paths -->

        <rule name="RemoveTrailingSlash" stopProcessing="true">

          <match url="(.*)/$" />

          <conditions>

            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

            <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" negate="true" />

          </conditions>

          <action type="Redirect" redirectType="Permanent" url="{R:1}" />

        </rule>

        

        <!-- Handle folder/index.html files -->

        <rule name="RewriteDirectoryToIndexHtml" stopProcessing="true">

          <match url="^(.*)$" />

          <conditions>

            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

            <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" />

          </conditions>

          <action type="Rewrite" url="{R:1}/index.html" />

        </rule>

        

        <!-- Maintain clean URLs for directories (e.g., "/about" instead of "/about/") -->

        <rule name="RedirectToCleanURL" stopProcessing="true">

          <match url="^(.*)$" />

          <conditions>

            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

            <add input="{REQUEST_URI}" pattern="/$" negate="true" />

            <add input="{REQUEST_FILENAME}/index.html" matchType="IsFile" />

          </conditions>

          <action type="Redirect" redirectType="Permanent" url="{R:1}/" />

        </rule>

        

        <!-- Fallback to Angular router for all other URLs -->

        <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="index.html" />

        </rule>

      </rules>

    </rewrite>

    

    <staticContent>

      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />

      <remove fileExtension=".json" />

      <mimeMap fileExtension=".json" mimeType="application/json" />

      <remove fileExtension=".woff" />

      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />

      <remove fileExtension=".woff2" />

      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

    </staticContent>

  </system.webServer>

</configuration>

Summary of Functionality

• Trailing Slash Handling: Removes unnecessary trailing slashes from URLs and redirects to the clean version.
• Directory to index.html: Ensures that directory requests are properly served with index.html if available.
• Clean URLs: Ensures directories have trailing slashes for cleaner URLs.
• SPA Fallback: Redirects non-file and non-directory requests to index.html for SPA routing (e.g., Angular).
• Static File Caching: Caches static content for 7 days and configures MIME types for fonts and JSON.