DEV Community

Cover image for Firebase Hosting and Siteground
aseem wangoo
aseem wangoo

Posted on • Edited on

Firebase Hosting and Siteground

Hosted URL : https://web.flatteredwithflutter.com/

Pre-Requisite:

We have a website programmed using Flutter Web (https://fir-signin-4477d.firebaseapp.com/#/). Now we want to give our website a custom domain name.

This article won’t be creating any website(rather uses an existing website).

In case it helped :)
Pass Me A Coffee!!

Firebase Hosting

Article here: https://flatteredwithflutter.com/firebase-hosting-and-siteground/

Once you are ready building your website, you can deploy onto Firebase Hosting via

firebase deploy

This command deploys a release to your Firebase project’s default Hosting sites:

  • PROJECT_ID.web.app
  • PROJECT_ID.firebaseapp.com

Firebase Hosting serves your content over SSL, by default.

Go to Firebase Console and navigate to the Hosting Option. You will see your website deployed and its details.

Firebase Hosting and Siteground
Firebase Hosting and Siteground

Let's proceed with adding a custom domain to this deployed website.

Custom Domain

Click on the “Add custom domain” button

Firebase Hosting and Siteground
Firebase Hosting and Siteground

Here, enter the domain which you want the end-users to see on their web-browsers.

In our case, we have entered (web.flatteredwithflutter.com)

Note: You should enter a domain which you own, in our case its flatteredwithflutter.com

Next, click continue

Firebase Hosting and Siteground
Firebase Hosting and Siteground

Here, enter the domain which you want the end-users to see on their web-browsers.

In our case, we have entered (web.flatteredwithflutter.com)

Note: You should enter a domain which you own, in our case its flatteredwithflutter.com

Next, click continue

Firebase Hosting and Siteground
Firebase Hosting and Siteground


Firebase Hosting gives us A records, which need to be added to our DNS provider, in our case, its Siteground.

A Records are the most basic type of DNS record and are used to point a domain or subdomain to an IP address


Custom Domain with Siteground

Log in to your Siteground account and navigate to cPanel.

Go to the Domain section inside the cPanel home.

Firebase Hosting and Siteground
Firebase Hosting and Siteground

Inside the Domain section, click on Advanced DNS Zone Editor

Next, you need to add both A records, as mentioned in the Firebase Hosting.

  1. Name: What you entered inside the custom domain. 
  2. TTL (Time To Live): Enter the value as 3600

TTL is set in seconds, lowest value possible is 600 seconds (10 minutes). The highest possible value is 86400 seconds (24 hours).

3. Address: As specified in the Firebase Custom Domain step.

Firebase Hosting and Siteground
Firebase Hosting and Siteground

Finally, click Add Record

Repeat the same step, for the next IP Address. (since Custom Domain provided us with two IPs)


Finally, click Finish, inside the Firebase Custom Domain Setup

You will see something like this now (inside the Firebase Hosting Console),

Firebase Hosting
Firebase Hosting

In case, you want to navigate to this site now, you will see insecure connection warnings.

Firebase Hosting and Siteground

It takes some time to propagate domain name changes, up to 24 hours.

In our case, it took much less,(around 2 hours) and we see something like this (inside Firebase Hosting Console).

Firebase Hosting and Siteground
Connected

Our new domain has been assigned an SSL certificate.

Firebase Hosting and Siteground
Certificate Issued

Hosted URL : https://web.flatteredwithflutter.com/

In case it helped :)
Pass Me A Coffee!!

Top comments (0)