How to deploy websites to Google Firebase

Google Firebase is one of the most powerful and beginner-friendly platforms for hosting modern web applications. Whether you are building a simple HTML site or a complex React application, Firebase offers a free tier (up to 1GB) that is perfect for developers looking to get their projects live quickly.

In this guide, we will walk through the entire process of deploying your website to Google Firebase.

Step 1: Prepare Your Project Build

Before deploying, you need to generate the production-ready files for your website. If you are using a framework like React, Vue, or Angular, run the build command in your terminal:

npm run build

This creates a build or dist folder containing your optimized HTML, CSS, and JavaScript files.

Step 2: Create a Firebase Project

1. Go to the Firebase Console.
2. Click Add Project and follow the prompts to name and create your project.
3. Once created, click on Hosting in the left-hand sidebar menu.

Step 3: Install the Firebase CLI

To interact with Firebase from your computer, you need the Firebase Command Line Interface (CLI). Install it globally using npm:

npm install -g firebase-tools

Step 4: Initialize Your Project

Open your terminal in the root directory of your project and follow these steps:

A. Login to Google

firebase login

This will open your browser. Sign in with the Google account associated with your Firebase project.

B. Initialize Firebase

firebase init

1. Use the arrow keys to select Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys. Press Space to select and Enter to confirm.
2. Select Use an existing project and choose the project you created in Step 2.
3. Public Directory: It will ask what you want to use as your public directory. Type build (or the name of your production folder).
4. Single-page App: Configure as a single-page app? Type y.
5. GitHub Deploys: Set up automatic builds and deploys with GitHub? Type n (unless you want to set this up now).
6. Overwrite index.html: If it asks to overwrite your existing index.html, type n.

Step 5: Deploy Your Website

Once initialization is complete, you are ready to push your files to the Google servers:

firebase deploy

Step 6: View Your Live Site

After the deployment finishes, Firebase will provide you with a Hosting URL (usually formatted as your-project-id.web.app). Click the link to see your website live!

If you want to add your custom domain to this website, you can follow the link Map custom domain to firebase hosting.