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:

firebas…


This content originally appeared on DEV Community and was authored by Md Sana ullah

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. 🎉


This content originally appeared on DEV Community and was authored by Md Sana ullah


Print Share Comment Cite Upload Translate Updates
APA

Md Sana ullah | Sciencx (2025-01-10T18:08:20+00:00) How to Host a Project on Firebase Hosting. Retrieved from https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/

MLA
" » How to Host a Project on Firebase Hosting." Md Sana ullah | Sciencx - Friday January 10, 2025, https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/
HARVARD
Md Sana ullah | Sciencx Friday January 10, 2025 » How to Host a Project on Firebase Hosting., viewed ,<https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/>
VANCOUVER
Md Sana ullah | Sciencx - » How to Host a Project on Firebase Hosting. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/
CHICAGO
" » How to Host a Project on Firebase Hosting." Md Sana ullah | Sciencx - Accessed . https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/
IEEE
" » How to Host a Project on Firebase Hosting." Md Sana ullah | Sciencx [Online]. Available: https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/. [Accessed: ]
rf:citation
» How to Host a Project on Firebase Hosting | Md Sana ullah | Sciencx | https://www.scien.cx/2025/01/10/how-to-host-a-project-on-firebase-hosting/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.