Why Firebase Hosting serves web apps - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Hosting configuration.

Firebase

firebase init [1]

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

Astorage

Bfunctions

Cdatabase

Dhosting

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'functions' instead of 'hosting' during initialization.

Confusing database or storage with hosting service.

Firebase Hosting is initialized using the hosting option during setup.

2fill in blank

medium

Complete the code to deploy your web app to Firebase Hosting.

Firebase

firebase deploy --only [1]

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

Afunctions

Bhosting

Cdatabase

Dstorage

Attempts:

3 left

💡 Hint

Common Mistakes

Deploying functions instead of hosting.

Using database or storage in the deploy command.

To deploy a web app, you use firebase deploy --only hosting.

3fill in blank

hard

Fix the error in the Firebase Hosting configuration file to serve the app correctly.

Firebase

{
  "hosting": {
    "public": "[1]",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

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

Apublic

Bsrc

Cdist

Dapp

Attempts:

3 left

💡 Hint

Common Mistakes

Setting 'src' or 'dist' instead of 'public' in the config.

Using a folder name that does not exist or is incorrect.

The public folder is where Firebase Hosting looks for your web app files by default.

4fill in blank

hard

Fill both blanks to configure Firebase Hosting to serve a single-page app correctly.

Firebase

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

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

Apublic

Bindex.html

Capp.html

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' or 'app.html' instead of 'public' and 'index.html'.

Not setting rewrites correctly for SPA routing.

Firebase Hosting serves files from the public folder and rewrites all routes to index.html for single-page apps.

5fill in blank

hard

Fill all three blanks to create a Firebase Hosting configuration that serves a web app with caching and SPA support.

Firebase

{
  "hosting": {
    "public": "[1]",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      { "source": "**", "destination": "[2]" }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          { "key": "Cache-Control", "value": "[3]" }
        ]
      }
    ]
  }
}

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

Apublic

Bindex.html

Cmax-age=31536000, immutable

Dno-cache

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-cache' which disables caching for static files.

Incorrect folder names or rewrite destinations.

The public folder holds the app files, index.html is the SPA entry point, and caching static files with max-age=31536000, immutable improves performance.