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.