Firebase Hosting Setup

Overview

Firebase Hosting provides a fast, secure, and reliable way to host your web application's static and dynamic content. For ChromeQuick projects, it allows you to deploy a sample landing page and customize it according to your needs. This section will guide you through adding Firebase Hosting to your project, deploying your content, and linking a custom domain. Note: This is a very basic static landing page, you can skip this module if you want to create a more complex/functional landing page separately.

Adding Firebase Hosting to Your Project

Step 1: Enable Firebase Functions

1. Navigate to Your Firebase Console:

• Access your Firebase project by visiting the Firebase Console.

2. Add Firebase Hosting

• In the Firebase console, locate and select the "Hosting" section from the sidebar.

• Click on "Get started" and follow the steps to set up Hosting for your project.

Step 2: Prepare Your Content

Ensure your project's public folder contains the files you want to deploy:

• index.html: This is your sample landing page.
• styles.css: This contains the CSS for your landing page.

Step 3: Build Your Project

Before deploying, you need to build your project to compile all resources:

This command prepares your project for deployment by creating a build folder with all the static files optimized for production.

Step 4: Deploy to Firebase Hosting

Deploy your content using the Firebase CLI:

This command uploads your build folder contents to Firebase Hosting.

Step 5: Verify deployment

Once deployed, you can access your site at the default Firebase-provided URL, which you can find in your Firebase Hosting dashboard under the "Hosting" tab.

Configuring a Custom domain

To enhance branding and make your site more accessible, you might want to use a custom domain instead of the default Firebase URL.

Step 1: Add Custom domain

1. Go to the Firebase Hosting Section in your Firebase Console.

2. Click on "Add custom domain" in the "Hosting" tab

3. Enter Your Custom Domain and follow the instructions to verify ownership, which typically involves adding TXT records to your domain's DNS settings.

Step 2: Update DNS records

Once verified, Firebase will provide you with a set of DNS records to add to your domain's DNS settings. These records typically include A (IPv4) and AAAA (IPv6) records.

Step 3: SSL Certificate Provisioning

Firebase automatically provisions an SSL certificate for your custom domain and handles renewing it, ensuring that your site remains secure with HTTPS.

Step 4: Monitor Propagation

DNS changes might take some time to propagate, usually up to 48 hours. During this period, periodically check your domain until it starts resolving to your Firebase-hosted site.

Conclusion

With Firebase Hosting, you can quickly deploy your web application and make it accessible worldwide with high performance and reliability. Custom domains help strengthen your branding and make your application appear more professional. Remember to monitor your site's performance and utilization through the Firebase Console to ensure optimal operation.