The biggest Firebase Hosting update ever? Preview channels, GitHub Actions, and more!

Get ready! We have a huge set of updates landing for Firebase Hosting! Today we are announcing preview channels, an official GitHub Action, and cloning of versions! These features are centered around making you more productive and creating a better collaborative process for teams. Let’s dive in!

Preview Channels

Web development is collaborative. Here at Firebase Hosting, we decided to make that process a bit easier with our latest feature: preview channels. Preview channels are an easy way to deploy development versions of your site to a temporary, shareable URL.

Now there’s no need to pull teammates’ changes to your machine, build, and run again. All the changes you want to see are available at a dedicated URL.

Channels vs. Sites

There’s some new terminology in the Firebase Hosting world, so let’s take a quick paragraph to clear everything up. Every site on Firebase Hosting can have multiple channels, and there’s two types of channels: live and preview. Every site comes with a live channel, you can consider this your “production” site hosted at https://<project-id>.web.app (and any connected custom domains). A preview channel hosts a version of your site at an obscured generated domain and expires at a specified time.

Creating a preview channel

Preview channels are created and managed in the Firebase CLI. Make sure you are on version v8.12.0 or higher to use these commands. To create and deploy to a preview channel give it a name and use the new channel deploy command.

firebase hosting:channel:deploy new-dropdown-list 

Expiration dates are also configurable via flags.

firebase hosting:channel:deploy new-blog-post --expires 1d 

By default a preview channel will expire in 7 days. The syntax works for minutes, hours, and days (1m, 12h, 7d).

To see all of your channels, you can run the list command.

firebase hosting:channel:list 

Or if you prefer UI, you can manage all of your channels using the Firebase console.

Preview channels console
Preview channels console

GitHub Action support!

Preview channels are a perfect fit with source control services like GitHub. That’s why we are launching a brand-new GitHub Action to automate your site. You can set up Firebase Hosting to deploy to a preview channel whenever a new Pull Request is created and modified. Each PR will get its own preview channel, so you can focus on each PR’s changes. You can even further configure the GitHub Action to deploy to your live channel when a PR is merged.

Not sure how to set up GitHub Actions? That’s okay! We set up the Firebase CLI to configure the entire process for you. When creating a site with firebase init hosting, you’ll see a new option for setting up deployments with GitHub. If you already have an existing site, you can add it with the command firebase init hosting:github.

After the command, just commit and push your changes to GitHub and the Action will start to run for every new PR on your repository

Cloning versions

Preview channels allow you to develop a new version of your site on a dedicated preview URL. But what happens when you want to promote the version hosted on the preview URL to your live URL? Well, you could create a brand new build of your site and then deploy once again. Or you could use another one of our newest features: cloning.

Cloning allows you to copy the contents of a version hosted on a channel to another channel.

firebase hosting:clone my-site:new-blog-post my-site:live 

The command above will clone the version hosted on the preview channel new-blog-post to the live channel. This allows you to avoid rebuilding or running long and expensive continuous tasks. Cloning isn’t limited to channels within a site either. You can clone from other sites (even if they’re in different Firebase projects!) if you have the proper permissions. This makes it easier to manage staging, QA, and production deployments.

firebase hosting:clone my-staging-site:new-cool-feature my-prod-site:live 

Get started!

We are so excited for you to use these new features. Check out our documentation for all the details on getting started. Let us know what you think! Reach out to us on Twitter because we’d love to hear from you.