How do you upload your project to Firebase?

In this tutorial, we will show you how to host your project on Firebase and make it live. This step-by-step guide will walk you through the process of uploading your project to Firebase Hosting and taking it live. Hosting your project on Firebase is simple, and this tutorial will help you do it easily.

Step-by-step guide for uploading your project to Firebase Hosting using the Firebase CLI

Step 1: Install Firebase CLI

If you haven’t installed the Firebase CLI, run the following command to install it globally on your system:

Press Win + R, type cmd, and hit Enter to open the Command Prompt.

npm install -g firebase-tools

This will install the Firebase CLI globally.

Step 2: Log in to Firebase

Log in to your Firebase account:

Where to Run firebase login
You need to run this command in your terminal or command prompt, just like you did for installing the Firebase CLI.

firebase login

A browser window will open, asking you to log in to your Firebase account.
Log in using your Google account.


After successful login, return to the terminal. You’ll see a confirmation message like:

✔ Success! Logged in as [email protected]

Tip: You don’t need to navigate to your project folder for this step. You can run it from any directory.

Step 3: Navigate to Your Project Folder

Open a terminal and navigate to the folder containing your project:

cd path/to/your/project-folder

Step 4: Initialize Firebase Hosting

Run the Firebase initialization command:

firebase init

During the setup:

Select Hosting:
Choose Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.

Choose Project:
Select Use an existing project and pick your Firebase project from the list. Use the arrow keys to navigate and press Enter.

Set the Public Directory:
When prompted for the public directory, type public (or specify the folder containing your website files).
Example:

What do you want to use as your public directory? public

Single-Page App Configuration:
If you’re not using frameworks like React or Angular, choose No for this prompt:

Configure as a single-page app (rewrite all urls to /index.html)? No

Automatic Builds and Deploys:
Choose No for GitHub integration unless you want automatic deployment from GitHub.

Step 5: Deploy Your Project

Deploy your project to Firebase Hosting:

firebase deploy

After the deployment, Firebase will provide you with a live URL for your project, such as:

https://your-project-id.web.app

Step 6: Preview Before Deploying (Optional)

To test your project locally before deployment, use:

firebase serve

Updating Firebase Hosting After Changes

Whenever you make changes to your local files, redeploy your project using:

firebase deploy

This will overwrite the existing files on Firebase Hosting with your updated files.

Notes & Tips

  • Avoid Overwriting Files: If prompted to overwrite existing files during setup (e.g., public/index.html), choose No unless you want to replace them.
  • Custom Public Directory: If your website files are not in the public folder, specify the correct directory path during the firebase init step.
  • Using Frameworks: For single-page apps (e.g., React), answer Yes when asked about rewriting all URLs to /index.html.

Leave a Reply