Redirect and rewrite rules in Firebase - Commands & Configuration

Introduction

Sometimes you want to send visitors from one web address to another or change how URLs work without changing the visible address. Redirect and rewrite rules help you do this easily on your Firebase-hosted website.

When you want to send users from an old page URL to a new page URL automatically.

When you want to serve a single page app but keep clean URLs without .html extensions.

When you want to hide the real location of your files by rewriting URLs internally.

When you want to fix broken links by redirecting them to working pages.

When you want to change URL paths for SEO or user-friendly addresses without changing your files.

Config File - firebase.json

firebase.json

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

hosting.public: The folder with your website files.

rewrites: Changes URLs internally, like sending all /app/* requests to index.html for single page apps.

redirects: Sends visitors from one URL to another with a status code (301 means permanent redirect).

Commands

Uploads your firebase.json and website files to Firebase hosting, applying your redirect and rewrite rules.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'your-project-id'...



i  deploying hosting

i  hosting[your-project-id]: beginning deploy...

✔  hosting[your-project-id]: deployed successfully



✔  Deploy complete!

→

--only hosting - Deploys only the hosting part, skipping other Firebase services.

Checks the HTTP headers for the old page URL to verify it redirects to the new page.

Terminal

curl -I https://your-project-id.web.app/old-page

Expected Output

HTTP/2 301 

location: https://your-project-id.web.app/new-page

cache-control: public, max-age=3600

content-length: 0

Checks that the /app/dashboard URL is rewritten internally to serve index.html without changing the URL in the browser.

Terminal

curl -I https://your-project-id.web.app/app/dashboard

Expected Output

HTTP/2 200 

content-type: text/html; charset=utf-8

cache-control: public, max-age=3600

Key Concept

If you remember nothing else from this pattern, remember: redirects send users to a new URL visibly, while rewrites serve content from a different location without changing the URL shown.

Common Mistakes

Using rewrites when you want users to see the new URL.

Rewrites keep the original URL in the browser, so users don't know they are seeing different content.

Use redirects for sending users to a new URL that shows in the browser address bar.

Not specifying the correct HTTP status code for redirects.

Without a proper status code like 301 or 302, browsers and search engines may not handle the redirect correctly.

Always specify 301 for permanent or 302 for temporary redirects in your firebase.json.

Forgetting to deploy after changing firebase.json.

Changes to redirect and rewrite rules only take effect after deployment.

Run 'firebase deploy --only hosting' after editing firebase.json.

Summary

Create redirect and rewrite rules in firebase.json under hosting section.

Use redirects to send users to new URLs with visible address changes.

Use rewrites to serve content from different files without changing the URL.

Deploy changes with 'firebase deploy --only hosting' to apply rules.

Verify redirects and rewrites using curl or browser tests.