Firebase Hosting Rewrites — Serving Dynamic Content and SPA Routing with Cloud Functions

// firebase.json with rewrites, redirects, and headers
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // SPA fallback - send all unknown paths to index.html
      {
        "source": "**",
        "destination": "/index.html"
      },
      // API routes proxied to Cloud Functions
      {
        "source": "/api/**",
        "function": "api"
      },
      // Specific function rewrites
      {
        "source": "/auth/**",
        "function": "authHandler"
      },
      {
        "source": "/webhooks/stripe",
        "function": "stripeWebhook"
      }
    ],
    "redirects": [
      {
        "source": "/old-path",
        "destination": "/new-path",
        "type": 301
      },
      {
        "source": "/blog/:post",
        "destination": "/articles/:post",
        "type": 302
      }
    ],
    "headers": [
      {
        "source": "/api/**",
        "headers": [
          { "key": "Access-Control-Allow-Origin", "value": "https://app.example.com" },
          { "key": "Cache-Control", "value": "no-cache" }
        ]
      },
      {
        "source": "**/*.@(jpg|png|svg|webp)",
        "headers": [
          { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
        ]
      }
    ]
  }
}

// Cloud Function called via rewrite
const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({ origin: true }));
app.use(express.json());

app.get('/api/users', async (req, res) => {
  const users = await getUsers();
  res.json(users);
});

app.post('/api/users', async (req, res) => {
  const user = await createUser(req.body);
  res.status(201).json(user);
});

// Export Express app as a Cloud Function
exports.api = functions.https.onRequest(app);

// SPA configuration with framework routing
// For React Router, Vue Router, or Angular
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </BrowserRouter>
  );
}

# Deploy hosting
firebase deploy --only hosting

# Preview deployment
firebase hosting:channel:deploy preview-name

# List deployments
firebase hosting:channel:list