Techie BabajiLearn to Code. Build Real Skills.
IIS (Internet Information Services) · Hosting Applications

Hosting React and Angular Apps

Single-page apps are just static files — but their client-side routes need a rewrite rule so refreshing a page does not return 404.

Intermediate 5 min Lesson 14 of 33Covers IIS 10 on Windows Server 2019/2022/2025 and Windows 10/11.
Before you start:Applications and Virtual Directories
0/33 in IIS
On this page · 5 min · Intermediate

On this page

  1. In simple words
  2. Learning objectives
  3. Explanation
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 30, 2026

Related tutorials

Interview questions

In simple words#

A React app is one big book (index.html) with many chapters. When someone asks IIS for “/dashboard”, IIS looks for a room called dashboard and finds nothing. The rewrite rule says: “for any unknown address, hand over the book — it will open the right chapter itself.”

SPA
Single-page app: one HTML file, routes handled in the browser.
URL Rewrite
IIS module that rewrites unknown URLs to index.html.
Base href
The path the app is served from (/ or /app/).

Learning objectives#

  • Deploy a React or Angular build to IIS
  • Write the SPA fallback rewrite rule
  • Exclude API paths
  • Cache files correctly

Explanation#

Build the app: npm run build (React/Vite → dist; Angular → dist/<app>/browser). Copy the output to the site folder.

Install the URL Rewrite module. Add a rule that rewrites requests which are not real files or folders to /index.html.

Exclude /api (and other apps) from the rule so backend calls are not rewritten.

Hashed asset files can be cached for a year; index.html should not be cached so new releases appear immediately.

Code example: web.config for a React or Angular SPA#

XMLweb.config Illustrative
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA fallback" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/api/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
    </staticContent>
  </system.webServer>
  <location path="index.html">
    <system.webServer>
      <staticContent><clientCache cacheControlMode="DisableCache" /></staticContent>
    </system.webServer>
  </location>
</configuration>
Expected output
Refreshing https://shop.example.com/products/5 loads the app correctly; /api calls reach the API; assets are cached for a year, index.html never.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. The rule matches every URL.
  2. Conditions skip real files, real folders and /api.
  3. Everything else is rewritten (not redirected) to index.html.
  4. Cache headers differ for hashed assets and index.html.

Real-world use case#

An Angular admin portal and its ASP.NET Core API run on the same IIS site, with the API as a child application at /api.

Common mistakes#

HTTP 500.19 after adding the rule

The URL Rewrite module is not installed. Install it, then reload.

Rewriting /api to index.html

API calls get HTML back and JSON parsing fails. Exclude API paths.

Best practices#

  • Install URL Rewrite before deploying
  • Exclude backend paths
  • No-cache for index.html
  • Copy the whole build folder each release

Remember this#

SPA on IIS = static files + rewrite to index.html.

Skip real files, folders and /api.

Rewrite ≠ redirect: the URL stays the same.

Practice exercise#

Your task: An Angular app is hosted under /admin/. What else must match?

Show solution
Text Illustrative
Build with --base-href /admin/ and rewrite unknown URLs to /admin/index.html (place the web.config in the /admin folder).

Mini quiz#

Hosting React and Angular Apps quizMultiple choice Question 1 of 1

Why does refreshing /dashboard in a SPA return 404 without a rewrite rule?

Score so far: 0/0

Want more? Practise all IIS MCQs · IIS interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.