Skip to content

bobby_dreamer

Deploying & Hosting in Firebase

web-development, gatsbyjs, firebase, deployment6 min read

This is part of How i made this gatsby site series.

So far i have been repetitively doing designing, building and testing, right now i am at a stage to promote the changes to UAT and see the final build before implementation to perform this activity i will have to use gatsby build and finally get the site setup in Firebase to host.

# Final Stage of Testing

Source : Gatsby : Overview of the Gatsby Build Process

Gatsby builds everything ahead of time meaning it will complie all the assets like minifying css, javascript, transforming images, json files, etc. and saves them to public folder so when the site is run it doesn't need any server-side rendering. This is one of the features that makes Gatsby fast.

Run gatsby build to initiate the build process.

Output of the gatsby build

Test the output of the build compilation using gatsby serve
Output of gatsby serve

If everything looks good, you can signoff the UAT testing and proceed to deployment.

# Hosting in Firebase

Source : Deploying to Firebase Hosting

Steps below are pretty straight forward as in the above link,

  1. Open firebase console using Google Account

  2. Create a firebase project ( I already have a firebase project, mostly empty, so i am using that ). Click Project Overview and click Add App Firebase Console - Project Overview

    Also, i am thinking of change the project name from bobbydreamerContactForm to bobbydreamer-site as project-name seems to be editable in Settings.

  3. Click </> icon Firebase Console - Add App

  4. Fill in the details, App Nickname, Check Hosting and you have option either create new app or select existing one. I am selecting existing app and clicked Register App Firebase Console - Register App

  5. If you are building a Web Application, you should add this in the site. I am not using this at the moment. So, its not required for me. Firebase Console - Hosting setup

  6. Install firebase-tools, its needed to host your site with Firebase Hosting.

  7. After installation, go to the root folder of your site and sign into Firebase using Google account

  8. Test the CLI using command firebase projects:list

  9. Run the below command in the root directory of your site to initialize Firebase this creates a firebase.json configuration file which is required to deploy assets with the Firebase CLI because it specifies which files and settings from your project directory are deployed to your Firebase project.

    Note: If you run firebase init again for any specific Firebase service, the command will overwrite the corresponding section of file firebase.json back to the default configuration for that service.

    Below is the output of command firebase init, have a look at the input and response of the highlighted code,

  10. Replace firebase.json with below content

  11. Test the site from firebase perspective using command firebase serve --only hosting. Just being careful as two technologies are involved here.

  12. Deploy the site to firebase using below command and at the end of deployment you will get the site URL.

    Output of firebase deploy

    You can the check deployment details in Firebase Console as well,

    Firebase Console - Hosting

# Connecting to a custom domain

Source : Connect a custom domain

I have purchased a domain bobbydreamer.com using Google Domains and when setting up hosting there will be a process to verify ownership and to ease up that process, i am going to verify the ownership early by visiting Google Search Console, this doesn't take much time actually and along with that, it will setup an account for the website where you will have a dashboard view of site's performances and errors and many more. At this point, this Search Console dashboard is also new to me, so i am not going into it, at the moment.

Enter site name and click continue Google Search Console - Enter site name

Click Done Google Search Console - Ownership verified

Note : This is an optional approach, if you have registered the domain using Google Domain, verification is automatic in Firebase hosting setup.

Perform the below steps in Firebase console in Hosting page,

  1. Click Add custom domain button and fill in the site name as in the example and click continue.
    You will skip section (2) as the site is already verified. Firebase Console - Hosting

  2. There are two modes either you go with "Quick" or "Advanced"

    • Quick Mode : You will have to add "A" records to your domain
      Firebase Console - Hosting

      In Google domains, in the name field, you can give either @ as you are setting it up for a root domain or domain name as specified in "Add custom domain box" (ie., bobbydreamer.com ) Firebase Console - Hosting

      In Google domains, enter the "A" records and click "Add" Google Domains - DNS Provider

      It should appear as below, Google Domains - DNS Provider

    • Advanced Mode : You will have to add "TXT" records. Copy & paste from firebase console to DNS provider. Firebase Console - Hosting

      I have already added the "TXT" from Firebase hosting in Google domains, it looks like below(2nd & 3rd record), Google Domains - DNS Provider

      To get to this part, it took 2Hrs Firebase Console - Hosting

    Note : This entire process is a time consuming process, its a wait and watch kind of scenario. For me, "Quick" mode approach was faster(took 2hrs), for you timeframe may vary.

  3. Once the above process is finished, firebase asked me to setup for www.bobbydreamer.com as initially i had set it up for bobbydreamer.com. Steps are pretty much similar to above and in the end it looked like below in Google Domains

    Google Domains - DNS Provider

  4. After few mins, i could see the new site

    Live site

# Next time onwards

Only below commands are required to update content on the site,

# Next steps

  1. Make quality content weekly
  2. Look for a CI/CD approach to build and deploy
  3. May be, just may be, try to implement the site via App Engine, Kubernetes and Cloud Run

# Technical terms & definitions

Google domains

  • Resource records : Resource records provide DNS-based information about the hardware and software components that point to and support your domain (hosts, name servers, web servers, email servers).

    Each resource record consists of a set of fields:

FieldsDescription
NameA label indicating the name or owner of the record. This can be the root domain (indicated by @) or a subdomain (such as “www”).
TypeThe record's type. For example, the A (address) record.
TTL(Time-To-Live) How often a copy of the record stored in cache (local storage) must be updated (fetched from original storage) or discarded. Shorter TTLs mean records are fetched more often (access is slower, data is more current). Longer TTLs mean records are fetched from less often (access is faster, data is less current). The default value is 1 hour. Note: When you make changes to a resource record, It could take up to the length of the TTL time for the change to propagate. When you add a new resource record, it will be visible to Internet users in 5 minutes.
DataThe record's data, which varies depending on the record's type. For example, a host's IP address for A records. Note that this is the data that is returned during a DNS search.
  • Resource Record Types ( some commonly used record types )
    In addition to the DNS resource records described here, Google Domains also supports synthetic records that extend the functionality of resource records.

    • A : A (IPv4 address) records map the domain name of a host to the IP address of that host (name-to-address mapping).

      Note: A records and AAAA records perform the same function. A records map to IP version 4 (IPv4) addresses. AAAA records map to IP version 6 (IPv6) addresses.

    • AAAA : AAAA (IPv6 address) records map the domain name of a host to the IP address of that host (name-to-address mapping).

      Note: A records and AAAA records perform the same function. A records map to IP version 4 (IPv4) addresses. AAAA records map to IP version 6 (IPv6) addresses.

    • CNAME : CNAME (canonical name) records map an alias domain name to a canonical (true) domain name. You can map multiple alias names to the same canonical domain (allowing you to set up A or AAAA record IP addresses in a single location).

      In this example, www is the alias domain and example.com is the canonical domain (it's mapped to an IP address using the A record)..

      In this example, www and FTP are alias domains and server1.example.com. is the canonical domain (it's mapped to an IP address using the A record).

      CNAME records cannot be set for the root domain. Also, the target of a CNAME record can only be a domain name; paths are not allowed. If you want to redirect your root domain, or if your desired target is a URL that includes a path, try one of these options:

      • Use the domain forwarding feature instead of a CNAME (see Domain forwarding).
      • Create a Forwarding record using the same entries you would put in a CNAME
    • MX : MX (mail exchange) records map a domain name to a mail server receiving email for that domain. MX records identify which mail servers others use to send email to a domain.

      Multiple MX records can be set up for a domain, each with a priority number, where lower numbers have higher priority. In the example below, if mail can't be delivered using the host with the higher priority (10), the host with the lower priority (20) will be used.

      If the priority numbers are the same (10 and 10), the MX records can be used to balance the load between hosts; either host will be chosen arbitrarily.

      Note: Google Domains does not provide a separate field for the priority number. To specify a priority number, enter the value in the data field followed by the mail host (10 mailhost1.example.com.).

    • TXT : TXT (text) records contain arbitrary information, in the form of human-readable text or machine-readable data, that can be added to a resource record.

# Resources

  1. Gatsby : Overview of the Gatsby Build Process
  2. Gatsby : Deploying to Firebase Hosting
  3. Firebase : Firebase CLI reference
  4. Firebase : Connect a custom domain
  5. Google Domains help

# Related articles

  1. How i made this gatsby site