FlutterFlow Web app Custom Domain with Firebase Hosting

Table of Contents:

1. Overview
2. Benefits of Custom Domain
3. Pre-requisites
4. Setup the Custom Domain in Firebase
5. Conclusion

Overview:

In this document, we'll explore the process of adding a custom domain to your Flutterflow web app project hosted on Firebase. Think of it as giving your website a unique address like its own special name. You'll learn how Firebase knows your domain belongs to you and how to set up the domain so that when people visit your website, they find it easily. We'll also cover the important topic of keeping your website secure with an SSL certificate. By the end, you'll have a clear understanding of how to connect your Flutterflow web app to a custom domain making your website accessible to everyone.

‍

Benefits of Custom Domain:

The benefits of adding a custom domain to Firebase Hosting for the website:

Note: We are taking a website (app.airtabledevs.com) as a example to understand better.

1. Multiple Subdomains: Flutterflow has limitations on adding only a single custom domain for Pro user but Firebase Hosting allows the addition of up to 20 subdomains. 
2. Professionalism: Using a custom domain like "app.airtabledevs.com" instead of a long default Firebase domain like "webdeploytest-a9a38.firebaseapp.com" makes your website look more professional and trustworthy.
3. Memorability: People are more likely to remember "app.airtabledevs.com" compared to a complex default Firebase domain.
4. SEO: Search engines like Google prefer custom domains, so "app.airtabledevs.com" may show up higher in search results when people look for related things.
5. Brand Identity: Having a unique domain like "app.airtabledevs.com" helps establish a stronger brand identity that directly represents your brand's name and purpose.
6. Credibility: Using a unique domain builds trust and credibility with users, which is what established websites often do.
7. Customization: With "app.airtabledevs.com," you can organize web addresses that match your content, like using "app.airtabledevs.com" for tutorials. This offers a better experience for users.
8. Link Management: Sharing links on social media or in marketing becomes easier and looks better with a custom domain, improving how users experience your website.

‍

Pre-requisites:‍

Before we proceed, please follow the steps to deploy your Flutterflow web app into Firebase Click here .

1. Registered Domain: You should have registered domain. 
2. Access to DNS Settings: You should have access to the DNS (Domain Name System) settings of your registered domain. This allows you to configure the domain's DNS records to point to Firebase Hosting.

‍‍

Setup the Custom Domain in Firebase:

To add a custom domain to your Firebase web app, follow these steps:

• Go to the Firebase console and find the "Hosting" option inside the "Build" section.
• You'll find a button that says "Add Custom Domain" in the "Domains" section. Just click on it.

• Once you click "Add Custom Domain," a box pops up asking for the name you want for your website, like "app.airtabledevs.com" or "www.app.airtabledevs.com". Note: " Redirect app.airtabledevs.com to an existing website" this is optional. This means a redirect will change the URL in the browser; e.g. you can redirect www.yourdomain.com to yourdomain.com and the 'www' will automatically be removed.

• Now, click on the "Continue" button.
• Select Setup Mode as "Quick set-up" there you'll get some important information like Record Type, Host, and Value, etc. These DNS records must be set into your domain setting. Note:- For this blog, we are using GoDaddy as our domain provider to integrate a custom domain.

• Make sure to enter the record exactly as shown in Firebase. Any mistakes can stop your domain from working, so be careful and check it twice to make sure it's just right.

• Once you've added the record correctly, click on the "Verify" button.

• Once it “Verified”, then you have to click on Finish button.

• By adding the record as instructed, you're verifying ownership of the domain and allowing Firebase to associate it with your website. After completing this step, your website will be accessible through the custom domain you provided.

Note: Firebase offers the SSL certification to your website. SSL certification is a security feature that ensures secure and encrypted communication between your users and your web server. After you've completed all the necessary steps, including adding your custom domain and verifying it, Firebase will take care of the SSL certification process for you. However, it may take up to 24 hours for the SSL certificate to be fully installed and active. It's like installing a protective shield on your website, ensuring that any data exchanged between your users and your web server remains secure and private. Your website will have the extra layer of security with SSL certification.

‍

‍

Conclusion

Adding a custom domain to your Flutterflow web app makes your app look more professional and easy to remember. It helps people trust your app more. Also, it helps your app show up better on search engines. Plus, it Firebase SSL also ensures that when people use your app, their information is kept safe with SSL certification.

‍

If You Enjoyed Our Content

If you found this blog helpful and want to stay updated with more useful content, we invite you to follow us on our social media platforms. Connect with us on LinkedIn, Dev.to, Twitter, Reddit.

By following us on these platforms, you'll never miss any of our latest blog posts, tips, and tricks related to development and other exciting topics. We appreciate your support, and we look forward to providing you with valuable content in the future.

‍

Thank you for being part of our community!

‍

‍

‍

‍

‍

‍