Using Custom Domains with SSL Security

Tutorial 3 of 5

1. Introduction

In this tutorial, we will walk through the process of using your custom domain with Firebase Hosting and securing it with SSL. Firebase Hosting provides a fast, secure, and reliable way to serve your web app, and it is even better when used with your own custom domain.

By the end of this tutorial, you will be able to:

  • Connect your custom domain to Firebase Hosting
  • Secure your custom domain with SSL

To follow this tutorial, you will need:

  • A Firebase project
  • A custom domain you own
  • Basic knowledge of Firebase and web development

2. Step-by-Step Guide

2.1. Adding your custom domain to Firebase

The first step is to add your custom domain to Firebase. Here's how:

  1. Go to the Firebase console and select your project.
  2. Click on "Hosting" in the left-hand menu.
  3. In the Hosting page, click on "Add custom domain".
  4. Enter your custom domain, then follow the instructions provided by Firebase to verify your ownership of the domain. This usually involves adding a DNS TXT record to your domain's DNS settings.
  5. After verifying your domain, Firebase will provide you with a set of DNS records to add to your domain. This will connect your domain to Firebase Hosting.

Tips: The changes to DNS settings may take up to 24 hours to propagate across the internet. Be patient.

2.2. Securing your custom domain with SSL

Once your custom domain is connected to Firebase Hosting, Firebase will automatically provision and manage an SSL certificate for your domain. This ensures that your website is served over HTTPS, providing a secure connection for your users.

Tips: SSL certificate provisioning may take a few hours. You can check the status in the Firebase console.

3. Code Examples

While this process doesn't involve much coding, you may find the following Firebase CLI commands useful:

# Initialize a new Firebase project
firebase init

# Deploy your website to Firebase Hosting
firebase deploy
  • The firebase init command sets up a new Firebase project in your local directory. It asks a series of questions to set up your project.
  • The firebase deploy command deploys your website to Firebase Hosting. It should be run in the root directory of your website.

4. Summary

In this tutorial, we have learned how to connect a custom domain to Firebase Hosting and secure it with SSL. Firebase automates much of this process, making it easy to use your own custom domain and ensure it is secure.

Next, you might want to learn more about Firebase features such as Firestore, Authentication, and Cloud Functions. These can help you build more complex and powerful web apps.

The official Firebase documentation is a great place to start: Firebase Documentation

5. Practice Exercises

  1. Exercise 1: Set up a new Firebase project and connect it to a custom domain. Check that the website is served over HTTPS.
  2. Solution: Follow the steps in the tutorial. Use the firebase init and firebase deploy commands to set up and deploy your project. Check the HTTPS by looking at the URL bar in your browser - it should show a lock icon.

  3. Exercise 2: Connect a second custom domain to your Firebase project. Ensure that it is also served over HTTPS.

  4. Solution: In the Firebase console, go to the Hosting section and click on "Add another domain". Follow the same steps as before to verify and connect your domain. The SSL certificate will also be automatically provisioned.

  5. Exercise 3: Try to understand what happens if you don't secure your domain with SSL. Research on why SSL is essential.

  6. Solution: Without SSL, the data sent between your website and its users is not encrypted and can be intercepted. SSL is crucial for protecting sensitive data and maintaining user trust.