Firebase Hosting is the static-and-edge layer of Google’s Firebase platform. It serves files from a global CDN, provisions free SSL automatically, and connects to the rest of Firebase: Auth, Firestore, Cloud Functions. It is not a Next.js runtime in the Vercel sense, and treating it like one is where most beginners get burned. As of June 2026 there is also a sibling product, Firebase App Hosting, that is purpose-built for server-rendered frameworks, so the first decision is which of the two you actually want. Below is the mental model, the free-tier numbers, a baseline firebase.json, and the commands to go from zero to live.
TL;DR
- Firebase Hosting = static files + SPAs on a global CDN, free SSL, no billing account required for the free tier. Best for static HTML, Astro/Vite static builds, and single-page apps.
- Firebase App Hosting = the newer product for SSR frameworks (Next.js, Angular). Requires the Blaze billing account; handles CDN, build, and server rendering together.
- Free (Spark) limits as of June 2026: 10 GB storage and 10 GB/month data transfer, no credit card needed.
- Pick Hosting if your output is a folder of files; pick App Hosting if you need real per-request SSR; pick Vercel if you want the smoothest zero-config Next.js experience.
Firebase Hosting vs Firebase App Hosting
Until early 2026 the only way to get server rendering on Firebase was to bolt Cloud Functions or Cloud Run onto Firebase Hosting through rewrites. That still works, but Google now steers SSR projects to Firebase App Hosting, which manages the whole stack (CDN, container build, and rendering) for you. The official comparison breaks down like this:
| Capability | Firebase Hosting | Firebase App Hosting |
|---|---|---|
| Primary use | Static sites, SPAs | SSR frameworks (Next.js, Angular) |
| Server-side rendering | Experimental (via Functions/Run) | First-class |
| Request timeout | 1 minute | 5 minutes |
| Dynamic content regions | 3 | 6 |
| Build process | Local (you run the build) | Reproducible cloud build |
| GitHub integration | Limited | Built-in (auto-deploy on push) |
| Billing account required | No (free tier needs no card) | Yes (Blaze) |
The short version: if your build output is a directory of HTML and assets, stay on Firebase Hosting. If you genuinely need server rendering on every request, App Hosting is the cleaner path than the old Functions-rewrite trick. This article focuses on classic Firebase Hosting because that is what the free tier and most indie static sites use.
How to tell Firebase Hosting fits
- You already use Firebase Auth, Firestore, or Cloud Functions and want one bill.
- Your site is static HTML, a SPA, or an Astro/Vite static build, not a heavy SSR app.
- You want free SSL and a global CDN without configuring a CA.
- You need preview channels for sharing branches with clients.
- You do not need server rendering on every request (if you do, use App Hosting).
Free-tier reality (Spark plan, June 2026)
The Spark (free) plan is generous enough for almost every indie static site, and it does not require a billing account:
| Resource | Spark (free) | Blaze (pay-as-you-go) |
|---|---|---|
| Hosting storage | 10 GB included | $0.026 per extra GB |
| Data transfer | 10 GB / month included | $0.15 per extra GB |
| Custom domains + SSL | Included | Included |
| Preview channels | Included | Included |
If you blow past the free limits on Spark, deploys are blocked once storage exceeds 10 GB, and the site is disabled for data transfer until you upgrade to Blaze. Note the data-transfer figure is now stated as 10 GB/month in the official quotas page (the old “360 MB/day” wording is retired). For a typical content site of a few hundred pages, you will sit comfortably inside the free tier.
Before you start
- A Firebase project (create via console or
firebase projects:create). - Node and
firebase-toolsinstalled (npm install -g firebase-tools). - Static build output ready (
dist/,out/,build/).
Step by step
-
Confirm the output is static. A directory with
index.html, asset folders, and per-route subdirectories. If your output is a Node server (Next.js SSR without static export), use Firebase App Hosting instead. -
Install and authenticate the CLI:
npm install -g firebase-tools
firebase login
firebase projects:list- Initialize hosting in the project:
firebase init hosting
# ? Public directory? dist
# ? Configure as a single-page app? No (static sites/Astro: No)
# ? Set up automatic builds and deploys with GitHub? (optional)- Baseline
firebase.jsonfor a static content site:
{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"trailingSlash": true,
"headers": [
{
"source": "/_astro/**",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
},
{
"source": "**/*.html",
"headers": [
{ "key": "Cache-Control", "value": "no-cache, max-age=0" }
]
},
{
"source": "**/*.@(jpg|jpeg|png|webp|avif|svg|woff2)",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=2592000" }
]
}
]
}
}cleanUrls: true drops the .html extension and 301-redirects any request that includes it. trailingSlash: true redirects URLs to add a trailing slash for static content. Hashed assets get a one-year immutable cache; HTML gets no-cache so content updates show up immediately.
- Decide on rewrites (only if you need dynamic routes):
{
"hosting": {
"rewrites": [
{ "source": "/api/**", "function": "api" },
{ "source": "/render/**", "run": { "serviceId": "ssr-render", "region": "us-central1" } }
]
}
}Rewrites are evaluated top to bottom, so put specific paths before any catch-all. For SPAs that need an index.html fallback, use the ** → /index.html rewrite, but never on a content site, where it converts real 404s into 200s.
- Build and deploy:
npm run build
firebase deploy --only hosting
# Hosting URL: https://your-project.web.app- Test in incognito + curl:
curl -sI https://your-project.web.app/ | grep -i cache-control
curl -sI https://your-project.web.app/this-does-not-exist/ | head -1
# expect HTTP/2 404 (not 200)- Add a custom domain. Firebase Console → Hosting → Add custom domain → follow the wizard. It supplies a
TXTownership record plus theA/AAAArecords that point your domain at Firebase’s anycast IPs (typically awwwCNAMEtoo). SSL is provisioned automatically via Let’s Encrypt; DNS and cert provisioning can take up to 24 hours.
Implementation checklist
publicmatches the framework’s output directory.- Cache headers explicit for HTML vs hashed assets.
- No accidental
**rewrite to/index.htmlon a content site. - Custom domain green check + SSL valid.
- Deploy releases tracked (Hosting → Release history).
After-launch verification
curl -sIshows the expected cache headers.- A deliberate 404 returns HTTP 404, not 200.
- The
*.web.appURL and custom domain both serve identical content. - A preview channel via
firebase hosting:channel:deployproduces a shareable URL.
Common pitfalls
- Reaching for Firebase Hosting when you actually need SSR. As of 2026, send SSR projects to App Hosting instead of the old Functions-rewrite workaround.
- Forgetting to set
cleanUrls/ trailing-slash behavior, then chasing 404s after deploy. - Leaving HTML on a long cache and wondering why updates do not show up. Keep HTML on
no-cache. - Deploying the wrong
publicdirectory, usually the source folder instead of the build output. - Adding a SPA catch-all rewrite by accident, so every URL returns the homepage.
FAQ
- Is Firebase Hosting free?: Yes, on the Spark plan, and it needs no billing account. As of June 2026 you get 10 GB of storage and 10 GB/month of data transfer free, which covers most indie sites.
- What is the difference between Firebase Hosting and Firebase App Hosting?: Hosting serves static files and SPAs on a CDN with no billing account required. App Hosting is the newer product for SSR frameworks like Next.js and Angular; it builds and renders in the cloud, supports a 5-minute request timeout and 6 regions, and requires the Blaze plan.
- Does Firebase Hosting do SSR?: Only indirectly, by rewriting requests to a Cloud Function or Cloud Run. It is experimental and not a first-class runtime. For real SSR, use Firebase App Hosting or Vercel.
- Can I use Firebase Hosting without other Firebase services?: Yes. You can host a plain static site with no Auth, Firestore, or Functions.
- Do I get HTTPS automatically?: Yes. Both the default
*.web.appURL and custom domains get free SSL provisioned through Let’s Encrypt, with automatic renewal as long as yourA/AAAArecords point at Firebase. - How do I roll back a bad deploy?: Firebase Hosting keeps release history. Use the console’s Rollback button, or run
firebase hosting:cloneto promote a previous version.