Advanced Hosting Management

Master Firebase Hosting's advanced features to manage deployments, versions, rollbacks, and team workflows effectively.

Deployment Management

Understanding Deployments

Each deployment creates an immutable version of your site:

Deployment Commands

# Standard deployment
firebase deploy --only hosting

# Deploy with message
firebase deploy --only hosting -m "Fix navigation bug"

# Deploy specific site (multi-site)
firebase deploy --only hosting:marketing

# Dry run (see what would be deployed)
firebase hosting:diff

# Deploy from CI/CD
firebase deploy --token "$FIREBASE_TOKEN" --non-interactive

Version Management

Every deployment creates a new version:

# List all versions
firebase hosting:versions:list

# Get details of specific version
firebase hosting:versions:get VERSION_ID

# Clone a version to preview channel
firebase hosting:clone SOURCE:VERSION_ID TARGET:preview

# Delete old versions
firebase hosting:versions:delete VERSION_ID

Rollback Strategies

Method 1: Console Rollback (Easiest)

1. Go to Firebase Console → Hosting
2. Click "View all releases"
3. Find the version to restore
4. Click "Rollback to this release"

Method 2: CLI Rollback

# List versions to find the one you want
firebase hosting:versions:list

# Clone old version to production
firebase hosting:clone PROJECT:VERSION_ID PROJECT:live

Method 3: Git-Based Rollback

# Checkout previous commit
git checkout HEAD~1

# Rebuild and deploy
npm run build
firebase deploy --only hosting

Preview Channels

What Are Preview Channels?

Preview channels create temporary URLs for testing:

• Test features before production
• Share with stakeholders
• Automated testing in CI/CD
• A/B testing experiments

Creating Preview Channels

# Basic preview channel
firebase hosting:channel:deploy preview

# Feature-specific channel
firebase hosting:channel:deploy feature-redesign

# With expiration
firebase hosting:channel:deploy test --expires 3d

# From specific directory
firebase hosting:channel:deploy preview --only hosting:app

Preview Channel URLs

Format: PROJECT_ID--CHANNEL_NAME-RANDOM_HASH.web.app

Example: myapp--feature-auth-x9yn2.web.app

Managing Preview Channels

# List all channels
firebase hosting:channel:list

# Get channel details
firebase hosting:channel:open preview

# Delete a channel
firebase hosting:channel:delete preview

# Promote to production
firebase hosting:clone myapp:preview myapp:live

CI/CD Integration

# GitHub Actions example
- name: Deploy Preview
  run: |
    npm run build
    firebase hosting:channel:deploy pr-${{ github.event.number }} \
      --expires 7d \
      --token "${{ secrets.FIREBASE_TOKEN }}"

Multi-Site Hosting

Setting Up Multiple Sites

# Create additional sites
firebase hosting:sites:create blog
firebase hosting:sites:create docs
firebase hosting:sites:create app

# Apply targets
firebase target:apply hosting main myapp
firebase target:apply hosting blog myapp-blog  
firebase target:apply hosting docs myapp-docs

Multi-Site Configuration

{
  "hosting": [
    {
      "target": "main",
      "public": "dist/app",
      "rewrites": [{
        "source": "**",
        "destination": "/index.html"
      }]
    },
    {
      "target": "blog",
      "public": "dist/blog",
      "cleanUrls": true,
      "headers": [{
        "source": "**/*.@(jpg|jpeg|gif|png)",
        "headers": [{
          "key": "Cache-Control",
          "value": "max-age=86400"
        }]
      }]
    },
    {
      "target": "docs",
      "public": "dist/docs",
      "redirects": [{
        "source": "/v1/**",
        "destination": "https://legacy-docs.example.com/:1",
        "type": 301
      }]
    }
  ]
}

Deploying Multi-Site Projects

# Deploy all sites
firebase deploy --only hosting

# Deploy specific site
firebase deploy --only hosting:main
firebase deploy --only hosting:blog

# Deploy multiple specific sites
firebase deploy --only hosting:main,hosting:blog

# Different builds for different sites
npm run build:app && firebase deploy --only hosting:main
npm run build:blog && firebase deploy --only hosting:blog

Team Collaboration

Access Control

Set up team permissions in Firebase Console:

1. Viewer - Can view hosting data
2. Editor - Can deploy and manage
3. Owner - Full control including billing

# Add team member (Console recommended)
# Go to Project Settings > Users and permissions

# For CI/CD, create service account
firebase login:ci
# Save the token securely

Deployment Workflows

Development Workflow

# Developer creates feature branch
git checkout -b feature/new-design

# Deploy to preview channel
firebase hosting:channel:deploy feature-new-design

# After review, merge and deploy
git merge main
firebase deploy --only hosting

Staging Environment

// firebase.json
{
  "projects": {
    "production": "myapp-prod",
    "staging": "myapp-staging",
    "development": "myapp-dev"
  }
}

# Deploy to different environments
firebase use staging
firebase deploy --only hosting

firebase use production
firebase deploy --only hosting

Monitoring Deployments

Deployment Status

Check deployment progress:

# Real-time deployment logs
firebase deploy --only hosting --debug

# Check hosting status
firebase hosting:sites:list

# View recent activity
# Use Firebase Console Activity tab

Deployment Metrics

Monitor in Firebase Console:

• Deployment success rate
• Average deployment time
• Failed deployments
• Storage usage per deployment

Advanced Deployment Strategies

Blue-Green Deployments

# Deploy to green environment
firebase hosting:channel:deploy green

# Test green environment
# https://myapp--green-x8yn2.web.app

# Switch traffic (promote green to live)
firebase hosting:clone myapp:green myapp:live

Canary Deployments

While Firebase doesn't support native canary deployments, you can implement them:

// Client-side canary logic
const isCanary = Math.random() < 0.1; // 10% canary
const apiUrl = isCanary 
  ? 'https://myapp--canary-x7yn3.web.app/api'
  : 'https://myapp.web.app/api';

Gradual Rollouts

# Day 1: Deploy to preview
firebase hosting:channel:deploy new-feature

# Day 2: Limited testing
# Share preview URL with beta testers

# Day 3: Deploy to production
firebase deploy --only hosting

Automation and CI/CD

GitHub Actions

name: Deploy to Firebase Hosting
on:
  push:
    branches: [main]
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm run build
      
      # Deploy preview for PRs
      - if: github.event_name == 'pull_request'
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: pr-${{ github.event.number }}
          expires: 7d
      
      # Deploy to production for main branch
      - if: github.event_name == 'push'
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live

GitLab CI/CD

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy_preview:
  stage: deploy
  script:
    - npm install -g firebase-tools
    - firebase hosting:channel:deploy preview-$CI_COMMIT_REF_NAME --token $FIREBASE_TOKEN
  only:
    - merge_requests

deploy_production:
  stage: deploy
  script:
    - npm install -g firebase-tools
    - firebase deploy --only hosting --token $FIREBASE_TOKEN
  only:
    - main

Troubleshooting Deployments

Common Issues

Issue	Cause	Solution
"Permission denied"	Not authenticated	Run firebase login
"Deployment failed"	Large files	Check 2GB file limit
"Site not updating"	CDN cache	Wait 5-10 minutes
"Version limit reached"	Too many versions	Delete old versions
"Preview channel expired"	Auto-expiration	Redeploy with longer expiry

Debug Commands

# Verbose deployment logs
firebase deploy --only hosting --debug

# Check what files will be deployed
firebase hosting:diff

# Validate firebase.json
firebase init hosting --project YOUR_PROJECT

# Test locally first
firebase emulators:start --only hosting

Best Practices

Deployment Checklist

✅ Before Deploying:

• Run tests locally
• Check bundle size
• Validate firebase.json
• Test on preview channel
• Review changes with team

✅ Deployment Process:

• Use descriptive commit messages
• Tag releases in git
• Monitor deployment progress
• Verify on multiple devices
• Check analytics for errors

✅ After Deployment:

• Monitor error rates
• Check performance metrics
• Verify CDN distribution
• Document any issues
• Clean up old versions

Security Considerations

1. Protect deployment tokens

   # Never commit tokens
   echo "FIREBASE_TOKEN" >> .gitignore

2. Use service accounts for CI/CD

   • Create dedicated service accounts
   • Limit permissions to hosting only
   • Rotate credentials regularly

3. Review deployment access

   • Audit team permissions quarterly
   • Remove access for departed members
   • Use principle of least privilege

Next Steps

• Set up Preview Channels for testing
• Configure Multi-Sites for complex projects
• Implement GitHub Integration for automation
• Learn about Monitoring deployments

---

Pro Tip: Use preview channels liberally! They're free, temporary, and perfect for testing. Make them part of your standard workflow for safer deployments. 🚀