Why Firebase Hosting serves web apps - Why It Works

Introduction

Firebase Hosting helps you put your web app online quickly and safely. It solves the problem of making your website available to anyone on the internet with fast loading and secure connections.

When you want to share your personal website or portfolio with friends and employers.

When you build a small business website and want it to load fast for visitors.

When you create a web app and need a simple way to publish it without managing servers.

When you want automatic security with HTTPS so visitors feel safe.

When you want to update your website easily and see changes live quickly.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This file tells Firebase Hosting where your website files are located (the public folder). It also tells Firebase to ignore certain files and folders when uploading. The rewrites section makes sure that all URLs load your main index.html file, which is important for single-page web apps.

Commands

This command logs you into your Firebase account so you can manage your projects and hosting.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

This command sets up Firebase Hosting in your project folder. It creates the configuration files and the public folder for your website files.

Terminal

firebase init hosting

Expected Output

=== Hosting Setup

? What do you want to use as your public directory? public

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

? Set up automatic builds and deploys with GitHub? No

Firebase Hosting setup complete.

This command uploads your website files to Firebase Hosting and makes your web app live on the internet.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'your-project-id'



i  deploying hosting

i  hosting[your-project-id]: beginning deploy...

✔  hosting[your-project-id]: deployed successfully



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/your-project-id/overview

Hosting URL: https://your-project-id.web.app

→

--only hosting - Deploy only the hosting part without affecting other Firebase services

This command opens your live website in the default web browser so you can see your deployed web app.

Terminal

firebase open hosting:site

Expected Output

No output (command runs silently)

Key Concept

Firebase Hosting serves web apps by securely delivering your website files fast and making them available to anyone on the internet with simple commands.

Common Mistakes

Not running 'firebase login' before deploying

Without logging in, Firebase cannot verify your identity and will block deployment.

Always run 'firebase login' first to authenticate your account.

Not setting the correct public directory during 'firebase init hosting'

If the public folder is wrong, Firebase will upload the wrong files or no files at all, so your site won't work.

Specify the folder where your website files are stored, usually 'public'.

Forgetting to run 'firebase deploy' after making changes

Your updates won't appear online until you deploy them.

Run 'firebase deploy --only hosting' each time you want to update your live site.

Summary

Use 'firebase login' to sign in to your Firebase account.

Run 'firebase init hosting' to set up hosting configuration and folders.

Deploy your web app with 'firebase deploy --only hosting' to make it live.

Open your live site with 'firebase open hosting:site' to verify deployment.