Firebase Hosting Deploy

Deploying to Firebase Hosting pushes your built web files to Google's CDN and makes them live on the internet. The process takes one command and usually completes in under a minute. Firebase also keeps a history of every deployment so you can roll back instantly if something goes wrong.

The Basic Deploy Command

First, build your app if it requires a build step:

# For React (Create React App)
npm run build

# For Vite
npm run build

# For Vue CLI
npm run build

# For Next.js static export
npm run export

Then deploy to Firebase:

firebase deploy --only hosting

Firebase uploads only files that changed since the last deployment. The terminal shows upload progress and confirms the deployment URL when done:

Hosting URL: https://my-app-12345.web.app

The Deploy Process Step by Step

firebase deploy --only hosting
       |
       v
Firebase reads firebase.json to find the public directory
       |
       v
Firebase compares local files with the last deployment
       |
       v
Uploads only changed files to Google's CDN
       |
       v
Updates DNS routing to serve the new version
       |
       v
Previous version stays available for rollback
       |
       v
New version is live — returns hosting URL

Preview Channels

Preview channels let you deploy a temporary version of your site for testing and review before updating the live site. This is useful for sharing with clients or teammates before a release.

# Create a preview channel named "staging"
firebase hosting:channel:deploy staging

Firebase gives you a unique URL like:

https://my-app-12345--staging-abc123.web.app

Share this URL for review. The preview channel expires automatically after 7 days (configurable). When satisfied, deploy to the live channel:

# Promote the staging channel to live
firebase hosting:clone my-app-12345:staging my-app-12345:live

Viewing Deployment History

Firebase keeps every deployment in its history. View it in the Firebase Console under Hosting > Release history. Each entry shows the deployment date, who deployed, and the number of files changed.

Rolling Back to a Previous Version

If a deployment breaks something, rolling back takes one click:

• Open the Firebase Console and go to Hosting
• Click Release history
• Find the last working deployment
• Click the three-dot menu next to it
• Click Rollback

Firebase makes that older deployment live immediately. No redeployment or build step needed.

GitHub Actions — Automatic Deployment

Connect your GitHub repository to Firebase Hosting for automatic deployments on every push:

firebase init hosting:github

Firebase guides you through connecting to GitHub and creates workflow files in your repository. After setup, every push to your main branch triggers a deployment. Pull requests get preview channel URLs posted as comments automatically.

Deploying Multiple Sites from One Project

One Firebase project supports multiple hosting sites. This is useful for hosting a main app and an admin panel from the same project:

// firebase.json
{
  "hosting": [
    {
      "target": "main-app",
      "public": "dist",
      "rewrites": [{ "source": "**", "destination": "/index.html" }]
    },
    {
      "target": "admin",
      "public": "admin/dist",
      "rewrites": [{ "source": "**", "destination": "/index.html" }]
    }
  ]
}

Set hosting targets in .firebaserc:

{
  "projects": { "default": "my-project-id" },
  "targets": {
    "my-project-id": {
      "hosting": {
        "main-app": ["my-project-id"],
        "admin": ["my-project-admin-site"]
      }
    }
  }
}

Deploy a specific target:

firebase deploy --only hosting:main-app

Checking Hosting Status

firebase hosting:sites:list

Lists all hosting sites in your current project with their status and URLs.

Key Takeaway

Deploy to Firebase Hosting with firebase deploy --only hosting after building your app. Use preview channels to test deployments before going live. Roll back any broken deployment instantly from the Firebase Console. Connect GitHub Actions for continuous deployment so every push to your main branch automatically updates your live site.