Setup Firebase Hosting

Why use Firebase Hosting?

  • Free 1GB Storage and 10GB Transfer/month.
  • Custom domain and SSL supported without additional charge
  • CDN
  • Easy integration with Google Cloud Functions / Cloud Run


Free quota is 1GB Storage and 10GB Transfer/month.

Beyond the free quota is $0.026/GB (Storage) and $0.15/GB (Transfer).

NOTE: Netlify free plan offer 100GB (Storage) and 100GB/month (Bandwidth).

Install Firebase CLI

NOTE: Firebase CLI requires Node.js v6.0.0 or later. Try nvm to support multiple version of Node.js, or refer here for Windows support.

Install Firebase CLI

npm install -g firebase-tools

NOTE: To update firebase-tools, run the same command again.


firebase login

Check if the login authentication worked.

firebase list

Initialize your project

Create a project directory.

cd /code/firebase/PROJECT_NAME

Initialize Firebase project

firebase init
? Which Firebase CLI features do you want to set up for this folder?
# Select `Hosting: Configure and deploy Firebase Hosting sites` (press Spacebar to select, then press Enter).

? Select a default Firebase project for this directory:

? What do you want to use as your public directory? (default is public)
# I press enter because I am using public directory

? Configure as a single-page app (rewrite all urls to /index.html)?
# I pick No. Though VuePress support PWA and function almost like a SPA, but it is also a static html generator capable to handling urls request.

The following files are created




firebase deploy

Access the website:

NOTE: I could not access though. The Firebase Console -> Hosting shows coming soon on 22 May 2019.

Testing and Deployment

Rename existing public directory created by firebase.

mv public _public

I created a landing page with VuePress, thus I create a symbolic link to VuePress's dist directory.

ln -s /code/vuepress/PROJECT_NAME/docs/.vuepress/dist/ public

NOTE: public directory should contains all your html, css, js, images, etc.

Test hosting locally.

firebase serve

Access http://localhost:5000.


firebase deploy

Setup Custom Domain

Goto Firebase Console - Hosting, click Connect domain.

Domain: either or

Need to add the TXT records below to your DNS provider to verify domain ownership.

NOTE: Some DNS provider like NameSilo takes 15 minutes to published the changes. For a free and faster DNS update, you can use Cloudflare DNS.

After successful verification, add the shown A records to your DNS entry.

NOTE: Make sure to delete existing A records which point to the old servers.

NOTE: If you use, there is a prompt to configure to redirect to

When trying to access, it shows a NET::ERR_CERT_COMMON_NAME_INVALID error.

I click on View and change setup mode from Quick setup to Advance and saw the message Wait for your certificate to be provisioned. This may take up to 24 hours..

Also the status changed from Need setup to Pending (it took a 5-10 minutes for the change) - mouse over the question mark for latest status. If the status still remained at Need setup for a long time, you might want to switch from Quick setup to Advance, sometimes there is a request to add _acme-challenge TXT records which are only shown in Advance mode.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.