Preview channels in Firebase - Commands & Configuration

Introduction

Preview channels let you share your Firebase Hosting site changes with others before making them live. This helps you test and get feedback safely without affecting your main website.

When you want to show a new website feature to your team before publishing it to everyone.

When you need to test changes on a real URL without affecting your live site visitors.

When you want to get client approval on website updates before going live.

When you want to share a temporary version of your site for a demo or review.

When you want to catch bugs or design issues early by sharing a preview link.

Commands

This command creates a preview channel named 'preview-123' and deploys your current site version to it. It gives you a unique URL to share your changes safely.

Terminal

firebase hosting:channel:deploy preview-123

Expected Output

✔  Deploy complete!



Preview URL: https://preview-123--your-project-id.web.app



To view your site, open the preview URL in a browser.

This command lists all your active preview channels so you can see their names and URLs.

Terminal

firebase hosting:channel:list

Expected Output

┌─────────────┬──────────────────────────────────────────────┐

│ Channel ID  │ URL                                          │

├─────────────┼──────────────────────────────────────────────┤

│ preview-123 │ https://preview-123--your-project-id.web.app │

└─────────────┴──────────────────────────────────────────────┘

This command deletes the preview channel named 'preview-123' to clean up and remove the temporary preview site.

Terminal

firebase hosting:channel:delete preview-123

Expected Output

✔  Channel preview-123 deleted successfully.

Key Concept

If you remember nothing else from preview channels, remember: they let you safely share and test website changes on a temporary URL before going live.

Common Mistakes

Trying to deploy to a preview channel without initializing Firebase Hosting in the project.

The deploy command fails because Firebase Hosting is not set up and there is no hosting configuration.

Run 'firebase init hosting' first to set up Hosting before deploying to preview channels.

Not deleting old preview channels, causing clutter and confusion.

Too many preview channels can make it hard to find the right one and may use up project resources.

Regularly run 'firebase hosting:channel:list' and delete unused preview channels with 'firebase hosting:channel:delete <channel-id>'.

Summary

Use 'firebase hosting:channel:deploy <channel-id>' to create and deploy a preview channel.

Use 'firebase hosting:channel:list' to see all active preview channels and their URLs.

Use 'firebase hosting:channel:delete <channel-id>' to remove preview channels when done.