What does the public directory in firebase.json do?

The public key tells Firebase Hosting which folder contains the static files to deploy. For most modern build tools this is dist or build. Everything inside it is uploaded and served from your hosting site.

Why do I need a rewrite for a single-page app?

An SPA renders routes on the client, so a deep link like /about has no matching file on the server. The rewrite sends every unmatched request to /index.html, letting your router handle the path instead of returning a 404.

What cache headers should hashed assets use?

Files with content hashes in their names (like app.4f3a.js) never change, so they can be cached for a year with public, max-age=31536000, immutable. index.html should use no-cache so new deploys are picked up immediately.

What does cleanUrls do?

cleanUrls drops the .html extension from served pages, so about.html is reachable at /about and the .html version redirects to it. It is mainly useful for multi-page static sites rather than single-page apps.

Where does the firebase.json file go?

Place firebase.json in the root of your project, next to package.json. The Firebase CLI reads it automatically when you run firebase deploy or firebase emulators:start.

firebase.json Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A correct firebase.json without the guesswork

Firebase Hosting is configured by a single firebase.json file, and small mistakes — a wrong public directory, a missing SPA rewrite, or no cache headers — lead to 404s on deep links or stale assets after deploys. This builder assembles a valid config from a few toggles so your first firebase deploy works.

How it works

The tool writes a hosting object. The public key points at your build folder, and ignore excludes firebase.json and dotfiles (plus node_modules if you want). When the single-page-app option is on, it adds a catch-all rewrite that maps ** to /index.html, so client-side routes resolve instead of 404ing. The cache-header block applies Cache-Control: public, max-age=<seconds>, immutable to hashed static assets (js, css, fonts, images) while forcing no-cache on index.html, which is the standard pattern for content-hashed builds. cleanUrls and trailingSlash map directly to Firebase’s own options.

Example and notes

A typical Vite or Create React App setup uses dist (Vite) or build (CRA) as the public directory with the SPA rewrite enabled. Keep the asset max-age at 31536000 (one year) only when your bundler adds content hashes to filenames; without hashing, a long cache can serve stale code. The generated JSON is standard and can be extended later with redirects, headers for security, or multiple hosting targets.