Firebase Hosting is a powerful web hosting service provided by Google Cloud as part of their Firebase platform. It is specially designed for hosting static websites and single-page applications (SPAs). In this guide, we will walk you through the process of getting started with Firebase Hosting, from installing the Firebase CLI tool to publishing your site and configuring a custom domain.

Table of Contents

Intro to Firebase

Firebase is a mobile and web application development platform originally developed by Firebase, Inc. in 2011 and later acquired by Google in 2014. It has now become a flagship product of Google Cloud. While Firebase offers a wide range of features for mobile applications, it also includes an advanced web hosting service.

Firebase Hosting Features

Firebase Hosting is designed to host static websites generated by static site generators or server-side CMS platforms. It supports hosting any static content as long as it’s not dynamic. It delivers files through the Fastly CDN, ensuring fast and reliable content delivery. Firebase Hosting also provides an automatic SSL certificate and supports custom domains.

Why Use Firebase Hosting?

Firebase Hosting offers several advantages for hosting static websites and SPAs. Its built-in CDN ensures fast global content delivery without the need for additional CDN services. The service is developer-friendly, providing an easy deployment process with one-click rollbacks. Firebase Hosting has a generous free tier and offers affordable plans as your website scales. Managing your website on Firebase Hosting is much easier compared to setting up and managing your own server.

Install the Firebase CLI Tool

To get started with Firebase Hosting, you need to install the Firebase CLI tool. The CLI tool allows you to interact with Firebase from the command line. You can install it using npm or yarn. Here are the commands to install the Firebase CLI tool:

npm install -g firebase-tools

or

yarn global add firebase-tools

After installing the Firebase CLI tool, authenticate it with your Google account by running:

firebase login

Create a Project on Firebase

Next, you need to create a project on Firebase. Go to the Firebase console (https://console.firebase.google.com/) and create a new project. Once your project is created, you can proceed with the next steps.

Configure the Site

In your project’s root folder, run the following command to initialize Firebase Hosting:

firebase init

Choose “Hosting” by pressing space and then enter to continue. Select the project you want to deploy the site to. If you don’t have an existing project, choose “create a new project”. Specify the folder containing the static version of your site, for example, public. When asked about configuring as a single-page app, reply with “No” to avoid URL rewriting.

Publish the Site

To publish your site, run the following command:

firebase deploy

Firebase will take care of the deployment process, and your site will be published. You can now access your site using the URL provided by Firebase.

Custom Domain

To use a custom domain for your Firebase-hosted site, go to the Firebase console and navigate to your project’s Hosting section. Click on the “Connect Domain” button. Follow the instructions to provide your domain name and verify ownership by setting up a TXT record in your DNS panel. Once verified, you will be provided with A records to add to your DNS panel. Set up both the root domain and the “www” subdomain, making the latter a redirect. After updating the DNS records, you need to wait for the changes to propagate.

Note that the SSL certificate provisioned by Firebase may take some time to become valid. Once everything is set up, your site will be accessible using your custom domain.

Tags: Firebase, Firebase Hosting, web hosting, static websites, single-page apps, CDN, SSL certificate, custom domain