Host a Static Website using Firebase Hosting Service with Custom Domain

Host a Static Website using Firebase Hosting Service with Custom Domain: Google cloud provides a hosting service. Using that service, we can host static web application easily, free and securely.

Why you should go with Firebase Hosting?

Firebase hosting is not only free service, its an easy way to host as well, as its default provides the SSL certificate so that your website will be hosted securely with HTTPS.

Many of the hosting servers are in paid with slow speed. But Firebase hosting service will provide you impressive good speed across many locations without the need of separate CDN.

For Configuration or Hosting, we required the following:

Google Account: For Firebase setup account in the console.
Domain Details: Map you hosting service with the domain, There are many providers available, you can purchase a domain from any provider.
Firebase-CLI: you can install Firebase-CLI using the below npm command

npm install -g firebase-tools or yarn global add firebase-tools

Get started hosting a static website

Step 1: Configured Firebase project on Firebase console

Open Firebase console – Sign-In using Google account – Create New Project – Dashboard

Step 2: Install Firebase-CLI on the local machine

npm install -g firebase-tools or yarn global add firebase-tools

Step 3: Configuration of Firebase-CLI on the local machine

Create a new folder in your computer, for example, I’ve created one folder with name Firebase-StudyWebApp in Drive D
Open CMD (command prompt) window and reach to path D:\Firebase-StudyWebApp
Now write-down the command firebase login

This will redirect you to sign-in page in the browser, where you just need to simply sign-in.

After successfully allowing the permission, you will get successful message on the browser

Step 4: Initialize the project

Initialize the project using firebase init command from cmd prompt window, After entering init command in command prompt firebase provides you few options to go with, in those options you need to choose to host option and then click Enter to choose.

Once the Hosting option is selected, they’ll provide the option to choose an existing project or create a new one. As we have already created a sample static project, you need to just choose the existing option and click on enter.

Then few configuration settings are required to perform you just need to select yes or no based on your requirements. On the final step, they will ask to create a new index.html file or be with index.html file, once you’ve selected your option your application is ready to go live on your localhost server.

Step 5: Publish website on localhost

After configuration settings for a web application, we need to enter firebase serve command in command prompt, this command will host a web application in localhost with 5000 port number.

Once your application hosted on http://localhost:5000, you can review it in the browser by opening this.

Step 6: Deploy on the live firebase server:

Step 7: After entering the firebase deploy command, our application hosted on live server. you can review by given link address in the console.

Above step by step explanation is for hosting a static website using the firebase hosting service.

Now we learn how to map custom domain web application which we deployed earlier.

Get started mapping your domain with a hosted website in Firebase

Step 1: Open Firebase Console – Open the project created earlier

Step 2: Once opening the project, there will be HOSTING link option from the left sidebar in the dashboard screen, you need to open that screen.

Step 3: Hosting screen will appear, from the “dashboard” menu option there will be “Add a custom domain” button, you need to click on it.

Step 4: You need to add a domain name, once the domain name is added, they will provide you the “TXT record” for DNS provider. Copy that txt record.

Step 5: Let’s say you have purchased a domain from namecheap provider, then you need to verify or enter TXT Record into namecheap provider hosting settings. which is called “A” records for DNS settings.

Step 6: Once a TXT Record is added, you need to add domain IP address into a setting that points to DNS.

After configuring or updating DNS settings on a domain provider, it will take up to 5 minutes to 1 hour for a map or connect with the domain which you provided. Once the domain is mapped you can access your website using a domain name that you map with the hosted provider.

These are the steps to map your custom domain or preferred domain with a published website on Firebase cloud using their services.

Search Keywords