Preview channels in Firebase - Mini Project: Build & Apply

Firebase Hosting Preview Channels Setup

📖 Scenario: You are working on a website project using Firebase Hosting. You want to create a preview channel to test your changes before making them live. Preview channels let you share a temporary URL with your team to review updates safely.

🎯 Goal: Set up a Firebase Hosting preview channel configuration to deploy and test your website changes in a safe environment before publishing to production.

📋 What You'll Learn

Create a Firebase Hosting configuration file with the hosting target

Add a preview channel ID variable for deployment

Write the Firebase CLI command to deploy to the preview channel

Include the expiration time for the preview channel deployment

💡 Why This Matters

🌍 Real World

Preview channels let developers share and test website changes safely before making them public. This avoids breaking the live site.

💼 Career

Many cloud and web developer roles require managing staging and preview environments to ensure quality and collaboration.

1

Create Firebase Hosting configuration

Create a file named firebase.json with a hosting section that has a public directory set to public and ignore array containing firebase.json and **/.*.

Firebase

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*"
    ]
  }
}
# Your code here

Need a hint?

This file tells Firebase which folder to use for hosting and which files to ignore.

2

Add preview channel ID variable

Create a variable called previewChannelId and set it to the string test-channel.

Firebase

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*"
    ]
  }
}

const previewChannelId = "test-channel"
# Your code here

Need a hint?

This variable will be used to name your preview channel when deploying.

3

Write Firebase CLI deploy command

Write a command string called deployCommand that uses firebase hosting:channel:deploy with the previewChannelId variable.

Firebase

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*"
    ]
  }
}

const previewChannelId = "test-channel"
const deployCommand = `firebase hosting:channel:deploy ${previewChannelId}`
# Your code here

Need a hint?

This command deploys your site to the preview channel named test-channel.

4

Add expiration time for preview channel

Add an expiration time of 7 days to the deployCommand by appending --expires 7d to the command string.

Firebase

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*"
    ]
  }
}

const previewChannelId = "test-channel"
const deployCommand = `firebase hosting:channel:deploy ${previewChannelId} --expires 7d`
# Your code here

Need a hint?

This sets the preview channel to expire automatically after 7 days.