Redirect and rewrite rules in Firebase - Deep Dive

Overview - Redirect and rewrite rules

What is it?

Redirect and rewrite rules in Firebase Hosting let you control how web requests are handled. Redirects send visitors from one URL to another, changing the address they see. Rewrites keep the URL the same but serve different content behind the scenes. These rules help manage site structure, user experience, and backend integration.

Why it matters

Without redirects and rewrites, users might see broken links or confusing URLs, hurting their experience. Redirects guide users smoothly to new pages or updated content. Rewrites let you serve dynamic content or APIs without changing URLs, making sites faster and easier to maintain. They keep websites organized and user-friendly.

Where it fits

Before learning redirects and rewrites, you should understand basic web hosting and URLs. After mastering these rules, you can explore advanced Firebase features like Cloud Functions and security rules to build dynamic, secure web apps.

Mental Model

Core Idea

Redirects change the URL users see by sending them elsewhere, while rewrites keep the URL but serve different content behind the scenes.

Think of it like...

Imagine a mailroom: a redirect is like forwarding your mail to a new address, so the mail physically goes somewhere else. A rewrite is like opening your mail and replacing the letter inside without changing the envelope's address.

┌─────────────┐       Redirect       ┌─────────────┐
│ User visits │ ──────────────────▶ │ New URL     │
└─────────────┘                     └─────────────┘

┌─────────────┐       Rewrite        ┌─────────────┐
│ User visits │ ──────────────────▶ │ Different   │
│ URL stays   │                     │ content     │
└─────────────┘                     └─────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding URLs and Requests

Concept: Learn what URLs are and how browsers request web pages.

A URL is like an address for a webpage. When you type a URL in your browser, it sends a request to a server asking for that page. The server then sends back the page content to show you.

Result

You understand that URLs point to content on the internet and that browsers ask servers for this content.

Knowing how URLs and requests work is essential because redirects and rewrites change how these requests are handled.

2

Foundation

What Are Redirects and Rewrites?

Concept: Introduce the basic difference between redirects and rewrites.

Redirects tell the browser to go to a different URL, changing what the user sees in the address bar. Rewrites keep the URL the same but serve different content from the server, hiding the change from the user.

Result

You can distinguish between changing the URL seen by users and changing the content served without changing the URL.

Understanding this difference helps you decide when to use each rule to improve user experience.

3

Intermediate

Configuring Redirects in Firebase

🤔Before reading on: do you think Firebase redirects change the browser URL or keep it the same? Commit to your answer.

Concept: Learn how to write redirect rules in Firebase Hosting configuration.

In Firebase, redirects are set in the firebase.json file under the 'redirects' section. You specify the source URL, the destination URL, and the HTTP status code (like 301 for permanent). For example: { "source": "/old-page", "destination": "/new-page", "type": 301 } This tells Firebase to send users from /old-page to /new-page permanently.

Result

When users visit /old-page, their browser URL changes to /new-page automatically.

Knowing how to configure redirects lets you manage URL changes smoothly, preserving SEO and user bookmarks.

4

Intermediate

Setting Up Rewrites in Firebase

🤔Before reading on: do you think rewrites in Firebase change the URL users see or just the content served? Commit to your answer.

Concept: Learn how to write rewrite rules to serve different content without changing the URL.

Rewrites are also set in firebase.json under 'rewrites'. You specify the source URL and the destination, which can be a static file or a Cloud Function. For example: { "source": "/app/**", "function": "appServer" } This means any URL starting with /app/ will serve content from the 'appServer' Cloud Function, but the URL stays the same in the browser.

Result

Users see the original URL but get dynamic content from the backend.

Rewrites let you hide backend complexity and serve dynamic content while keeping URLs clean.

5

Intermediate

Combining Redirects and Rewrites

🤔Before reading on: can redirects and rewrites be used together for the same URL? Commit to your answer.

Concept: Understand how Firebase processes redirects and rewrites and how to combine them effectively.

Firebase processes redirects before rewrites. If a URL matches a redirect, it sends the user to a new URL. If not, it checks rewrites. For example, you can redirect old URLs to new ones and rewrite API calls to Cloud Functions. This order ensures users are sent to the right place and get the correct content.

Result

Your site handles URL changes and dynamic content smoothly without conflicts.

Knowing the processing order prevents rule conflicts and unexpected behavior.

6

Advanced

Using Wildcards and Regular Expressions

🤔Before reading on: do Firebase redirect and rewrite rules support wildcards or regex? Commit to your answer.

Concept: Learn how to use patterns to match multiple URLs in rules.

Firebase supports glob-style wildcards like * and ** in source URLs. For example, /blog/** matches all URLs under /blog/. You can capture parts of the URL and use them in destinations. This lets you write flexible rules without listing every URL. However, Firebase does not support full regex in these rules.

Result

You can write concise rules that cover many URLs, making maintenance easier.

Using wildcards efficiently reduces errors and simplifies large site configurations.

7

Expert

Performance and SEO Implications

🤔Before reading on: do you think redirects always hurt site speed and SEO? Commit to your answer.

Concept: Explore how redirects and rewrites affect site performance and search engine rankings.

Redirects add an extra step because the browser must request the new URL, which can slow loading slightly. Too many redirects can confuse search engines and hurt SEO. Rewrites are faster since the URL stays the same and content is served directly. Using 301 redirects signals permanent moves to search engines, preserving SEO value. Misusing these rules can cause loops or broken links.

Result

You understand how to balance user experience, SEO, and performance when using these rules.

Knowing these effects helps you design rules that keep your site fast and search-friendly.

Under the Hood

When a user visits a URL, Firebase Hosting checks the firebase.json rules in order. If a redirect matches, it sends an HTTP response telling the browser to request a new URL, changing the address bar. If no redirect matches, it checks rewrites, which internally fetch content from a different source without changing the URL. This happens at the server level before content is sent to the browser.

Why designed this way?

Separating redirects and rewrites allows clear control over user navigation and content delivery. Redirects follow web standards for URL changes, while rewrites enable modern single-page apps and APIs to work seamlessly. This design balances user experience, SEO, and backend flexibility.

┌───────────────┐
│ User requests │
│ URL          │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Check Redirect│
│ rules        │
└──────┬────────┘
       │Yes
       ▼
┌───────────────┐
│ Send redirect │
│ response      │
└───────────────┘
       │No
       ▼
┌───────────────┐
│ Check Rewrite │
│ rules        │
└──────┬────────┘
       │Yes
       ▼
┌───────────────┐
│ Serve content │
│ from rewrite  │
└───────────────┘
       │No
       ▼
┌───────────────┐
│ Serve default │
│ content      │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does a rewrite change the URL shown in the browser? Commit to yes or no.

Common Belief: Rewrites change the URL in the browser to the destination URL.

Reality: Rewrites keep the original URL in the browser and only change the content served behind the scenes.

Why it matters: Thinking rewrites change URLs can cause confusion and incorrect rule setups, breaking site navigation.

Quick: Do redirects always use the 301 status code? Commit to yes or no.

Common Belief: All redirects in Firebase are permanent (301) by default.

Reality: Firebase lets you specify redirect types like 301 (permanent) or 302 (temporary), affecting browser and SEO behavior.

Why it matters: Using the wrong redirect type can harm SEO or cause browsers to cache redirects incorrectly.

Quick: Can Firebase redirect and rewrite rules use full regular expressions? Commit to yes or no.

Common Belief: Firebase supports full regular expressions in redirect and rewrite rules.

Reality: Firebase only supports simple glob-style wildcards, not full regex, limiting pattern matching complexity.

Why it matters: Expecting regex support can lead to failed deployments or unexpected rule behavior.

Quick: Do multiple redirects for the same URL chain automatically in Firebase? Commit to yes or no.

Common Belief: Firebase automatically follows multiple redirects in a chain until the final destination.

Reality: Browsers follow redirect chains, but Firebase processes only one redirect per request; chains must be carefully managed.

Why it matters: Mismanaging redirect chains can cause loops or slow page loads.

Expert Zone

1

Redirects with 301 status codes are cached aggressively by browsers and search engines, so changing them later requires careful planning.

2

Rewrites can route requests to Cloud Functions or Cloud Run services, enabling server-side logic without exposing backend URLs.

3

Firebase processes redirects before rewrites, so overlapping rules can cause unexpected behavior if not ordered properly.

When NOT to use

Avoid using redirects for frequent content changes; instead, use rewrites or client-side routing for better performance. For complex URL pattern matching beyond glob wildcards, consider using a dedicated proxy or CDN with regex support.

Production Patterns

In production, redirects are used to maintain SEO when URLs change, like after site restructuring. Rewrites power single-page applications by serving index.html for all app routes. Combining rewrites with Cloud Functions enables dynamic API backends under clean URLs.

Connections

HTTP Status Codes

Redirects rely on HTTP status codes to tell browsers how to handle URL changes.

Understanding status codes like 301 and 302 clarifies how redirects affect caching and SEO.

Single-Page Applications (SPA)

Rewrites enable SPAs by serving the same HTML file for many URLs, letting client-side code handle routing.

Knowing rewrites helps understand how SPAs keep URLs clean while loading dynamic content.

Mail Forwarding Systems

Redirects are like mail forwarding, sending requests to new addresses, while rewrites are like opening mail and changing contents without changing the address.

This cross-domain analogy helps grasp the difference between visible and invisible URL changes.

Common Pitfalls

#1 Creating redirect loops by redirecting a URL back to itself or in a cycle.

Wrong approach:

{ "source": "/home", "destination": "/home", "type": 301 }

Correct approach:

{ "source": "/old-home", "destination": "/home", "type": 301 }

Root cause:

Misunderstanding that redirect destinations must differ from sources to avoid infinite loops.

#2 Using rewrites when a redirect is needed, causing users to see outdated URLs.

Wrong approach:

{ "source": "/old-page", "function": "serveNewPage" }

Correct approach:

{ "source": "/old-page", "destination": "/new-page", "type": 301 }

Root cause:

Confusing the purpose of rewrites (content change) with redirects (URL change).

#3 Expecting full regex support in Firebase rules and writing unsupported patterns.

Wrong approach:

{ "source": "/blog/(.*)/post", "destination": "/posts/$1" }

Correct approach:

{ "source": "/blog/**", "destination": "/posts/" }

Root cause:

Assuming regex works in Firebase rules when only glob wildcards are supported.

Key Takeaways

Redirects change the URL users see and guide browsers to new locations, while rewrites serve different content without changing the URL.

Firebase Hosting uses a simple configuration file to define redirect and rewrite rules that control site navigation and content delivery.

Understanding the order of processing—redirects first, then rewrites—prevents conflicts and ensures expected behavior.

Using wildcards in rules allows flexible matching of many URLs, but Firebase does not support full regular expressions.

Proper use of redirects and rewrites improves user experience, site performance, and search engine optimization.

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