Steps to publish a web page with Firebase Hosting (Mac)

Created: | Updated:

Intro.

I decided to publish my tech notes on the web; after doing some research, I opted to implement this using Firebase, as I was already using Google Workspace.

Firebase Hosting

Overall Workflow

  1. Install the Firebase CLI
  2. Log in to Firebase
  3. Initialize the Project
  4. Configure Hosting
  5. Deploy (Publish)

Install the Firebase CLI

The Firebase CLI can be installed using npm, but I chose to use the installation script provided by Firebase for Mac, which is more straightforward.

Firebase CLI Installation

myuser@my-Mac-mini ~ % curl -sL https://firebase.tools | bash
-- Checking for existing firebase-tools...
-- Checking your machine type...
-- Downloading binary from https://firebase.tools/bin/macos/latest
######################################################################## 100.0%
Password:
-- Setting permissions on binary... /usr/local/bin/firebase
-- Checking your PATH variable...
-- firebase-tools@15.14.0 is now installed
-- All Done!

myuser@my-Mac-mini ~ % firebase --version
15.14.0

Log in to Firebase

After installing the CLI, you must authenticate. Log into Firebase using your Google account by running the following command:


myuser@my-Mac-mini ~ % firebase login
i  The Firebase CLI’s MCP server feature can optionally make use of Gemini in Firebase. Learn more about Gemini in Firebase and how it uses your data: https://firebase.google.com/docs/gemini-in-firebase#how-gemini-in-firebase-uses-your-data
✔ Enable Gemini in Firebase features? No
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
✔ Allow Firebase to collect CLI and Emulator Suite usage and error reporting 
information? No
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=5635xxxxxx...
Waiting for authentication...
✔  Success! Logged in as myuser@mydomain.com

Initialize the Project

To host your web page on Firebase, you need to initialize your project using Firebase commands and create a configuration file named `firebase.json`.


myuser@my-Mac-mini my-web-page % firebase init
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
  /Users/myuser/my_projects/my-web-page
? Which Firebase features do you want to set up for this directory? Press Space to 
select features, then Enter to confirm your choices.
 ◯ Data Connect: Set up a Firebase Data Connect service
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Genkit: Setup a new Genkit project with Firebase
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ App Hosting: Set up deployments for full-stack web apps (supports server-side
rendering)
 ❯ ◯ Hosting: Set up deployments for static web apps
↑↓ navigate • space select • a all • i invert • ⏎ submit

=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
✔ Please select an option: Use an existing project
? Select a default Firebase project for this directory:
❯ my-web-page (my-web-page)

Once your project is initialized, you can serve it locally to test it for testing purposes. Run the following command to start a local server:


myuser@my-Mac-mini my-web-page % firebase serve --only hosting
i  hosting[my-web-page]: Serving hosting files from: public
✔  hosting[my-web-page]: Local server: http://localhost:5002

Deploy (Publish)

To deploy your web page to Firebase, run the following command:


myuser@my-Mac-mini my-web-page % firebase deploy
=== Deploying to 'my-web-page'...
i  deploying hosting
i  hosting[my-web-page]: beginning deploy...
i  hosting[my-web-page]: found 1 files in public
✔  hosting[my-web-page]: file upload complete
i  hosting[my-web-page]: finalizing version...
✔  hosting[my-web-page]: version finalized
i  hosting[my-web-page]: releasing new version...
✔  hosting[my-web-page]: release complete
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/my-web-page/overview
Hosting URL: https://my-web-page.web.app