Preview channels in Firebase - Step-by-Step Execution

Process Flow - Preview channels

Create Preview Channel

↓

Deploy Preview Build

↓

Generate Preview URL

↓

Share URL for Testing

↓

Receive Feedback

↓

Decide to Promote or Discard

↓

Promote to Live

This flow shows how a preview channel is created, deployed, shared for testing, and then either promoted to live or deleted.

Execution Sample

Firebase

firebase hosting:channel:create preview-123
firebase deploy --only hosting:preview-123
firebase hosting:channel:open preview-123

Commands to create a preview channel, deploy to it, and open the preview URL.

Process Table

Step	Action	Input/Command	Result	Notes
1	Create preview channel	firebase hosting:channel:create preview-123	Preview channel 'preview-123' created	Channel ready to receive deploys
2	Deploy to preview channel	firebase deploy --only hosting:preview-123	Build deployed to 'preview-123'	Preview site updated with new build
3	Open preview URL	firebase hosting:channel:open preview-123	URL generated: https://preview-123--project.web.app	URL can be shared for testing
4	Share URL	Share URL with testers	Testers access preview site	Feedback collected
5	Decide promotion	Promote or delete preview	If promote: promote to live If delete: remove preview channel	Final step based on feedback
6	Exit	N/A	Process ends	Preview channel either promoted or deleted

💡 Process ends after promotion or deletion of preview channel

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 5	Final
previewChannelName	null	preview-123	preview-123	preview-123	preview-123	null or live
previewURL	null	null	https://preview-123--project.web.app	https://preview-123--project.web.app	null or live URL	null or live URL
deploymentStatus	none	created	deployed	deployed	promoted or deleted	promoted or deleted

Key Moments - 3 Insights

Why do we need to create a preview channel before deploying?

Creating a preview channel sets up an isolated environment for your build. As shown in step 1 of the execution_table, without this, you cannot deploy a preview build separately from live.

What happens if I delete a preview channel after deployment?

Deleting a preview channel removes the preview site and URL, as indicated in step 5. This means testers can no longer access that preview.

Can I promote a preview channel directly to live?

Yes, after collecting feedback, you can promote the preview build to live, replacing the live site. This is shown in step 5 where promotion is a decision point.

Visual Quiz - 3 Questions

Look at the execution_table, what is the previewURL after step 3?

A null

B https://preview-123--project.web.app

C https://live-project.web.app

D preview-123

💡 Hint

Check the 'Result' column in row for step 3 in execution_table

At which step does the deploymentStatus change to 'deployed'?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at deploymentStatus changes in variable_tracker after Step 2

If you skip creating a preview channel, what will happen when deploying?

A Deployment fails because no preview channel exists

B Preview URL is generated automatically

C Deployment succeeds to live site

D Preview channel is created automatically

💡 Hint

Refer to key_moments about the importance of creating preview channel before deploy

Concept Snapshot

Preview channels let you deploy a test version of your site.
Create a channel with 'firebase hosting:channel:create <name>'.
Deploy to it with 'firebase deploy --only hosting:<name>'.
Open the preview URL to share and test.
After feedback, promote to live or delete the preview.
This keeps live site safe while testing changes.

Full Transcript

Preview channels in Firebase Hosting allow you to create isolated environments to test your site before making changes live. The process starts by creating a preview channel with a unique name. Then you deploy your build to this channel. Firebase generates a special URL for this preview, which you can share with testers. They can access the preview site and provide feedback. Based on this feedback, you decide to either promote the preview build to your live site or delete the preview channel to discard changes. This workflow helps keep your live site stable while safely testing updates.

Practice

1. What is the main purpose of Firebase preview channels?

easy

A. To create temporary, shareable versions of your app for testing

B. To permanently host your live app

C. To backup your Firebase database

D. To monitor app usage statistics

Solution

1. Step 1: Understand preview channels concept

   Preview channels allow you to create temporary versions of your app that you can share for testing.

2. Step 2: Compare with other options

   Permanent hosting, backups, and monitoring are different Firebase features unrelated to preview channels.

3. Final Answer:

   To create temporary, shareable versions of your app for testing -> Option A

4. Quick Check:

   Preview channels = temporary test versions [OK]

Hint: Preview channels = temporary test app versions [OK]

Common Mistakes:

• Confusing preview channels with permanent hosting
• Thinking preview channels backup data
• Assuming preview channels track usage

2. Which command correctly creates a Firebase preview channel named test123?

easy

A. firebase hosting:channel:deploy test123

B. firebase deploy --channel test123

C. firebase hosting:deploy test123

D. firebase channel:create test123

Solution

1. Step 1: Recall the correct Firebase CLI command

   The command to create a preview channel is firebase hosting:channel:deploy CHANNEL_ID.

2. Step 2: Match the command with the channel name

   Replacing CHANNEL_ID with test123 gives firebase hosting:channel:deploy test123.

3. Final Answer:

   firebase hosting:channel:deploy test123 -> Option A

4. Quick Check:

   Correct CLI command = firebase hosting:channel:deploy test123 [OK]

Hint: Use hosting:channel:deploy with your channel name [OK]

Common Mistakes:

• Using deploy without hosting:channel
• Using channel:create which is invalid
• Mixing command order or flags

3. What happens when you deploy to a Firebase preview channel with the command firebase hosting:channel:deploy preview1?

medium

A. The live app is overwritten immediately

B. The app is published to the app stores

C. The Firebase database is reset

D. A temporary URL is created to share the app version

Solution

1. Step 1: Understand the effect of deploying to a preview channel

   Deploying to a preview channel creates a temporary, shareable URL for testing.

2. Step 2: Eliminate incorrect options

   It does not overwrite the live app, reset databases, or publish to app stores.

3. Final Answer:

   A temporary URL is created to share the app version -> Option D

4. Quick Check:

   Deploy to preview channel = temporary URL [OK]

Hint: Deploying preview channel creates temporary share URL [OK]

Common Mistakes:

• Thinking it overwrites live app immediately
• Confusing preview deploy with database reset
• Assuming it publishes app to stores

4. You ran firebase hosting:channel:deploy MyTest but got an error saying the channel name is invalid. What is a likely cause?

medium

A. You need to be logged out of Firebase CLI

B. You must include the --force flag

C. Channel names cannot contain uppercase letters

D. Channel names must be numeric only

Solution

1. Step 1: Check Firebase preview channel naming rules

   Channel names must be lowercase alphanumeric and can include dashes, but no uppercase letters.

2. Step 2: Evaluate other options

   --force flag is not required for naming; numeric-only names are not required; being logged out causes authentication errors, not naming errors.

3. Final Answer:

   Channel names cannot contain uppercase letters -> Option C

4. Quick Check:

   Invalid channel name = uppercase letters [OK]

Hint: Use only lowercase letters in channel names [OK]

Common Mistakes:

• Trying uppercase letters in channel names
• Assuming --force fixes naming errors
• Confusing auth errors with naming errors

5. You want to share a new feature with your team without affecting the live app. Which steps correctly use Firebase preview channels to do this?

hard

A. Run firebase deploy to update live app, then email the team

B. Run firebase hosting:channel:deploy featureX and share the generated URL

C. Create a new Firebase project and deploy the app there

D. Use firebase hosting:disable to stop live hosting temporarily

Solution

1. Step 1: Identify the correct way to create a preview version

   Using firebase hosting:channel:deploy featureX creates a temporary preview channel for sharing.

2. Step 2: Understand why other options are incorrect

   Deploy updates live app; creating new project is unnecessary; disabling hosting stops live app, not preview.

3. Final Answer:

   Run firebase hosting:channel:deploy featureX and share the generated URL -> Option B

4. Quick Check:

   Preview channel deploy + share URL = safe testing [OK]

Hint: Deploy preview channel and share URL, not live deploy [OK]

Common Mistakes:

• Deploying directly to live app by mistake
• Creating new projects unnecessarily
• Disabling hosting instead of previewing