Custom domain configuration in Firebase - Mini Project: Build & Apply

Custom Domain Configuration in Firebase Hosting

📖 Scenario: You have a website hosted on Firebase Hosting with the default Firebase domain. Now, you want to use your own custom domain so visitors can access your site with a friendly web address like www.example.com.

🎯 Goal: Configure a custom domain for your Firebase Hosting project by setting up the domain data, adding verification configuration, applying the domain to Firebase Hosting, and completing the setup with DNS records.

📋 What You'll Learn

Create a dictionary called custom_domain with keys domain_name and verification_token.

Add a configuration variable called firebase_project_id with the exact value my-firebase-project.

Create a dictionary called firebase_hosting_config that includes the project_id and the custom_domain dictionary.

Add a dictionary called dns_records with keys CNAME and TXT for DNS verification and routing.

💡 Why This Matters

🌍 Real World

Custom domains make your website easier to find and look professional by using your own web address instead of a default Firebase URL.

💼 Career

Understanding how to configure custom domains is essential for cloud engineers and web developers managing web hosting and domain name systems.

1

Create the custom domain data

Create a dictionary called custom_domain with the exact keys and values: 'domain_name': 'www.example.com' and 'verification_token': 'firebase-verification-12345'.

Firebase

# Create the custom_domain dictionary with domain_name and verification_token
# Your code here

Hint

Use curly braces to create a dictionary with the exact keys and values.

2

Add Firebase project ID configuration

Add a variable called firebase_project_id and set it to the exact string 'my-firebase-project'.

Firebase

custom_domain = {
    'domain_name': 'www.example.com',
    'verification_token': 'firebase-verification-12345'
}

# Add firebase_project_id variable below
# Your code here

Hint

Assign the exact string to the variable firebase_project_id.

3

Create Firebase Hosting configuration dictionary

Create a dictionary called firebase_hosting_config with keys project_id set to firebase_project_id and custom_domain set to the custom_domain dictionary.

Firebase

custom_domain = {
    'domain_name': 'www.example.com',
    'verification_token': 'firebase-verification-12345'
}

firebase_project_id = 'my-firebase-project'

# Create firebase_hosting_config dictionary below
# Your code here

Hint

Use the variables you created to build the configuration dictionary.

4

Add DNS records for domain verification and routing

Create a dictionary called dns_records with keys CNAME set to 'ghs.googlehosted.com' and TXT set to the verification_token from custom_domain.

Firebase

custom_domain = {
    'domain_name': 'www.example.com',
    'verification_token': 'firebase-verification-12345'
}

firebase_project_id = 'my-firebase-project'

firebase_hosting_config = {
    'project_id': firebase_project_id,
    'custom_domain': custom_domain
}

# Create dns_records dictionary below
# Your code here

Hint

Use the verification token from the custom_domain dictionary for the TXT record.

Practice

1. What is the main purpose of configuring a custom domain in Firebase Hosting?

easy

A. To enable Firebase Authentication for your app

B. To increase the storage capacity of your Firebase project

C. To create a new Firebase project automatically

D. To use your own website address instead of the default Firebase URL

Solution

1. Step 1: Understand Firebase Hosting default URLs

   Firebase Hosting provides a default URL, but it is not personalized.

2. Step 2: Purpose of custom domain

   Configuring a custom domain lets you use your own website address, making it easier for users to find your site.

3. Final Answer:

   To use your own website address instead of the default Firebase URL -> Option D

4. Quick Check:

   Custom domain = personal website address [OK]

Hint: Custom domain means your own website address, not Firebase default [OK]

Common Mistakes:

• Confusing custom domain with Firebase project storage
• Thinking it enables authentication automatically
• Assuming it creates a new Firebase project

2. Which DNS record type is commonly required to verify domain ownership when setting up a custom domain in Firebase Hosting?

easy

A. CNAME record

B. MX record

C. TXT record

D. A record

Solution

1. Step 1: Identify verification method

   Firebase asks you to add a DNS record to prove you own the domain.

2. Step 2: Common DNS record for verification

   TXT records are used to store text data for verification purposes.

3. Final Answer:

   TXT record -> Option C

4. Quick Check:

   Domain verification uses TXT record [OK]

Hint: Verification usually needs a TXT DNS record [OK]

Common Mistakes:

• Using MX record which is for email routing
• Confusing CNAME with verification record
• Using A record which points IP address

3. You added a CNAME record pointing www.example.com to ghs.googlehosted.com as Firebase instructed. What will happen when users visit www.example.com after DNS propagation?

medium

A. Users will get a DNS error and cannot reach the site

B. Users will see your Firebase hosted website at www.example.com

C. Users will be redirected to Firebase console login page

D. Users will see a default Firebase project page

Solution

1. Step 1: Understand CNAME record purpose

   CNAME points your domain to Firebase Hosting's server address.

2. Step 2: Effect after DNS propagation

   Once DNS updates, visiting www.example.com loads your Firebase hosted site.

3. Final Answer:

   Users will see your Firebase hosted website at www.example.com -> Option B

4. Quick Check:

   CNAME to Firebase = site loads correctly [OK]

Hint: CNAME to Firebase host means your site shows on your domain [OK]

Common Mistakes:

• Expecting DNS error after correct CNAME setup
• Thinking users get Firebase console page
• Assuming default Firebase page shows instead

4. You configured your custom domain but users report your site is not loading. Which of these is the most likely cause?

medium

A. You forgot to verify domain ownership by adding the required DNS record

B. You used an A record instead of a TXT record for verification

C. You deployed your Firebase project without enabling billing

D. You did not enable Firebase Authentication

Solution

1. Step 1: Check domain verification requirement

   Firebase requires domain ownership verification before serving your site.

2. Step 2: Effect of missing verification

   If verification is missing, Firebase will not serve your site on the custom domain.

3. Final Answer:

   You forgot to verify domain ownership by adding the required DNS record -> Option A

4. Quick Check:

   Missing verification = site won't load [OK]

Hint: Always verify domain ownership to activate custom domain [OK]

Common Mistakes:

• Confusing billing with domain verification
• Thinking authentication affects domain setup
• Using wrong DNS record type for verification

5. You want to configure both example.com and www.example.com to serve your Firebase hosted site securely. Which is the best approach?

hard

A. Add both domains in Firebase Hosting, verify ownership for both, and set DNS records accordingly

B. Only add www.example.com in Firebase and redirect example.com to it without verification

C. Add example.com only and rely on Firebase to automatically serve www.example.com

D. Use only example.com and set a CNAME record for www.example.com pointing to example.com

Solution

1. Step 1: Add both domains in Firebase Hosting

   Firebase requires each domain to be added and verified separately.

2. Step 2: Verify ownership and set DNS for both

   You must verify both domains and configure DNS records to point to Firebase Hosting.

3. Step 3: Ensure HTTPS works on both domains

   Firebase provisions SSL certificates for each verified domain to serve securely.

4. Final Answer:

   Add both domains in Firebase Hosting, verify ownership for both, and set DNS records accordingly -> Option A

5. Quick Check:

   Both domains added and verified = secure site on both [OK]

Hint: Add and verify each domain separately for full coverage [OK]

Common Mistakes:

• Assuming Firebase auto-serves unadded domains
• Skipping verification for one domain
• Using CNAME incorrectly for apex domain