Hosting a static website on Firebase

This page explains step by step how to configure, deploy and host a static website on Firebase. If you are new to Firebase, this is a good entry point to understand the basics of Firebase.

The guide presented on this page has been tested with the following versions:

Ubuntu 22.04 LTS
Node.js 18.16.0
npm 9.5.1
Firebase tools 11.28.0

We assume that Node.js and npm are already installed. In my case, I used Volta with which you can select a Node engine when switching between projects.

Create a Firebase project

The first thing to do is to create a Firebase account and project. Go to the Firebase home page and login with your Google account. Once logged, go to the Firebase console. In the console, select Add project to create a new project:

Give a name to your project, for this guide, the project name is firebase-static:

Note that a project ID is created (fir-static-87878). We'll need it later, but don't worry, it is easy to retreive the ID in the Firebase console.

In the next step, you can link your project to Google Analytics. If you need the analytics of you site, enable Google Analytics for your project.

Click on continue, you should reach the home of your project:

Once your Firebase project is created, Add an app to get started. For hosting a static website, select Web. A new window appears, enter the app name, select Firebase Hosting and select the ID of your project:

Step 2 Install Firebase

The next step must be done on your local machine to install the Firebase SDK. This tools are necessary to use Firebase tools like database or authentification. For this simple example of static hosting, this is not really usefull, but let follow the guide:

On your local machine, create a folder for your project.

For this tutorial, I created a public Github project. You can get the files for each step with the commit numbers (c19eeff)

Open a terminal an go to your new folder. Run the following command to install the Firebase package:

npm install firebase

This command should install Firebase packages in the sub-folder node_modules

Git commit 398cefb

On the next step, we will install the Firebase command line tools.

Step 3 Install Firebase CLI

The Firebase CLI (command line tools) are used to configure, test and deploy your static web site.

Run the following command in your terminal:

npm install -g firebase-tools

This command installs the Firebase tools globaly, so the content of your project folder should not change. To check that Firebase CLI tools are installed, check the version with the following command:

$ firebase tools --version
11.28.0

The command line tools are installed, let go to the next step.

Step 4 Deploy to Firebase Hosting

This last step is actually composed of several step.

Login to Firebase

First, you have to authenticate to Firebase, so your client can link your project to your Firebase account:

firebase login

The command line first ask you if you agree Firebase to collect reporting information. Answer Y (yes) or n (no).

Your browser should open a new tab and ask you to log in your Google account. Log in and accept authorizations.

Once this process is over, you should see a confirmation window in you browser:

The command line should also display something like:

Waiting for authentication...

✔  Success! Logged in as firstname.lastname@gmail.com

Note that this is the command line tools that are connected to your Google account. From now any Firebase command launched from the terminal will be linked to your Google account.

Initiate the projects

Run the following command from your project's root directory:

firebase init

The above command should display something like:

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/project/firebase-static

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

Use the key up/down to reach Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys. Select with space, and confirm with Enter.

Then, the tools ask you to select one of the following options:

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

Select Use an existing project and select your Firebase project:

 ? Select a default Firebase project for this directory: 
❯ fir-static-87878 (firebase-static)

Your project ID should appear in the list since the CLI tool is linked to your Firebase account. Select your project and press Enter.

Now, the interface ask you the name of your public directory:

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

This directory will be the root of your website. Any file placed in this folder will be deploy on the Firebase hosting. Enter your folder name or press Enter to set the default choice (public).

Then, it asks you if you want to create default files:

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

We will enter Yes to create the default index.html file.

It finally ask you if you want to deploy with Github, answer no if you are not sure.

? Set up automatic builds and deploys with GitHub? No

The Firebase tool should now create the new files and configure your project:

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

At the end, you should have a public folder and a new firebase.json file. The firebase.json file contains your Firebase configuration:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Git commit fd46fb7

Your local machine is ready, a default index.html file is created. Let's deploy.

Deploy

This last command will deploy the content of the public folder to the Firebase server:

firebase deploy

Something like this should appear in the console:

$ firebase deploy

=== Deploying to 'fir-static-87878'...

i  deploying hosting
i  hosting[fir-static-87878]: beginning deploy...
i  hosting[fir-static-87878]: found 1 files in public
✔  hosting[fir-static-87878]: file upload complete
i  hosting[fir-static-87878]: finalizing version...
✔  hosting[fir-static-87878]: version finalized
i  hosting[fir-static-87878]: releasing new version...
✔  hosting[fir-static-87878]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/fir-static-87878/overview
Hosting URL: https://fir-static-87878.web.app

The last line contains the link of your Firebase website. In this example, this is https://fir-static-87878.web.app/.

The following page should appear:

Create your website

In the public folder, you can create any webpages, subfolders, CSS and JavaScript files. For the example, I replaced the content of public/index.html with the following html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Static Hosting with Firebase</title>
  </head>
  <body>
    <h1>Static Hosting with Firebase</h1>
    <p>This page has been create with the guide from <a href="https://lucidar.me/en/firebase/host-a-static-website-on-firebase/">this page.</a></p>
  </body>
</html>

Each time you need to deploy, just run:

firebase deploy

Here is the result:

Git commit 969e1bc

Enjoy and be creative!