Redirect and rewrite rules in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to redirect all HTTP requests to HTTPS in Firebase hosting configuration.

Firebase

{
  "hosting": {
    "redirects": [
      {
        "source": "/**",
        "destination": "https://[1]/$1",
        "type": 301
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

Amyapp.web.app

Bfirebaseapp.com

Clocalhost

Dexample.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost or example.com instead of your actual Firebase app domain.

Forgetting to use HTTPS in the destination URL.

The destination must be your Firebase app domain, such as myapp.web.app, to redirect all requests to HTTPS.

2fill in blank

medium

Complete the rewrite rule to serve the index.html file for all URLs in a single-page app.

Firebase

{
  "hosting": {
    "rewrites": [
      {
        "source": "/**",
        "destination": "/[1]"
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

Aindex.html

B404.html

Cstyle.css

Dmain.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using a JavaScript or CSS file as the destination.

Using 404.html which is for errors, not rewrites.

For single-page apps, all URLs should rewrite to index.html so the app can handle routing.

3fill in blank

hard

Fix the error in the redirect rule to properly redirect /old-path to /new-path with a 302 status.

Firebase

{
  "hosting": {
    "redirects": [
      {
        "source": "/old-path",
        "destination": "/[1]",
        "type": 302
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

A404.html

Bold-path

Cindex.html

Dnew-path

Attempts:

3 left

💡 Hint

Common Mistakes

Setting destination to the same source path.

Using a file name instead of a path.

The destination should be the new path /new-path to redirect correctly.

4fill in blank

hard

Fill both blanks to rewrite API requests starting with /api to the cloud function named 'apiHandler'.

Firebase

{
  "hosting": {
    "rewrites": [
      {
        "source": "/[1]/**",
        "function": "[2]"
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

Aapi

Bfunctions

CapiHandler

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'functions' as the source path instead of 'api'.

Using the wrong function name that does not exist.

The source should match the API path prefix api, and the function name is apiHandler to handle those requests.

5fill in blank

hard

Fill all three blanks to create a redirect from /blog to /news with a permanent 301 status and a trailing slash added.

Firebase

{
  "hosting": {
    "redirects": [
      {
        "source": "/[1]",
        "destination": "/[2]/",
        "type": [3]
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

Ablog

Bnews

C301

D302

Attempts:

3 left

💡 Hint

Common Mistakes

Using 302 instead of 301 for permanent redirects.

Forgetting the trailing slash in destination.

Swapping source and destination paths.

The source is blog, destination is news/ with a trailing slash, and type 301 means permanent redirect.

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