Redirect and rewrite rules in Firebase - Mini Project: Build & Apply

Firebase Hosting Redirect and Rewrite Rules

📖 Scenario: You are setting up a website using Firebase Hosting. You want to manage how users are sent to different pages and how URLs are handled behind the scenes.

🎯 Goal: Build a Firebase Hosting configuration file that includes redirect rules to send users from old URLs to new ones, and rewrite rules to serve specific content for certain URL patterns.

📋 What You'll Learn

Create a firebase.json file with hosting configuration

Add a redirect rule from /old-page to /new-page with a 301 status

Add a rewrite rule to serve /app/** URLs with /app/index.html

Ensure the configuration is valid and deployable

💡 Why This Matters

🌍 Real World

Redirects and rewrites help manage website URLs smoothly, improving user experience and SEO.

💼 Career

Understanding Firebase Hosting rules is useful for web developers and cloud engineers managing static websites and single-page applications.

1

Create the basic Firebase Hosting configuration

Create a firebase.json file with a hosting section that sets the public directory to public.

Firebase

{
  "hosting": {
    // Your code here
  }
}

Need a hint?

The public key tells Firebase where your website files are.

2

Add a redirect rule from /old-page to /new-page

Inside the hosting section, add a redirects array with one object that redirects /old-page to /new-page using a 301 status code.

Firebase

{
  "hosting": {
    "public": "public",
    // Add redirects array here
  }
}

Need a hint?

Redirects send users from one URL to another with a status code.

3

Add a rewrite rule for /app/** URLs

Inside the hosting section, add a rewrites array with one object that rewrites all URLs matching /app/** to serve /app/index.html.

Firebase

{
  "hosting": {
    "public": "public",
    "redirects": [
      {
        "source": "/old-page",
        "destination": "/new-page",
        "type": 301
      }
    ],
    // Add rewrites array here
  }
}

Need a hint?

Rewrites let you serve a specific file for matching URLs, useful for single-page apps.

4

Complete the Firebase Hosting configuration

Ensure the firebase.json file includes the public directory, the redirect from /old-page to /new-page with status 301, and the rewrite for /app/** to /app/index.html. The file should be valid JSON and ready to deploy.

Firebase

{
  "hosting": {
    "public": "public",
    "redirects": [
      {
        "source": "/old-page",
        "destination": "/new-page",
        "type": 301
      }
    ],
    "rewrites": [
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      }
    ]
  }
}
# Verify the JSON is complete and valid

Need a hint?

Check that all parts are included and the JSON syntax is correct.