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.

Practice

1. What is the main purpose of Firebase Hosting?

easy

A. To create databases for mobile apps

B. To write backend server code

C. To publish websites online without managing servers

D. To monitor app performance

Solution

1. Step 1: Understand Firebase Hosting's role

   Firebase Hosting is designed to host and serve web content easily without needing to manage servers.

2. Step 2: Differentiate from other Firebase services

   Other services like databases or backend code are separate from Hosting's purpose.

3. Final Answer:

   To publish websites online without managing servers -> Option C

4. Quick Check:

   Firebase Hosting = publish websites without servers [OK]

Hint: Remember Hosting is for websites, not databases or code [OK]

Common Mistakes:

• Confusing Hosting with Firebase database services
• Thinking Hosting manages backend code
• Assuming Hosting monitors app performance

2. Which command initializes Firebase Hosting in your project?

easy

A. firebase init hosting

B. firebase deploy --only hosting

C. firebase start hosting

D. firebase create hosting

Solution

1. Step 1: Identify the initialization command

   The command to set up Firebase Hosting configuration is firebase init hosting.

2. Step 2: Differentiate from deployment commands

   firebase deploy --only hosting publishes the site but does not initialize it.

3. Final Answer:

   firebase init hosting -> Option A

4. Quick Check:

   Initialize Hosting = firebase init hosting [OK]

Hint: Init sets up Hosting; deploy publishes it [OK]

Common Mistakes:

• Using deploy command to initialize
• Assuming 'firebase start hosting' exists
• Confusing create with init

3. After running firebase deploy --only hosting, what happens?

medium

A. Firebase deletes your local project files

B. Your website files are uploaded and become live at a Firebase URL

C. Your database is reset to default

D. Firebase Hosting configuration is removed

Solution

1. Step 1: Understand the deploy command effect

   The deploy command uploads your site files to Firebase Hosting and makes the site live.

2. Step 2: Eliminate incorrect options

   Deploy does not delete local files, reset databases, or remove configuration.

3. Final Answer:

   Your website files are uploaded and become live at a Firebase URL -> Option B

4. Quick Check:

   Deploy Hosting = upload and go live [OK]

Hint: Deploy publishes your site live on Firebase URL [OK]

Common Mistakes:

• Thinking deploy deletes local files
• Confusing deploy with database reset
• Assuming deploy removes Hosting setup

4. You ran firebase deploy --only hosting but your site did not update. What is a likely cause?

medium

A. You deployed to the wrong Firebase project

B. Your internet connection was too fast

C. You forgot to run firebase init hosting first

D. Firebase Hosting does not support updates

Solution

1. Step 1: Check project targeting

   If you deploy to the wrong Firebase project, your site won't update as expected.

2. Step 2: Rule out other options

   Init is needed only once; internet speed does not block updates; Hosting supports updates.

3. Final Answer:

   You deployed to the wrong Firebase project -> Option A

4. Quick Check:

   Wrong project deploy = no site update [OK]

Hint: Verify project ID before deploying [OK]

Common Mistakes:

• Assuming init must run every deploy
• Blaming internet speed for deployment failure
• Thinking Hosting can't update sites

5. You want to deploy only your website without affecting other Firebase services. Which command should you use?

hard

A. firebase deploy

B. firebase deploy --only database

C. firebase deploy --except hosting

D. firebase deploy --only hosting

Solution

1. Step 1: Understand deployment scope flags

   The --only hosting flag deploys just the Hosting service, leaving others untouched.

2. Step 2: Compare other options

   firebase deploy deploys all configured services; --only database deploys only database; --except hosting deploys all except Hosting.

3. Final Answer:

   firebase deploy --only hosting -> Option D

4. Quick Check:

   Deploy only Hosting = firebase deploy --only hosting [OK]

Hint: Use --only hosting to deploy just the website [OK]

Common Mistakes:

• Running deploy without --only and affecting all services
• Using --only database instead of hosting
• Using --except hosting to deploy Hosting