Introduction

Firebase Hosting provides a seamless solution for hosting web applications and static websites, allowing you to easily set up custom domains for your projects. This guide will walk you through the process of domain setup and configuration with Firebase Hosting, ensuring that your web app is accessible via your own branded domain.

Prerequisites

Before you begin the domain setup and configuration process, make sure you have the following prerequisites in place:

1. Firebase Project and Web App

You should have an existing Firebase project set up and a web app that you want to deploy. If you haven’t created a Firebase project or a web app, do so in the Firebase Console.

2. Custom Domain

You need to own or have access to a custom domain that you want to use for your web app. If you don’t have one, purchase a custom domain from a domain registrar or hosting provider.

Domain Setup with Firebase Hosting

Now, let’s dive into the process of setting up your custom domain with Firebase Hosting.

1. Configure DNS Records

To connect your custom domain to your web app hosted on Firebase, you need to configure the necessary DNS records. These DNS records will route traffic from your custom domain to Firebase Hosting.

Example of DNS Records for Firebase Hosting

A      example.com   151.101.65.195
A      example.com   151.101.129.195
CNAME  www           ghs.googlehosted.com

In the example above, replace “example.com” with your custom domain and “www” with the subdomain you want to use, such as “www” or “blog.”

2. Access Domain Settings

Access the domain settings provided by your domain registrar or hosting provider. You can typically find these settings in the domain management interface.

3. Add DNS Records

Add the DNS records specified by Firebase Hosting to your domain settings. These records include A records pointing to specific IP addresses and CNAME records for subdomains.

Domain Verification with Firebase

To ensure that you have set up the DNS records correctly, Firebase Hosting provides domain verification. Firebase will check the DNS records to verify that your domain is correctly configured.

1. Verify Domain in Firebase Console

Navigate to the Firebase Console and access your project’s hosting settings. In the “Custom Domains” section, click “Add a custom domain.”

2. Enter Your Domain

Enter your custom domain in the provided field and click “Continue.” Firebase will check the DNS records to verify your domain configuration.

3. Wait for Verification

Firebase may take some time to verify your domain. Once the verification is successful, you will be able to proceed with the configuration.

Configuration in Firebase Console

After successfully verifying your custom domain, you can configure it in the Firebase Console.

1. Select Custom Domain

In the Firebase Console, under the hosting settings for your project, select the custom domain you’ve verified.

2. Set SSL Configuration

Firebase Hosting allows you to configure SSL for your custom domain. You can use Firebase’s default SSL certificate or upload a custom SSL certificate if needed. Using SSL ensures secure connections for your domain.

3. Choose Default Hosting Site

Select the Firebase Hosting site to which your custom domain should be connected. You may have multiple sites hosted within the same Firebase project, and you can choose the one associated with your custom domain.

4. Configure Redirects and Rewrites (Optional)

You can set up redirects and rewrites in the Firebase Console to manage traffic and URLs on your custom domain. This is useful for handling old URLs, creating friendly URLs, or redirecting subdomains.

Deploy to Custom Domain

Once your custom domain is configured in Firebase Hosting, you can redeploy your web app to this domain using the Firebase CLI.

Example of Deploying Your Web App to a Custom Domain

firebase deploy

This command will upload your web app’s files and assets to Firebase Hosting, making them accessible via your custom domain.

Conclusion

Configuring a custom domain with Firebase Hosting provides a professional and branded URL for your web app. This guide has taken you through the steps of domain setup and configuration, from configuring DNS records to domain verification and final configuration in the Firebase Console. Once your custom domain is set up, your web app will be accessible to users on the web via your branded domain.