If you’re new to Firebase Hosting and want a simple, clear walkthrough, this guide will help you set up your first hosted project with confidence. While Firebase documentation is already excellent, beginners often need a single, easy-to-follow resource—so this article breaks everything down step by step, from initialization to deployment.

Before we begin, ensure that Node.js is installed on your machine, as it’s required for the Firebase CLI.

What You Need Before Using Firebase Hosting

• Node.js installed
• Firebase CLI
• A Firebase project
• A folder containing your website files (e.g., index.html)

Login to Firebase CLI using:

firebase login

Once authenticated, you’re ready to continue.

Understanding Firebase Hosting

Firebase Hosting allows developers to deploy static websites, web apps, and assets to the cloud with ease. It’s ideal for HTML, CSS, JavaScript projects, and front-end frameworks.

This guide covers:

1. Firebase Initialization
2. Local Testing
3. Deployment

Let’s walk through each part.

1. Firebase Initialization

Start by preparing the folder containing your project. For most setups, Firebase uses a directory named public, which contains your index.html file. During initialization, Firebase will ask you to confirm or change this directory name.

Steps to Initialize Firebase Hosting

1. Navigate to your project folder (example: DemoHosting).
2. Inside it, create a public folder and place your index.html file there.
3. Open your terminal and run:

firebase init

What Happens Next

You’ll see Firebase’s welcome screen with a prompt asking whether to continue—type y and press Enter.

Select Firebase Hosting

Use:

• Arrow keys → move selection
• Space bar → select Hosting
• Enter → confirm

Choose Your Firebase Project

You can:

• Use an existing Firebase project
• Create a new one
• Select a project from Google Cloud Platform

Pick the appropriate option and press Enter.

Set the Public Directory

Firebase will ask:

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

Type your folder name or accept the default public by pressing Enter.

Single-Page App Option

Firebase asks if your project is a SPA.

• Press Enter to accept the default (Yes).

Overwrite Existing index.html?

If you already have your own HTML file, type n to prevent Firebase from replacing it.

Initialization is now complete!

2. Testing Your Firebase Hosting Setup Locally

Before deploying your site, test it on your local server using:

firebase serve

Firebase will make your site available at:

http://localhost:5000

Open this URL in your browser to verify your website works as expected.
To stop the server, press Ctrl + C.

3. Deploying Your Project to Firebase Hosting

Once you’re satisfied with the local preview, deploy your project with:

firebase deploy

Firebase will process your hosting setup and generate a public hosting URL. Opening that link in your browser shows your live hosted website.

Congratulations! You’ve successfully deployed your site using Firebase Hosting.

Important Notes About Firebase Hosting

• Firebase Hosting cannot run server-side languages such as PHP, Python, or Java.
• For backend needs, you must use Google App Engine, Cloud Functions, or other server-side platforms.
• Firebase Hosting is best suited for:
  • HTML5 websites
  • JavaScript web apps
  • SPA frameworks (React, Angular, Vue, etc.)
  • Static assets

Final Thoughts

This tutorial covers the core steps for getting started with Firebase Hosting, from initialization to deployment. With just a few simple commands, you can host your project online quickly and efficiently.