Firebase channels: hosting of staging environment

Firebase — is an excellent choice for hosting Angular applications: it’s fast and secure. With just one command, you can deploy your application and serve either static or dynamic content.

Important thing to mention is that both: Angular and Firebase were created by Google, so it means that their interrelation is designed by default. Deploying single page applications, managing its assets in own CDN — everything is provided out of the box without the necessity of manual adjustments.

But what about website debugging, before going to production? Do we have an option of having a staging environment within Firebase toolkit?

Yes we can! Firebase channels are coming for our convenience.

Firebase hosting infrastructure:

Before going to the channels topic in depth, lest see the whole picture of hosting infrastructure.

In order to deploy your app to Firebase, you need to create a project first. Every Firebase project has a default hosting site with access to all the project’s resources (databases, authentication, functions, etc.).

And then, in order to access this website , we actually have the channels tooling. Each site may contain one or more channels, where each channel is associated with a URL that serves specific content and a Hosting configuration. This url is a temporary one and can be configured.

In order to simplify the whole concept, we may consider Firebase channels as separate sub-hostings with their own unique URL, served under one project.

Deploy to live hosting:

If you already have deployed app to Firebase, then go directly to Deploy to staging hosting section.

In order to initially deploy an application to Firebase hosting, we need to:

1. Install firebase CLI to npm globally:

npm install -g firebase-tools

2. Create project in firebase console. Link to guide.

In my case I’ll create the project with name name “igor-gonchar”, that will result in firebase console:

3. Build the application itself. For Angular project, e.g:

npm run build:prod

4. Login to Firebase account with its CLI:

firebase login

5. Initialize the project with command:

firebase init

Here we need to:

• select previously created project “igor-gonchar” from remote Firebase list
• choose built project from dist directory: dist
• To use SPA index.html — Yes
• To override existing index.html — No

The result of initialization — Firebase will create firebase.json configuration file and will link our application with the project in the Firebase console website

6. Deploy application to hosting:

firebase deploy --only hosting

- -only hosting flag says, that among all the Firebase CLI tools we are interested only in hosting one.

As the result of command, we’ll see the notification about successful deployment with 2 links: to firebase console and hosing URL. In may case, for example:

Project Console: https://console.firebase.google.com/project/igor-gonchar/overview
Hosting URL: https://igor-gonchar.web.app

That’s our live environment — production. Now, when the firebase CLI is initialized and we don’t need to setup it for further deployments, then we may create npm script that will simplify building and deploying app to prod:

"deploy:fb:prod": "ng build --prod && firebase deploy --only hosting"

Deploy to staging hosting:

Now, when we can automatically deploy a build to production environment, let’s consider of deploying a new application feature to staging environment. There we’ll have the possibility to test it before gong live.

1. We still need our application to be built:

npm run build:prod

2. Create firebase channel and deploy application there:

firebase hosting:channel:deploy --expires 30m igorgo-staging

firebase hosting:channel:deploy — command tells firebase to deploy application to the specified hosting channel. In our case it will run another command under the hood: firebase hosting:channel:create, because it won’t find the needed channel in it’s list and wi’ll create it for us in advance.

- -expires 30m — flag says how long the environment needs to be alive. It accepts different time options.

The maximum expiration can be up to 30 days. We can use h for hours, d for days, and w for weeks (for example, 2h, 5d, 1w, respectively).

igorgo-staging — the custom name of the channel, that afterwards will be displayed in the channels list. It’s treated as its ID.

The result of command run in our terminal is — the preview URL for hosted application:

hosting:channel: Channel URL (igor-gonchar): https://igor-gonchar--igorgo-staging-c2zunkc1.web.app [expires 2021–03–28 18:55:28]

And that’s it — our application is deployed to hosting environment where we can test new features/bugfixes. The same as with prod build, it’ll be easier to create npm script and to use it when needed:

"deploy:fb:staging": "ng build --prod && firebase hosting:channel:deploy --expires 30m igorgo-staging"

Additional commands:

LIST:

You can generate any amount of channels as you wish. All of them will be displayed in channels list. And you can view in 2 ways:

1. Via UI: open firebase console and navigate to hosting section There, at the bottom of the page — the list of your active and expired channel. You can manage them: either extend or delete

2. Via CLI: run command in your terminal:

firebase hosting:channel:list

It will return the list of active channels, including the production one:

CLONE:

When the application is tested on staging environment, I usually run npm script that deploy current codebase of application to production:

"deploy:fb:prod": "ng build --prod && firebase deploy --only hosting"

But what if new features were added to the application, while it was being tested on staging? Then we can’t use current script because it will deploy not only previous, but also our new, not tested ones.

In such case clone command becomes very useful.

firebase hosting:clone igor-gonchar:igorgo-staging igor-gonchar:live

Where igor-gonchar — is the project ID from Firebase console, the same for 2 channels. And second parameters — IDs of each source and target channel respectively.

This command clones the application from a preview channel to your live channel with he exact content and config that you have tested, without any current changes to the codebase.

Conclusion:

Firebase channels — is an extremely useful tool for previewing, testing and sharing changes of your application before going live.

If you are not sure if your new feature may contain bugs— test it initially on staging environment and then easily clone it to production one.

For more web-development articles — please feel free to have a look at my website where I systematically share my and other authors best tech stories: https://igorgo.nl/