How to Host a Project on Firebase Hosting

Step 1: Install Firebase CLI

• Open your terminal and install Firebase CLI globally:

npm install -g firebase-tools

• Verify the installation:

firebase --version

Step 2: Log in to Firebase

• Log in to your Firebase account:

1. firebase login

Follow the instructions in your browser to complete the authentication.

Step 3: Initialize Firebase Hosting
Navigate to your project folder:

cd your-project-folder

Initialize Firebase Hosting:

firebase init

• Follow the prompts:

1. Select Features: Use arrow keys to select Hosting: Configure files for Firebase Hosting (press space to select, then press enter).
2. Select Project: Choose an existing Firebase project or create a new one.
3. Public Directory: Enter the folder containing your built files (e.g., dist or build).
4. Single-Page App: Choose Yes for "Configure as a single-page app."
5. Overwrite Files: Choose No if it asks to overwrite index.html. Step 4: Build Your Project If your project requires building (e.g., React or Vue), run:

npm run build

Ensure the output folder (e.g., dist or build) contains the production-ready files.
**
Step 5: Deploy Your Project**
Deploy the project to Firebase Hosting:

firebase deploy

• Once deployed, Firebase will provide a live URL for your project. Step 6: Update and Redeploy

Make changes to your project locally.
Build your project again:

**

npm run build

**

• Deploy the updated project:

firebase deploy

Step 7: Debugging Common Issues

Incorrect Public Directory: Ensure the folder specified during initialization contains your index.html.
Cache Issues: Clear your browser cache and hard reload the page.
Error Logs: Check deployment logs in the terminal for debugging.
Congratulations! Your project is now live on Firebase Hosting. 🎉