How to host your website on Firebase for free and connect with goDaddy domain tutorial

 

This article covers following topics related to firebase hosting.

  • What is Firebase hosting?
  • Is Firebase hosting free?
  • Firebase hosting custom domain.
  • Firebase hosting using NodeJs CLI
  • Connect Firebase with GoDaddy domain.

Firebase Hosting allows you to deploy your static web apps for free, you also may want to look at hosting for wordpress websites if you’re wanting to get a site up and live online.

I will show you how to deploy your website on firebase using Node.js.

I will also guide you How to update/ re-deploy your website on Firebase.

After deployment, you will get firebaseapp.com subdomain.

But firebase allows you to connect your website with your custom domain name parked anywhere using web hosting services such as those provided by www.hostiserver.com and similar companies.

My domain was parked at GoDaddy, so I will show you how to connect with GoDaddy domain. If you need some additional help with knowing how to make a godaddy website, then you can go onto ‘Create WP Site’ Youtube page and find helpful resources there.

In this tutorial, I will teach you how to host your web application to firebase hosting server using Node.js. If you are looking for a web hosting guide it is advised that this is not a comparison of a number of different hosts, but a specific tutorial. Alongside connecting to firebase, I will also teach you how to connect your domain with Firebase.

Step 1: Download Node.js from this Download link

Installing Firebase Tools/ Packages

Because You need to communicate with Firebase Hosting Server, You have to give commands to Firebase Hosting Server and you will upload your web app files (HTML, CSS, and other files) on Firebase Hosting Server.

You need to install Firebase on your machine.

Open command prompt and type command

npm install -g firebase-tools

This command will install Firebase Packages on your local machine.

Install Firebase
Install Firebase Tools using Node.JS

After installation of Firebase tools, you will see below output on the console.

Firebase tools install
Firebase Tools Installed

Step 2: Go to Firebase console and click on Add a new project.

Firebase console create new project
Firebase Console

Authenticating with Firebase and Uploading Files

We have installed Firebase on our local machine and created a new project on Firebase Console.

Now We have to connect/authenticate with Firebase Hosting Server and upload our web app files for Hosting purpose.

Step 2: Now login to Firebase from the command prompt using this command.

It will authenticate your Firebase account.

firebase login

Type above command and hit Enter.

It will ask you to allow firebase to collect anonymous CLI usage.

Type Yes and hit Enter.

Authenticate Firebase hosting server account
Firebase Hosting Server Authentication
Firebase Hosting Server Authentication Example
Firebase Hosting Server
Authentication

Step 3: Create a folder (on your local machine) named “public” and place source files (all your static website files) in public folder.

Step 4: Open command prompt and change path parent folder of the public directory (not inside the public folder where your website files are)

Firebase hosting server set path
Firebase Hosting Server Files Path

Step 5: Make sure you are pointing a right directory.

A directory which has the public directory and public directory should have an index.html file (your website files)

Initializing Firebase Hosting Server Project

firebase init

We have initialized our project in this directory.

Above command will create a firebase.json configuration file for your project.

Type public when it asks you about public directory (it should have index.html file). like in below screenshots.

firebase init
firebase web hosting using node js
firebase website hosting using node.js
firebase hosting commands node.js

Type No for all options after this step. when initialization is complete

Step 6:

firebase deploy
deploy firebase website
deploy the website on firebase command screenshot

After your website is deployed you will get project URL and your web application default hosting URL.

Connecting Custom Domain GoDaddy

Now we will connect our website hosted at Firebase with a custom domain. my domain is parked at

Godaddy so I will show you how to connect Firebase website with GoDaddy domain.

Select Connect Domain from firebase console. and type your domain.

Firebase Hosting connecting custom domain go daddy
Firebase Hosting connecting custom domain go daddy.

After that, you will get TXT record and 2 A type records.

Go to your GoDaddy account and Manage DNS section and remove existing records of type TXT and A type. and add records given by firebase.

Firebase Hosting Custom Domain Go Daddy Records
Firebase Hosting Connect Custom Domain Go Daddy Records

Firebase Hosting Server will verify your domain parked at GoDaddy. if everything goes well your website will be connected to a custom domain.

If ever you want to update your website content on Firebase Hosting Server.

Simply run

firebase deploy

and your website will be updated on Firebase.

If ever you want to go back to the previous version of your website. you can roll back changes.

Firebase hosting server web app deployment
Firebase Hosting Server Web Deploy

As you can see CONNECT DOMAIN Button on firebase Dashboard.

I have connected my website hammad-tariq and its status is Connected which means my website is live on Firebase Hosting Server and it is connected with my custom domain hammad-tariq.com.

If you want to connect your website with your custom domain.

simply click on connect custom domain button and it will give you some Record Strings which you need to place in your domain manager (DNS).

Some common Firebase Hosting and connecting with custom domain issues and questions asked by users on my youtube video.

  1. The status on firebase still “need setup” to change to connect.

Common causes:-

  • Because Firebase Hosting server is unable to connect/verify your domain.
  • You have not updated old A records in your website domain manager. Because your domain manager must know which server to target for serving domain.

2. How to remove firebase hosting subdomain like firebaseapp.com?

By default, Firebase Hosting Server assigns a unique project-id or URL to every website.

If you want your full domain like ours Developine.com You need to connect/authorize firebase with your domain manager (where your domain is parked).

Conclusion

  • We have learned how to Install Firebase Server on Windows Machine.
  • How to Authenticate or Connect with Firebase Hosting Server.
  • How to initialize Firebase Hosting Project on the local machine.
  • How to deploy a web app on Firebase Hosting Server.
  • How to connect with Custom Domain on Firebase Hosting Server.

 

Contact Us