Redirect and rewrite rules in Firebase - Step-by-Step Execution

Process Flow - Redirect and rewrite rules

User Request URL

↓

Check Redirect Rules

| No↓

Check Rewrite Rules

| No↓

Serve Original Content

↓

End

When a user requests a URL, Firebase first checks redirect rules to send a redirect response if matched. If no redirect applies, it checks rewrite rules to serve different content without changing the URL. Otherwise, it serves the original content.

Execution Sample

Firebase

redirects:
  - source: /old-page
    destination: /new-page
    type: 301
rewrites:
  - source: /app/**
    destination: /index.html

This config redirects '/old-page' to '/new-page' with a 301 status, and rewrites any '/app/...' URL to serve 'index.html' without changing the URL.

Process Table

Step	User Request URL	Redirect Rule Match?	Redirect Action	Rewrite Rule Match?	Rewrite Action	Final Response
1	/old-page	Yes	Send 301 redirect to /new-page	No	N/A	Redirect to /new-page
2	/app/dashboard	No	N/A	Yes	Serve /index.html content	Serve /index.html content with URL /app/dashboard
3	/about	No	N/A	No	N/A	Serve original /about content
4	/old-page/sub	No	N/A	No	N/A	Serve original /old-page/sub content
5	/app	No	N/A	Yes	Serve /index.html content	Serve /index.html content with URL /app
6	/new-page	No	N/A	No	N/A	Serve original /new-page content
7	/old-page	Yes	Send 301 redirect to /new-page	No	N/A	Redirect to /new-page

💡 Execution stops after sending redirect or serving content based on matched rules.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7
User Request URL	-	/old-page	/app/dashboard	/about	/old-page/sub	/app	/new-page	/old-page
Redirect Rule Match	-	Yes	No	No	No	No	No	Yes
Rewrite Rule Match	-	No	Yes	No	No	Yes	No	No
Final Response	-	Redirect to /new-page	Serve /index.html content with URL /app/dashboard	Serve original /about content	Serve original /old-page/sub content	Serve /index.html content with URL /app	Serve original /new-page content	Redirect to /new-page

Key Moments - 3 Insights

Why does a redirect stop further processing of rewrite rules?

Because redirect sends a response back to the browser immediately (see execution_table step 1), so rewrite rules are not checked after a redirect match.

If a URL matches both redirect and rewrite rules, which one applies?

Redirect rules have priority and apply first (see step 1 and 7). Rewrite rules only apply if no redirect matches.

Does a rewrite change the URL shown in the browser?

No, rewrite serves different content internally without changing the URL (see step 2 and 5). The browser URL stays the same.

Visual Quiz - 3 Questions

Look at the execution table, what is the final response at step 3 when the user requests '/about'?

A Redirect to /new-page

B Serve /index.html content

C Serve original /about content

D Serve original /old-page/sub content

💡 Hint

Check the 'Final Response' column in row for step 3.

At which step does the redirect rule match the URL '/old-page'?

A Step 2

B Step 1

C Step 5

D Step 4

💡 Hint

Look at the 'Redirect Rule Match?' column for '/old-page' requests.

If the redirect rule for '/old-page' was removed, what would be the final response at step 1?

A Serve original /old-page content

B Redirect to /new-page

C Serve /index.html content

D Serve original /about content

💡 Hint

Without redirect match, rewrite rules are checked; '/old-page' does not match rewrite rules in the table.

Concept Snapshot

Redirect and rewrite rules in Firebase:
- Redirects send a browser response to change URL.
- Rewrites serve different content without changing URL.
- Redirects checked first; if none match, rewrites apply.
- If no rules match, original content is served.
- Use redirects for URL changes, rewrites for SPA routing.

Full Transcript

When a user requests a URL, Firebase first checks if any redirect rule matches. If yes, it sends a redirect response to the browser, stopping further checks. If no redirect matches, it checks rewrite rules to serve different content internally without changing the URL shown. If no rewrite matches, the original content is served. Redirects have priority over rewrites. Rewrites are useful for single-page apps to serve index.html for many URLs. Redirects change the browser URL, rewrites do not.

Practice

1. What is the main difference between a redirect and a rewrite in Firebase Hosting?

easy

A. Redirect changes the browser URL, rewrite does not change the URL shown.

B. Rewrite changes the browser URL, redirect does not change the URL shown.

C. Both redirect and rewrite always change the browser URL.

D. Neither redirect nor rewrite affect the browser URL.

Solution

1. Step 1: Understand redirect behavior

   A redirect sends the user to a new URL and updates the browser address bar to show this new URL.

2. Step 2: Understand rewrite behavior

   A rewrite serves different content but keeps the original URL visible in the browser address bar.

3. Final Answer:

   Redirect changes the browser URL, rewrite does not change the URL shown. -> Option A

4. Quick Check:

   Redirect updates URL, rewrite keeps URL same [OK]

Hint: Redirect changes URL, rewrite hides content change [OK]

Common Mistakes:

• Confusing redirect with rewrite behavior
• Thinking rewrite changes browser URL
• Assuming redirect does not update URL

2. Which of the following is the correct Firebase Hosting syntax to redirect from /old-page to /new-page?

easy

A. "redirect": [{"source": "/old-page", "destination": "/new-page"}]

B. "rewrites": [{"source": "/old-page", "destination": "/new-page"}]

C. "rewrites": [{"source": "/old-page", "type": 301, "destination": "/new-page"}]

D. "redirects": [{"source": "/old-page", "destination": "/new-page", "type": 301}]

Solution

1. Step 1: Identify redirect syntax

   Redirects require a source, destination, and a type (like 301 for permanent redirect).

2. Step 2: Check options for correct syntax

   "redirects": [{"source": "/old-page", "destination": "/new-page", "type": 301}] correctly includes source, destination, and type 301. Others miss type or use rewrites incorrectly.

3. Final Answer:

   "redirects": [{"source": "/old-page", "destination": "/new-page", "type": 301}] -> Option D

4. Quick Check:

   Redirect needs type code like 301 [OK]

Hint: Redirects need a type code (301 or 302) [OK]

Common Mistakes:

• Omitting the redirect type code
• Using rewrites instead of redirects for URL change
• Placing type in rewrites block

3. Given this Firebase Hosting config snippet:

{
  "rewrites": [
    {"source": "/app/**", "destination": "/index.html"}
  ]
}

What happens when a user visits /app/profile?

medium

A. The browser URL stays /app/profile but serves content from /index.html.

B. The browser URL changes to /index.html and shows that page.

C. The browser URL changes to /app/index.html and shows that page.

D. The browser returns a 404 error because /app/profile does not exist.

Solution

1. Step 1: Understand rewrite with wildcard

   The rewrite rule matches any URL starting with /app/ and serves /index.html content without changing the URL.

2. Step 2: Apply to /app/profile

   Visiting /app/profile triggers the rewrite, so content from /index.html is served but URL remains /app/profile.

3. Final Answer:

   The browser URL stays /app/profile but serves content from /index.html. -> Option A

4. Quick Check:

   Rewrite serves content without URL change [OK]

Hint: Rewrite serves content but keeps URL same [OK]

Common Mistakes:

• Thinking rewrite changes the URL
• Expecting 404 error for unmatched files
• Assuming redirect happens instead of rewrite

4. You wrote this Firebase Hosting config:

{
  "redirects": [
    {"source": "/home", "destination": "/index.html"}
  ]
}

But the redirect does not work as expected. What is the problem?

medium

A. Using redirects instead of rewrites for serving index.html.

B. The source path should be /home/** to match all subpaths.

C. Missing the redirect type (301 or 302) in the redirect rule.

D. The destination should be a full URL, not a relative path.

Solution

1. Step 1: Analyze the redirect behavior

   A redirect requires a type (301 or 302) to work properly. Missing the type causes the redirect to fail.

2. Step 2: Identify the likely expectation and fix

   Adding the redirect type (301 or 302) will fix the redirect. Using rewrites is an alternative if you want to serve content without changing the URL.

3. Final Answer:

   Missing the redirect type (301 or 302) in the redirect rule. -> Option C

4. Quick Check:

   Redirect requires type code [OK]

Hint: Redirects need a type code (301 or 302) [OK]

Common Mistakes:

• Using redirects instead of rewrites to preserve URL
• Confusing redirects with rewrites
• Using relative paths incorrectly

5. You want to support a single-page app on Firebase Hosting where all URLs under /app/ show index.html content without changing the URL, but also redirect /old-app permanently to /app/. Which config snippet correctly achieves this?

hard

A. {
"rewrites": [
{"source": "/old-app", "destination": "/app/"},
{"source": "/app/**", "destination": "/index.html"}
]
}

B. {
"redirects": [
{"source": "/old-app", "destination": "/app/", "type": 301}
],
"rewrites": [
{"source": "/app/**", "destination": "/index.html"}
]
}

C. {
"redirects": [
{"source": "/old-app/**", "destination": "/app/", "type": 302}
],
"rewrites": [
{"source": "/app/**", "destination": "/index.html"}
]
}

D. {
"redirects": [
{"source": "/old-app", "destination": "/index.html", "type": 301}
],
"rewrites": [
{"source": "/app/**", "destination": "/app/"}
]
}

Solution

1. Step 1: Redirect /old-app to /app/ permanently

   Use a redirect with type 301 from /old-app to /app/ to update browser URL.

2. Step 2: Rewrite all /app/** URLs to serve index.html without changing URL

   Use a rewrite rule matching /app/** to serve /index.html content while keeping URL unchanged.

3. Step 3: Verify option correctness

   { "redirects": [ {"source": "/old-app", "destination": "/app/", "type": 301} ], "rewrites": [ {"source": "/app/**", "destination": "/index.html"} ] } correctly combines a 301 redirect and a rewrite for SPA support. Others misuse rewrites or redirect types.

4. Final Answer:

   { "redirects": [ {"source": "/old-app", "destination": "/app/", "type": 301} ], "rewrites": [ {"source": "/app/**", "destination": "/index.html"} ] } -> Option B

5. Quick Check:

   Redirect updates URL, rewrite serves SPA content [OK]

Hint: Redirect for URL change, rewrite for SPA content [OK]

Common Mistakes:

• Using rewrite instead of redirect for URL change
• Missing redirect type or using wrong type
• Rewriting to wrong destination path