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

FoundationUnderstanding 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

FoundationWhat Are Redirects and Rewrites?

3

IntermediateConfiguring Redirects in Firebase

4

IntermediateSetting Up Rewrites in Firebase

5

IntermediateCombining Redirects and Rewrites

6

AdvancedUsing Wildcards and Regular Expressions

7

ExpertPerformance and SEO Implications

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.

Tap to reveal reality

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.

Tap to reveal reality

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.

Tap to reveal reality

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.

Tap to reveal reality

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

#1Creating 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.

#2Using 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).

#3Expecting 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.