Deploying your website on Firebase

What is Firebase?

Reshwin Nishith E
The Patr-onus Deployment Blog
3 min readOct 18, 2021

--

​​ Firebase is a set of services of Google that provides you a BaaS (Back-end as a service), which means you don’t have to worry about the boring part of having to handle the back-end shenanigans.

One of these provided services is the Firebase Hosting that you can deploy your website or web app made in HTML, Javascript, and CSS.

Step 1: Things you need before we begin

  • A Gmail Account to sign in to firebase
  • Node.js is required to install firebase-CLI (Command-line interface) which will be used to deploy the website.
  • The static website that you wish to deploy.

Step 2: Firebase CLI

Head over to Firebase CLI reference and follow the steps given on the screen to install and run Firebase Command Line Interface.

Step 3: Initialize the CLI

Next, run the following command from the root of your local project directory:

$ firebase init hosting

Select a firebase project to connect to your local project directory:

  • The selected firebase project is your “Default” Firebase project for your local project directory.
  • To connect additional Firebase projects to your local project directory, Set up project aliases.

Specify a directory to use as your public root directory.

This directory will house all your publicly served static files, including your index.html file and any other assets that you want to deploy to firebase hosting.

  • The default name for the public root directory is called ‘public’
  • You can specify your public root directory now, or you can specify it later in your firebase.json configuration file.
  • If you select the default and you don’t already have a directory called public, Firebase will create one for you.
  • If you don’t already have a valid index.html file or 404.html file in your public directory, Firebase creates them for you as well.

Step 4: Choose a configuration for your site

If you select to make a one-app page, then firebase automatically adds a rewrite configuration for you.

At the end of initialization, Firebase automatically creates and adds two files to the root of your local app directory:

Step 5: Deploy

To deploy to your site, run the following command from the root of your local project directory:

$ firebase deploy — only hosting

This command deploys your Hosting content and config to the following Firebase-provisioned subdomains:

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

Step 6: Done!

Your site is deployed and ready to be viewed by everyone!

So now that you’ve deployed your site, here are some things you can do to improve it:

And that’s it. For the most part, deploying through Firebase is free of cost & is exceptionally easy. I mean, even the 11 year old Indian kid who just started learning to code, can deploy through Firebase.

--

--