How to Preview Deployment on Firebase Hosting Quickly

Use the firebase serve --only hosting or firebase hosting:preview command to preview your Firebase Hosting deployment locally. This lets you see your site as it will appear after deployment without publishing it live.

Syntax

The main commands to preview Firebase Hosting are:

• firebase serve --only hosting: Starts a local server to serve your hosting content.
• firebase hosting:preview: Builds and previews your hosting site locally with the latest changes.

Both commands require you to be in your Firebase project directory with a valid firebase.json configuration.

bash

firebase serve --only hosting

firebase hosting:preview

Example

This example shows how to preview your Firebase Hosting site locally before deploying:

1. Open your terminal and navigate to your Firebase project folder.
2. Run firebase hosting:preview.
3. Open the provided local URL (usually http://localhost:5000) in your browser to see your site.

bash

cd my-firebase-project
firebase hosting:preview

Output

✔  hosting: preview started at http://localhost:5000
✔  hosting: preview running

Common Pitfalls

Common mistakes when previewing Firebase Hosting include:

• Not running the command inside the Firebase project folder with firebase.json.
• Forgetting to build your site (e.g., running npm run build) before preview if you use a build step.
• Using firebase serve without specifying --only hosting, which may start other emulators you don't need.

Always check the terminal output for errors and ensure your local server URL is correct.

bash

Wrong:
firebase serve

Right:
firebase serve --only hosting

Quick Reference

Command	Description
firebase serve --only hosting	Start local server to serve hosting content
firebase hosting:preview	Build and preview hosting site locally
firebase deploy --only hosting	Deploy hosting site live to Firebase
npm run build	Build your site before preview if using a build tool

Key Takeaways

Run firebase hosting:preview to see your site locally before deploying.

Always execute preview commands inside your Firebase project folder with firebase.json.

Build your site first if you use a build process to see the latest changes.

Use firebase serve --only hosting to serve hosting content without other emulators.

Check the terminal output for the local URL to open your preview in a browser.