Deploying your website on Firebase

What is Firebase?

​​ 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:

• A firebase.json configuration file that lists your project configuration. Learn more about this file on the Configure hosting behavior page.
• A .firebaserc file that stores your project aliases.

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:

• Continue to improve your site by testing it locally, sharing changes at a temporary preview URL, and then deploying it to your live site.
• Learn about further hosting capabilities:
• Configure hosting behavior
• Connect a custom domain
• Serve dynamic content and host microservices
• Take a look at the full documentation for the Firebase CLI.
• Monitor the Usage and billing dashboard in the Firebase console to get an overall picture of your project’s usage across multiple Firebase services. You can also visit the Hosting Usage dashboard for more detailed usage information.
• Review the Firebase launch checklist.

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.