Ojasa Mirai

Cloud

Learning Level

🔧 GCP Account Setup ⚙️ GCP Compute Overview 🚀 Cloud Run Deployment 🎯 App Engine Deployment 📁 GCP Storage & Hosting 🔥 Firebase Hosting 🗄️ Firestore Setup ⚡ Firestore Realtime 💾 Cloud SQL Setup 📊 GCP Monitoring 🔑 GCP Authentication 📈 GCP Scaling & Performance ⚡ Firebase Functions 💰 GCP Cost Optimization

Cloud/Gcp Deployment/Firebase Hosting

🔥 Firebase Hosting

Introduction

Firebase Hosting is a fast, secure, and scalable way to deploy static content, single-page applications (SPAs), and progressive web apps (PWAs). It provides automatic HTTPS, global CDN, and one-click deployments directly from your source code repository.

Key Learning Outcomes

By the end of this lesson, you'll understand:

What Firebase Hosting is and when to use it

Setting up a Firebase project and hosting configuration

Deploying applications from local machine and CI/CD pipelines

Custom domains and SSL/TLS certificates

Redirects, rewrites, and routing rules

Performance optimization and caching

Monitoring and analytics

Connecting to backend services

What is Firebase Hosting?

Firebase Hosting is a fully managed static hosting service that:

Hosts static sites, SPAs, and PWAs globally

Provides automatic HTTPS and SSL certificates

Includes global CDN for fast content delivery

Integrates with Firebase services (Authentication, Realtime Database, Cloud Functions)

Supports custom domains and SSL/TLS

Offers one-click deployment and rollback

Includes free tier with generous limits

Getting Started with Firebase Hosting

Step 1: Install Firebase CLI

# Install Firebase CLI globally
npm install -g firebase-tools

# Verify installation
firebase --version

# Login to Firebase
firebase login

Step 2: Initialize Firebase Project

# Create a new directory
mkdir my-firebase-site
cd my-firebase-site

# Initialize Firebase in the directory
firebase init hosting

# Select or create a Firebase project
# Choose what to deploy (public directory)

Step 3: Create a Simple Static Site

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Firebase Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to Firebase Hosting!</h1>
    <p>This site is hosted globally with automatic HTTPS.</p>
  </div>
  <script src="app.js"></script>
</body>
</html>

Step 4: Deploy Your Site

# Preview locally
firebase emulators:start --only hosting

# Deploy to Firebase Hosting
firebase deploy

Firebase Configuration

firebase.json Configuration

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{"source": "**", "destination": "/index.html"}],
    "redirects": [{"source": "/old-page", "destination": "/new-page", "type": 301}],
    "headers": [
      {"source": "**/*.@(js|css)", "headers": [{"key": "Cache-Control", "value": "public, max-age=31536000"}]},
      {"source": "/index.html", "headers": [{"key": "Cache-Control", "value": "public, max-age=3600"}]}
    ]
  }
}

Deploying Single-Page Applications (SPAs)

firebase.json for SPA:

{
  "hosting": {
    "public": "build",
    "rewrites": [{"source": "**", "destination": "/index.html"}]
  }
}

Build and deploy React app:

npm install
npm run build
firebase deploy

Custom Domain Configuration

Add a Custom Domain

# List current domains
firebase hosting:sites:list

# Add custom domain
# 1. Go to Firebase Console → Hosting
# 2. Click "Connect domain"
# 3. Enter your domain
# 4. Verify domain ownership
# 5. Update DNS records

Connecting Cloud Functions

functions/index.js:

const functions = require('firebase-functions');
const express = require('express');

const app = express();

app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ]);
});

exports.api = functions.https.onRequest(app);

firebase.json with rewrites:

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {"source": "/api/**", "function": "api"},
      {"source": "**", "destination": "/index.html"}
    ]
  }
}

Monitoring and Rollback

View and Manage Deployments

# List all versions
firebase hosting:versions:list

# Promote a previous version
firebase hosting:versions:promote VERSION_ID

# View deployment history
firebase hosting:sites:list

Best Practices

1. Optimize Build Output

npm run build
du -sh build/

2. Environment-Specific Deployments

.firebaserc:

{
  "projects": {
    "default": "my-project-prod",
    "staging": "my-project-staging"
  }
}

firebase deploy --project=staging
firebase deploy --project=dev

3. Preview Deployments

firebase hosting:channel:deploy preview-branch
firebase hosting:channel:promote preview-branch

4. CI/CD Integration

.github/workflows/deploy.yml:

name: Deploy to Firebase

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: your-project-id

Key Takeaways

**Firebase Hosting** provides fast, secure, global hosting for static sites and SPAs

**Custom domains** are simple to connect with automatic HTTPS and SSL

**Rewrites and redirects** enable flexible URL routing and SPA support

**CDN** is built-in and automatic for all Firebase Hosting sites

**Cloud Functions** integration enables serverless backends

**One-click rollbacks** make deployments safe and reversible

**CI/CD integration** enables automated deployments on every commit

Next Steps

Explore Cloud Functions for backend integration, or learn about Firestore for real-time data storage.

Resources

Python Docs

Ojasa Mirai

Master AI-powered development skills through structured learning, real projects, and verified credentials. Whether you're upskilling your team or launching your career, we deliver the skills companies actually need.

Learn Deep • Build Real • Verify Skills • Launch Forward

Courses

Python Fastapi ReactJS Cloud

Resources

Blog & Articles GitHub Projects Video Tutorials

Ecosystem

Ojasa Mirai Site My Growth Learning Portal Community Discord

Twitter GitHub LinkedIn