How to Deploy a Firebase Hosting Site

Install the Firebase CLI globally using npm. Once installed, authenticate with your Google account by running firebase login. This opens a browser window where you grant the CLI access to your Firebase projects. After successful login, the CLI stores your credentials locally so you do not need to log in again on the same machine.

1npm install -g firebase-tools
2firebase login

Navigate to your project directory and run firebase init hosting. The CLI prompts you to select an existing Firebase project or create a new one. When asked for the public directory, enter the folder where your built files live (typically 'dist' for Vite, 'build' for Create React App, or 'out' for Next.js static export). Answer 'Yes' to configure as a single-page app if you use client-side routing, which creates a rewrite rule sending all routes to index.html.

1cd my-project
2firebase init hosting
3
4# When prompted:
5# ? What do you want to use as your public directory? dist
6# ? Configure as a single-page app? Yes
7# ? Set up automatic builds with GitHub? No

Open firebase.json and verify the hosting configuration matches your build output. The public field points to your build directory. Add headers for caching static assets, and ensure the rewrites array has a catch-all rule if you use client-side routing. For frameworks like React Router or Vue Router, the SPA rewrite ensures deep links work correctly instead of returning 404 errors.

1// firebase.json
2{
3  "hosting": {
4    "public": "dist",
5    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
6    "rewrites": [
7      {
8        "source": "**",
9        "destination": "/index.html"
10      }
11    ],
12    "headers": [
13      {
14        "source": "**/*.@(js|css|svg|png|jpg|webp)",
15        "headers": [
16          {
17            "key": "Cache-Control",
18            "value": "public, max-age=31536000, immutable"
19          }
20        ]
21      }
22    ]
23  }
24}

Run your framework's build command to generate production-ready files in the public directory you specified. This step compiles, minifies, and bundles your code. Make sure the output directory matches the public field in firebase.json. If you are using environment variables, confirm they are set before building.

1npm run build

Run firebase deploy --only hosting to upload your built files to Firebase's CDN. The CLI compresses and uploads files, then prints the live URL. Your site is immediately available at your-project.web.app and your-project.firebaseapp.com with automatic SSL. The deploy process takes 30 to 60 seconds for a typical site.

1firebase deploy --only hosting
2
3# Output:
4# ✔  Deploy complete!
5# Hosting URL: https://your-project.web.app

Before deploying to production, use preview channels to create a temporary URL for testing. Run firebase hosting:channel:deploy with a channel name to create an isolated preview. Preview URLs expire after 7 days by default. Share the preview URL with teammates for review before promoting to production. This avoids deploying untested changes to your live site.

1firebase hosting:channel:deploy staging
2
3# Output:
4# ✔  Channel URL: https://your-project--staging-abc123.web.app
5# (expires in 7 days)
6
7# To customize expiry:
8firebase hosting:channel:deploy staging --expires 3d