How to deploy your web application on Firebase Hosting

Firebase offers many services, including Firebase Hosting, which allows you to deploy your web application with ease and efficiency. In this shot, we will go through the steps for deploying a simple static HTML application on Firebase.

Create a new Firebase project

To create a new project:

  1. Open the Firebase console.

  2. Click “Add Project”.

  3. Enter a project name, e.g., “New Project,” and click “Continue”. If you are signed into Firebase using an organization’s account (e.g. me@educative.io), then it will ask you to select the parent source for your project (which would be “educative,” in this case).

  1. Enable Google Analytics for this project. As you can see, enabling Google Analytics enables a few extra features we can leverage at a later stage in development. Click “Continue.”
  2. Choose or create a Google Analytics account. When using an organization’s account, the following page will display some additional options like “Use the default settings for sharing Google Analytics data” and “I accept the Google Analytics terms.”
  3. Click “Create project.”

After a few moments, the Firebase project will be created! Click “Continue” to open the Firebase project overview.

Register your app with Firebase

Now, the Firebase project is ready to go. Next, we need to register our web application with Firebase. Let’s register our application:

  1. Select your newly created project on the Firebase console’s project overview page and click the Web icon (</>) to launch the setup workflow.
Firebase Console Project Overview Page
  1. Enter an app nickname (it is a required field). This is only visible internally in the Firebase console.
  2. Enable Firebase Hosting. This is a convenient way to register the application and enable Firebase Hosting at the same time.
  3. Click “Register App.”
Register App

Add the Firebase SDK

Firebase SDK

Now, we need to add these Firebase SDK scripts to our application. In this shot, I am going to deploy this example-firebase-app. We need to copy and paste the code snippets at the bottom of the <body> tag. For convenience, I have already added these in the index.html file.

Install Firebase CLI

Firebase command-line interface (CLI) is used to interact with the Firebase web application. We will use it to interact with our application. Install Firebase CLI by entering the following command in the terminal opened in the app root directory:

npm install -g firebase-tools

Deploy the web application

It’s time to deploy your web application. This requires the following simple steps:

  1. Open a terminal in the root directory of your app, and run the following command:

    firebase login

    Follow the instructions on the webpage to log in to Firebase, if you aren’t logged in already.

  2. In the same terminal, run the following command:

    firebase init

    The result will be an interactive interface to configure the Firebase CLI.

  3. When you’re asked which Firebase CLI features you want to set up, select the Hosting: “Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys”. Press Enter to confirm your selection.

Selecting Firebase Hosting feature
  1. Select “Use an existing project” for the next question, then choose the project we created in the Firebase web console earlier and confirm with Enter. If you’re new to Firebase, you will only see one option.
  2. Press Enter to the question, “What do you want to use as your public directory?” This will automatically create the public folder in your directory. Files inside the public folder will be deployed on the Firebase Hosting.
  3. Enter “N” when you’re asked, “Configure as a single-page app (rewrite all urls to /index.html)?” Entering “Y” attempts to override the index.html file.
  4. Enter Y to the question, “Set up automatic builds and deploys with GitHub?” Follow the URL opened and log in to your GitHub.
  5. Enter the GitHub repository name. In our case, it’s abdulmonum/example-firebase-app.
  6. Press Enter for the remaining questions and the Firebase initialization process should be completed. You’ll have the following output to your screen:
Firebase initialization process
  1. Make sure the index.html file in the public directory is the same as the one in the repository. If there is a default Firebase-created index.html file present, replace that with your index.html file.
  2. Now, deploying to Firebase hosting is a single command:
    firebase deploy
    You’ll have the following output on your terminal.
Deploy complete message

Congratulations! You have successfully deployed your first application on Firebase! Open the Hosting URL to view the website.

Deployed website

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved