Hosting setup and deployment in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Hosting in your project.

Firebase

firebase init [1]

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

Adatabase

Bfunctions

Cfirestore

Dhosting

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'functions' instead of 'hosting' initializes backend functions, not hosting.

Selecting 'firestore' or 'database' sets up databases, not hosting.

Use hosting to set up Firebase Hosting for your project.

2fill in blank

medium

Complete the code to deploy your Firebase Hosting site.

Firebase

firebase deploy --only [1]

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

Afunctions

Bfirestore

Chosting

Ddatabase

Attempts:

3 left

💡 Hint

Common Mistakes

Deploying 'functions' instead of 'hosting' deploys backend code, not the website.

Using 'firestore' or 'database' deploys database rules, not hosting.

Deploy only the hosting part to publish your website.

3fill in blank

hard

Fix the error in the Firebase Hosting configuration file to specify the public directory.

Firebase

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

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

Apublic

Bdist

Cbuild

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' or 'dist' when those folders don't contain the final static files.

Setting 'build' if your project doesn't output there.

The public directory is where your static files live for Firebase Hosting.

4fill in blank

hard

Fill both blanks to configure Firebase Hosting rewrites for a single-page app.

Firebase

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

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

Apublic

Bindex.html

C404.html

Dapp.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using '404.html' or 'app.html' as the rewrite destination breaks SPA routing.

Setting the public folder incorrectly causes deployment errors.

Use public as the folder and index.html as the rewrite destination for SPA routing.

5fill in blank

hard

Fill all three blanks to create a Firebase Hosting configuration with headers and clean URLs.

Firebase

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

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

Apublic

Bmax-age=31536000

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting cache-control to a short or invalid value.

Disabling cleanUrls when you want friendly URLs.

Set public as the folder, use a long cache time max-age=31536000 for JS/CSS, and enable cleanUrls with true.