Firebase Hosting Tutorial

Learn how to deploy web applications to Firebase Hosting, a powerful service that provides fast and secure hosting for your websites.

Mar 8 2025

Watch on YouTube

Introduction to Firebase Hosting: A Beginner’s Guide

Welcome to your first steps in learning about Firebase Hosting! This educational resource will guide you through the fundamentals of deploying your web applications using Firebase Hosting, a powerful service offered by Firebase. Firebase Hosting provides a streamlined and efficient way to make your websites accessible to users worldwide.

What is Firebase? Understanding Backend-as-a-Service

Firebase is described as a Backend-as-a-Service (BaaS). This means it offers a comprehensive suite of tools and services that handle the server-side infrastructure and functionalities for your applications. Instead of managing your own servers, Firebase provides a ready-to-use platform, allowing you to focus on building the front-end and user experience of your web applications.

Backend-as-a-Service (BaaS): A cloud service model that provides developers with pre-built server-side functionalities, such as databases, user authentication, and hosting, eliminating the need to manage their own backend infrastructure.

Firebase offers a range of features, including:

Cloud File Store (Real-time NoSQL Database): Firebase provides a real-time, NoSQL database for storing and syncing data. This allows for dynamic and interactive web applications.
Cloud Functions: These enable you to run backend code in a serverless environment. You can write and deploy functions that execute in response to events triggered by Firebase features and HTTPS requests.
Authentication: Firebase simplifies user authentication, providing secure and easy-to-implement methods for managing user logins and access to your application.
Storage: Firebase offers cloud storage for files such as images, videos, and user-generated content.
Hosting: This is the focus of this guide. Firebase Hosting provides fast and secure hosting for your web applications.

Getting Started with Firebase Hosting

To begin utilizing Firebase Hosting, you will need to set up a Firebase account and project. Let’s walk through the initial steps.

1. Creating a Firebase Account

The first step is to sign up for a free Firebase account.

Navigate to firebase.google.com in your web browser.
If you are not already logged into a Google account, you will see a “Sign up” option in the top right corner. Click on it and follow the instructions to create a free account. If you already have a Google account, you may see a “Go to console” link directly.

2. Accessing the Firebase Console and Creating a Project

Once you have signed up or logged in, you will be directed to the Firebase Console. This is your central control panel for managing all your Firebase projects and services.

Firebase Console: A web-based interface provided by Firebase that allows users to manage their Firebase projects, services, and configurations.

In the Firebase Console, you will likely see a list of your existing Firebase projects (if any). If you are new to Firebase, this list might be empty.
To create a new project, click on the “Add project” button.
You will be prompted to enter a name for your project. Choose a descriptive name; for example, “firebase-hosting-project”.
Accept the Firebase terms and conditions.
Click “Create project”. Firebase will then set up your new project, which may take a few moments.
Once the project is created, click “Continue”. This will take you to the control panel specifically for your newly created project.

3. Navigating to the Hosting Section

Within your project’s control panel, you will see a sidebar on the left-hand side listing various Firebase services.

Locate and click on “Hosting” in the sidebar menu.
On the Hosting page, click the “Get started” button. This will initiate the setup process for Firebase Hosting in your project.

4. Installing the Firebase CLI (Command Line Interface)

The next step involves installing the Firebase CLI, also known as Firebase Tools, on your local computer. This is a command-line tool that allows you to interact with your Firebase projects directly from your terminal.

Firebase CLI (Command Line Interface) / Firebase Tools: A set of command-line tools provided by Firebase that enables developers to manage and deploy Firebase projects from their local machines.

To install the Firebase CLI, you will need Node.js and npm (Node Package Manager) installed on your system.

Node.js: A JavaScript runtime environment that allows you to execute JavaScript code outside of a web browser, commonly used for server-side development and tooling.

npm (Node Package Manager): A package manager for Node.js, used to install and manage JavaScript packages and libraries. It is included with Node.js installations.

Installing Node.js and npm

If you do not have Node.js installed, navigate to nodejs.org in your web browser.
Download the recommended version of Node.js for your operating system (usually the “LTS” version is suitable for most users).
Follow the installation instructions provided on the Node.js website. The installation process is typically straightforward.
Once installed, open your terminal (on macOS and Linux) or Command Prompt (CMD) on Windows.

Terminal/Command Prompt: A text-based interface that allows users to interact with their computer’s operating system by typing commands.

To verify that Node.js and npm are installed correctly, type the following commands in your terminal and press Enter after each:
- node -v
- npm -v
These commands should display the version number of Node.js and npm installed on your system, respectively. If you see version numbers, it means Node.js and npm are successfully installed.

Version Number: A unique identifier assigned to a specific release of software, indicating its stage of development and features.

Installing Firebase Tools using npm

With Node.js and npm installed, you can now install the Firebase CLI.

In your terminal, type the following command and press Enter:
```
npm install -g firebase-tools
```
- npm install: This is the npm command to install a package.
- -g: This flag stands for “global”. It installs the firebase-tools package globally on your system, making the firebase command accessible from any directory in your terminal.
- firebase-tools: This is the name of the package you are installing – the Firebase CLI.

Package: In software development, a package is a collection of modules, libraries, or tools bundled together for distribution and installation, typically managed by a package manager like npm.

npm will download and install the Firebase Tools package. This process might take a few minutes depending on your internet connection.
After the installation is complete, verify that Firebase Tools is installed correctly by typing the following command in your terminal and pressing Enter:
```
firebase --version
```
This command should display the version number of the Firebase CLI you have just installed.

Before you can deploy projects to Firebase, you need to log in to your Firebase account using the Firebase CLI.

In your terminal, type the following command and press Enter:
```
firebase login
```
This command will open a browser window or tab, prompting you to log in with your Google account (the same account you used to create your Firebase account).
Follow the on-screen instructions to complete the login process. You may be asked to grant Firebase CLI permissions to access your Firebase projects.
Once you have successfully logged in, you will see a confirmation message in your terminal indicating the email address associated with your logged-in Firebase account.

Next Steps in the Series

With Firebase Tools installed and logged in, you are now set up to begin deploying web applications to Firebase Hosting. In the subsequent parts of this series, you will learn how to:

Initialize a Firebase project locally using the CLI.
Deploy static HTML and CSS websites to Firebase Hosting.
Deploy Vue.js websites to Firebase Hosting.
Test your websites locally using a Firebase local development server before deploying.
Configure redirects and explore other advanced hosting options.

Tools Mentioned

VS Code (Visual Studio Code): A free and popular source code editor recommended for web development. It offers features like syntax highlighting, code completion, and integrated terminal. You can download it from code.visualstudio.com.
Emmet: A plugin for VS Code and other code editors that drastically speeds up HTML and CSS writing through abbreviations and shortcuts.

This introduction has provided you with the foundational knowledge and steps to get started with Firebase Hosting. You are now ready to move on to the next stages of deploying your web projects using Firebase.

Getting Started with Firebase Hosting: Setting Up Your Local Environment

This chapter guides you through the initial steps of setting up your local environment to deploy a website using Firebase Hosting. We will cover installing Firebase tools, initializing a Firebase project locally, and preparing your website files for deployment.

Prerequisites

Before you begin, ensure you have completed the following:

Created a Firebase Backend Project: You should have already set up a project on the Firebase platform. This backend project will be linked to your local development environment.
Installed Firebase Tools: Firebase tools should be installed globally on your computer. These tools are essential for interacting with Firebase services from your command line, including deploying your application.

Firebase tools: A suite of command-line utilities that allow developers to manage and deploy Firebase projects. They provide functionalities for hosting, functions, databases, and more, directly from your local machine.

With these prerequisites in place, you are ready to begin setting up your local environment for Firebase Hosting.

Project Setup and File Structure

For this tutorial, we are using a simple static website as an example. The structure of this project, as seen in Visual Studio Code (VS Code), consists of the following files:

index.html: The homepage of the website.
about.html: An “About Us” page.
styles.css: A stylesheet for basic website styling.

This project is designed to be straightforward to demonstrate the deployment process, and the specific HTML and CSS content is not the focus of this chapter.

Static website: A type of website that delivers pre-built HTML, CSS, and JavaScript files to the user’s browser, without server-side processing for each request. These websites are efficient for content that doesn’t change frequently.

Let’s examine the content of these files briefly:

index.html:
- Contains a simple HTML structure with:
  - An <h1> heading.
  - A navigation bar (<nav>) with links to index.html and about.html. The link to index.html has a class of “active” to indicate it’s the current page.
  - A <div> with the class “container” which holds an <article> element containing placeholder content.
about.html:
- Very similar to index.html, but with:
  - An “About Us” title in the <h1> heading.
  - The “active” class is applied to the “About” link in the navigation.
styles.css:
- Contains basic CSS rules to style the HTML elements. The details of the CSS are not crucial for this tutorial.

The key takeaway is that we have a basic website structure with HTML and CSS files. Your own website may have a different structure, potentially including JavaScript files, but the deployment process to Firebase Hosting will be similar.

Initializing a Firebase Project Locally

To prepare our local project for deployment to Firebase, we need to initialize a Firebase project within our project directory. This process links your local files to your Firebase backend project.

Open the Terminal: In VS Code, open the integrated terminal by navigating to “View” in the menu and selecting “Terminal”. This will open a command-line interface within your workspace.

Terminal: A text-based interface used to interact with your computer’s operating system. It allows you to execute commands, manage files, and run programs using text input.
Navigate to Your Project Directory: Ensure that the terminal is currently in your project’s root directory (in this case, the “Firebase hosting” directory). You can verify this by looking at the terminal prompt, which usually displays the current directory.

If you need to change directories, use the cd command:
- cd foldername: To change into a subdirectory named “foldername”.
- cd ..: To move up one directory level.
CD command: Short for “Change Directory,” a fundamental command in command-line interfaces used to navigate the file system.
Initialize Firebase: Once you are in the correct directory, run the following command to initialize a Firebase project:
```
firebase init
```
Initialize: To set up a new project or environment, often involving configuration and setup steps to prepare it for use. In this context, it means setting up a Firebase project within your local directory.
Proceed with Initialization: The Firebase CLI (Command Line Interface) will display a welcome message and ask: “Are you ready to proceed?” Type Yes and press Enter.
Select Firebase Services: You will be presented with a list of Firebase services to choose from. Use the arrow keys to navigate down to “Hosting: Configure and deploy Firebase Hosting sites” and press the spacebar to select it. An asterisk (*) will appear next to “Hosting” to indicate it’s selected. Then, press Enter to continue.

Firebase Hosting: A service provided by Firebase that allows you to quickly and easily deploy static and dynamic web content to a global content delivery network (CDN).
Link to Firebase Backend Project: Firebase will prompt you to “Select a default Firebase project for this directory:“. Since you previously logged in using firebase login, the CLI will list your Firebase projects. Choose the backend project you created earlier (e.g., “Firebase hosting ninja”) and press Enter. This links your local project to your remote Firebase project.

Backend project: In Firebase, this refers to the project you created in the Firebase console, which serves as the central management point for your Firebase services, configurations, and data.
Specify Public Directory: The next question is “What do you want to use as your public directory?“. This directory will contain all the files that will be deployed to Firebase Hosting. Accept the default suggestion “public” by pressing Enter.

Public directory: A designated folder within your project that Firebase Hosting uses as the root directory for your website’s files. Only the contents of this directory are deployed to Firebase servers.
Configure as Single-Page Application (SPA): You will be asked “Configure as a single-page app (rewrite all urls to index.html)?“. Crucially, select No for this option. Single-page application rewriting is designed for applications built with frameworks like React or Vue.js, where routing is handled client-side. For our simple multi-page website, we do not want this behavior. Selecting “Yes” would redirect all requests to index.html, breaking navigation to other pages like about.html. Press Enter to confirm “No”.

Single Page Application (SPA): A web application that loads a single HTML page and dynamically updates the content as the user interacts with it, typically without full page reloads. Frameworks like React, Angular, and Vue.js are commonly used to build SPAs. Rewrite URLs: In the context of Firebase Hosting, URL rewriting allows you to configure how Firebase handles requests for different URLs. For SPAs, it’s often used to direct all requests to the main index.html file, allowing the client-side application to handle routing.
Initialization Complete: Firebase will complete the initialization process. You will see a message indicating “Firebase initialization complete!“.

Understanding the Initialized Project Files

After successful initialization, you will notice a few new files and folders in your project directory:

firebase.json: This file contains configuration settings for your Firebase project, including hosting settings. We will explore this file in more detail later.

Firebase.json: A configuration file at the root of your Firebase project that defines settings for various Firebase services, including hosting, functions, and database rules. It dictates how Firebase tools interact with your project.
.firebaserc: This file stores project information, specifically linking your local project to your Firebase backend project.

.firebaserc: A configuration file in your Firebase project that stores project-specific settings, most importantly the project ID, which links your local project to your Firebase project on the Firebase platform.
.gitignore: This file is used by Git version control to specify intentionally untracked files that Git should ignore. Firebase CLI automatically creates this for common project files.

.gitignore: A text file in Git repositories that specifies intentionally untracked files that Git should ignore. This is commonly used to exclude build artifacts, temporary files, and sensitive information from being committed to version control.
public folder: This folder is created if it doesn’t already exist. It is designated as the public directory where your website’s files should reside. Firebase also places a default index.html and 404.html file inside this folder as placeholders.

404 page: An error page displayed to users when they try to access a URL that does not exist on the server. It’s a standard practice to provide a custom 404 page to improve user experience.

Preparing Website Files for Deployment

Now that the Firebase project is initialized, we need to move our website files ( index.html, about.html, styles.css) into the public folder.

Delete Default index.html: Open the public folder. You will see a default index.html file generated by Firebase. Delete this file as we will be using our own. You might also see a 404.html file, which is a default error page. You can keep or customize this page.
Move Website Files to public: Copy or move your index.html, about.html, and styles.css files into the public folder. After this step, all the files for your website should be inside the public folder.

Testing Locally with Firebase Serve

Before deploying to Firebase Hosting, it’s crucial to test your website locally to ensure everything is working as expected. Firebase tools provide a local development server for this purpose.

Start the Local Server: In your terminal, within your project directory, run the following command:
```
firebase serve
```
Firebase serve: A Firebase CLI command that starts a local development server, allowing you to preview your Firebase Hosting project in a web browser before deploying it to the live Firebase servers.
Access Your Website: Firebase CLI will output a local server address, usually http://localhost:5000. Open this address in your web browser (you can often Ctrl+Click or Cmd+Click the link in the terminal).

Localhost: Refers to your own computer acting as a server. When you access localhost in a browser, you are requesting content from a server running on your local machine. Port: A numerical identifier for a specific process or application running on a computer network. Port 5000 is a commonly used port for development servers.
Test Your Website: Your website should now be running locally in your browser. You can navigate between pages, test links, and verify that your website functions correctly.
Make and Test Changes: If you make any changes to your website files within the public folder, simply refresh your browser to see the updates reflected on the local server. This allows for rapid iteration and testing during development.

By using firebase serve, you can effectively preview your website locally, ensuring it behaves as intended before deploying it to Firebase Hosting for public access.

Next Steps

With your local environment set up and your website tested locally, you are now ready to deploy your website to Firebase Hosting. The next chapter will cover the deployment process, making your website live on the internet.

Deploying a Static Website to Firebase Hosting

This chapter will guide you through the process of deploying a static website to Firebase Hosting. We will cover the steps from preparing your local project to making your website live on the internet and managing different versions of your deployment.

Prerequisites

Before you begin, ensure you have completed the following:

Initialized a Firebase Project Locally: You should have already initialized a Firebase project on your local computer and set up the necessary Firebase tools. This typically involves using the Firebase CLI (Command Line Interface) to create a project and link it to your Firebase account.
Created a Public Folder: Within your local project directory, you should have a designated folder, commonly named “public,” containing all the files that constitute your website. This includes your index.html file, CSS stylesheets, JavaScript files, images, and any other static assets.
Previewed Locally with Firebase Serve: You should have used the firebase serve command to preview your website locally in a web browser. This step allows you to verify how your website will appear before deploying it to the live server.

Firebase:

Firebase is a comprehensive platform by Google for mobile and web application development. It provides a range of tools and services including databases, authentication, hosting, and cloud functions to help developers build, release, and manage their applications.

Deploying to Firebase Hosting

With your local project prepared and previewed, the next step is to deploy it to Firebase Hosting.

Firebase Hosting:

Firebase Hosting is a service provided by Firebase that allows you to host static and dynamic web content. It offers fast and secure global content delivery network (CDN) and is designed for single-page web apps, static websites, and mobile app landing pages.

Access Firebase Console: Navigate to the Firebase Console in your web browser and select the Firebase project you created for your website.

Firebase console:

The Firebase console is a web-based dashboard that provides a user interface for managing your Firebase projects and accessing various Firebase services. It allows you to configure project settings, monitor usage, and manage authentication, databases, hosting, and more.
Navigate to Hosting Section: In the left-hand menu of your Firebase project console, locate and click on the “Hosting” section.
Get Started with Hosting: If you haven’t used Firebase Hosting in this project before, you will likely see a “Get started” button. Click on this button to initiate the Hosting setup process.
Review Deployment Instructions: Firebase will present a series of steps for deployment. You should recognize that you have already completed the initial steps related to local setup and folder preparation. The crucial step now is the deployment command.
Execute the firebase deploy Command: Open your terminal or command prompt, navigate to the root directory of your Firebase project (the directory containing your firebase.json file), and execute the following command:
```
firebase deploy
```
Firebase deploy:

firebase deploy is a command in the Firebase CLI (Command Line Interface) that is used to deploy your application or website to Firebase services. When used in the context of Hosting, it uploads the contents of your specified public directory to Firebase Hosting servers, making your website live.

This command instructs the Firebase CLI to take the contents of your “public” folder and upload them to Firebase’s servers, making your website accessible online.

Public folder:

In the context of Firebase Hosting, the public folder is a designated directory within your local project that contains all the files you want to deploy to your website. Firebase Hosting will serve the content from this folder.
Monitor Deployment Progress: The terminal will display the progress of the deployment process. It will show files being uploaded and provide status updates.
Deployment Confirmation and URLs: Upon successful deployment, the terminal will display confirmation messages, including:
- Project Console URL: This URL links directly to your Firebase project’s console page.
- Hosting URL: This is the live URL of your deployed website. This is the address you can share to allow others to access your website.
URL (Uniform Resource Locator):

A URL, often referred to as a web address, is a unique identifier used to locate a resource on the internet. It specifies the protocol, domain name, and path to a specific page or file on a web server.

Verifying Deployment in Firebase Console

Refresh Firebase Hosting Dashboard: Go back to the Firebase Hosting section in your Firebase console and refresh the page.
Check Deployment Status: You should now see a panel indicating that a deployment has occurred. It will display information such as:
- Current Version: The version identifier of the latest deployment.
- Deployment Time: The timestamp indicating when the deployment was completed.
- Deployer: The Firebase user who initiated the deployment.
- File Count: The number of files deployed in the current version. This number might be slightly higher than the number of files you initially placed in your “public” folder, as Firebase might add additional supporting files.

Previewing Your Deployed Website

Access Hosting URL: Click on the “Hosting URL” provided in the terminal output or found in the Firebase Hosting dashboard.
View Live Website: Your website should now be live and accessible through the provided URL. It might take a minute or two for the changes to fully propagate across the internet. If you initially see a placeholder page provided by Firebase, wait briefly and refresh your browser.
Verify Content: Ensure that the content displayed on the live website matches the content you intended to deploy from your local “public” folder.

Managing Version History and Rollback

Firebase Hosting provides a version history feature, allowing you to track and manage different deployments of your website.

Version history:

Version history in Firebase Hosting refers to the record of all deployments made to your website. It allows you to track changes over time and provides the ability to revert to previous versions if needed.

Access Version History Settings: In the Firebase Hosting dashboard, locate and click on the three dots (more options) menu, typically associated with your current deployment version. Select “Version history settings.”
Configure Version Retention: You can configure how many previous versions Firebase Hosting should retain. By default, it might be set to retain only the latest version. To keep multiple versions, adjust the number of versions to retain (e.g., 4). This will allow you to view and potentially rollback to older deployments.
Making Changes and Redeploying: To update your website:
- Modify Local Files: Make the desired changes to the files within your “public” folder (e.g., edit CSS, update content in HTML files).
- Redeploy: Execute the firebase deploy command again from your terminal.
Viewing New Deployments: After redeploying, refresh the Firebase Hosting dashboard. You will see a new deployment entry with a new version identifier and timestamp. The “Hosting URL” will now point to the latest deployed version of your website.
Rolling Back to a Previous Version: To revert your website to a previous deployment:
- Locate Previous Version: In the version history section, find the version you wish to roll back to.
- Initiate Rollback: Click the three dots menu associated with the desired previous version and select “Rollback.”
- Confirm Rollback: Firebase will prompt you to confirm the rollback action. Confirm to proceed.
Rollback:

Rollback in the context of website deployment refers to the process of reverting your live website to a previously deployed version. This is useful for undoing unintended changes or resolving issues introduced in a recent update by restoring an older, stable version.
Verify Rollback: After initiating a rollback, refresh the Firebase Hosting dashboard. The “Current Version” will now reflect the version you rolled back to. Access your “Hosting URL” in a browser and hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to view the rolled-back version of your website. It might take a short time for the changes to propagate.
Deleting Versions: You can also delete older versions from the version history by clicking the three dots menu associated with a version and selecting “Delete version.” This helps manage storage and keeps the version history clean.

Conclusion

You have now successfully deployed a static website to Firebase Hosting. You have learned how to deploy your website, verify the deployment in the Firebase console, preview your live website, manage version history, and rollback to previous versions. Firebase Hosting provides a straightforward and efficient way to make your static websites accessible to the world. The next step could be to explore deploying more complex web applications, such as those built with frameworks like Vue.js, to Firebase Hosting.

Static site:

A static site is a type of website that is delivered to the user’s browser exactly as it is stored, without any server-side processing for each request. Static sites are typically built using HTML, CSS, and JavaScript and are known for their speed and simplicity.

Vue.js:

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It is known for its approachable learning curve, flexibility, and performance, making it a popular choice for front-end web development.

Front end:

In web development, the front end refers to the user-facing part of a website or application. It encompasses everything that users see and interact with directly in their web browser, and is typically built using HTML, CSS, and JavaScript.

Locally:

In the context of software development, “locally” refers to performing actions or running software on your personal computer or local machine, as opposed to a remote server or cloud environment.

Deploying Single Page Applications to Firebase Hosting

This chapter will guide you through the process of deploying a Single Page Application (SPA) to Firebase Hosting. Building upon the knowledge of deploying static websites, this chapter focuses on the specific configurations required for SPAs, often built with frameworks like React, Angular, or Vue.js. We will be using Vue.js for this demonstration, but the principles apply broadly to other SPA frameworks.

Introduction to Single Page Applications (SPAs)

Single Page Applications offer a dynamic and interactive user experience by loading a single HTML page and then dynamically updating the content using JavaScript. This approach contrasts with traditional websites where each page navigation typically requires a full page reload from the server.

Single Page Application (SPA): A web application that loads a single HTML page and dynamically updates the content as the user interacts with it, without requiring full page reloads. SPAs enhance user experience by providing faster navigation and a more fluid interaction.

Frameworks like React, Angular, and Vue.js simplify the development of SPAs by providing structure and tools for managing components, routing, and state.

React, Angular, Vue.js: Popular JavaScript frameworks and libraries used for building user interfaces and single-page applications. They provide tools and structures to manage application components, data, and routing efficiently.

For this demonstration, we are using Vue.js and have already created a project named “mario-code-club”.

Project Setup with Vue.js

The “mario-code-club” project was created using the Vue CLI (Command Line Interface) with the command vue create mario-code-club. This command generates a basic Vue.js project structure, often referred to as a boilerplate project.

Boilerplate project: A pre-built project structure that includes basic configurations and files, providing a starting point for development. It saves time by automating initial setup and providing a standard project organization.

This boilerplate includes folders and files necessary for a Vue.js application. For a deeper dive into Vue.js, you can explore dedicated tutorials, such as the free Vue.js for beginners series and in-depth Udemy courses mentioned in the video.

Routing in SPAs

SPAs utilize client-side routing to manage navigation within the application. In our Vue.js project, the router.js file defines the application’s routes.

Router: In the context of SPAs, a system that manages navigation between different views or components within the application without full page reloads. It handles URL changes and renders the corresponding content.

In this example, we have two routes configured:

Home Page: / (forward slash)
About Page: /about

The router is configured to use “history mode,” ensuring clean URLs without hash fragments.

History mode (in Router): A routing mode in SPAs that utilizes the browser’s history API to create clean URLs without hash fragments (#). This provides a more natural and user-friendly URL structure compared to hash-based routing.

How SPAs Serve Content

A key characteristic of SPAs is that they serve a single index.html file for all routes. When a user navigates to different URLs within the SPA, JavaScript intercepts the request and dynamically loads the appropriate component into the index.html page.

Component: A self-contained, reusable building block of a user interface in frameworks like React, Angular, and Vue.js. Components encapsulate HTML, CSS, and JavaScript logic to create modular and maintainable UI elements.

This behavior is crucial for understanding how Firebase Hosting needs to be configured for SPAs.

Initializing Firebase for SPA Deployment

To deploy our SPA to Firebase Hosting, we first need to initialize a Firebase project within our project directory.

Navigate to the Project Directory: Ensure your terminal is in the root directory of your Vue.js project (“mario-code-club” in this case).
Initialize Firebase: Run the command firebase init.

Firebase CLI (Command Line Interface): A tool provided by Firebase that allows developers to interact with Firebase services from the command line. It is used for project setup, deployment, and management tasks.

This command will initiate the Firebase setup process and ask a series of questions.

Firebase Initialization Steps

Let’s walk through the prompts during firebase init for SPA deployment:

“Are you ready to proceed?” Select “Yes”.
”Which Firebase features do you want to set up for this project?” Choose “Hosting: Configure and deploy Firebase Hosting sites”. You can navigate using the arrow keys and press Enter to select.
”Select a Firebase project to associate with this Firebase project.” Choose your existing Firebase project (in the transcript, “firebase-hosting-ninja” is used as an example). This will overwrite any previous deployments on that project.
”What do you want to use as your public directory?” This is a crucial step for SPAs. By default, Firebase suggests “public”. However, for Vue.js and many other SPA frameworks, the built application is typically placed in a dist folder. Therefore, enter dist as the public directory.

Public directory: The directory in your project that Firebase Hosting will deploy. It contains the static assets (HTML, CSS, JavaScript, images, etc.) that will be served to users.

Dist folder: Short for “distribution” folder, it is commonly used in web development to store the production-ready, built version of an application, often optimized and bundled for deployment.
”Configure as a single-page app (rewrite all URLs to /index.html)?” Select “Yes”. This is essential for SPA functionality. When set to “Yes”, Firebase Hosting will always serve the index.html file regardless of the requested URL path. This allows the client-side routing in your SPA to handle navigation.

This configuration ensures that even if a user requests a URL like /non-existent-page, Firebase Hosting will still serve index.html. The Vue.js application’s router will then handle displaying a 404 or appropriate content.

404 page: An error page displayed when a web server cannot find the requested resource. In the context of SPAs configured with Firebase Hosting, the 404 handling is typically managed within the SPA’s routing logic, not as a separate file in the dist folder.
Initialization is complete. Firebase CLI will create two configuration files: firebase.json and .firebaserc, along with a .gitignore file if one doesn’t already exist.

Building the Vue.js Application for Deployment

Before deploying, we need to build the Vue.js application. This process compiles and optimizes the application code and places the production-ready files into the dist folder.

Build the Application: Run the command npm run build.

npm run build: A command commonly used in JavaScript projects, particularly those using build tools like webpack or Vue CLI, to compile and optimize the application code for production. It typically bundles JavaScript files, optimizes assets, and places the output in a designated directory (like dist).

This command will take a few moments to complete. Once finished, the dist folder will contain:
- index.html: The main HTML file for the SPA.
- css folder: Containing the project’s CSS files.
- js folder: Containing the project’s JavaScript files and bundled application code.
- Other assets like images, if included in your project.

Previewing the Built Application Locally

Before deploying to Firebase Hosting, it’s good practice to preview the built application locally to ensure everything is working as expected.

Serve the Application Locally: Run the command firebase serve.

firebase serve: A Firebase CLI command that starts a local development server to emulate Firebase Hosting. It serves the files from your specified public directory (in this case, dist) allowing you to preview your application locally before deployment.

Firebase CLI will provide a local URL (usually http://localhost:5000) where you can access your application in a browser.
Test Navigation: Open the provided URL in your browser and test the navigation between routes (e.g., Home and About). Verify that the application is functioning correctly as an SPA, serving the same index.html while dynamically loading different components based on the URL.

Deploying to Firebase Hosting

Once you’ve previewed and confirmed that your application is working correctly locally, you can deploy it to Firebase Hosting.

Deploy to Firebase: Run the command firebase deploy.

firebase deploy: A Firebase CLI command that deploys your application to Firebase Hosting. It uploads the contents of your public directory to Firebase servers, making your website live on the internet.

This command will deploy the contents of your dist folder to your Firebase project.

Verifying Deployment

After the deployment is complete, Firebase CLI will provide a Hosting URL.

Access the Deployed Application: Open the Hosting URL in your browser.
Test Functionality: Verify that your SPA is live and functioning as expected on Firebase Hosting. Test navigation, and confirm that even for non-existent URLs, the index.html is served, and the client-side routing handles the display (or potential 404 logic within your SPA).

You can also check the Firebase console for your project to see the new deployment listed under the Hosting section.

Conclusion

This chapter has demonstrated how to deploy a Single Page Application, built with Vue.js, to Firebase Hosting. The key differences from deploying static websites lie in configuring the public directory to dist and crucially selecting “Yes” to “Configure as a single-page app (rewrite all URLs to /index.html)?“. This ensures Firebase Hosting correctly serves the index.html for all requests, enabling client-side routing to function as intended for your SPA.

The next steps in Firebase Hosting often involve exploring advanced configuration options and setting up redirects, which will be covered in subsequent learning materials.

Redirects: Rules that automatically forward users from one URL to another. In Firebase Hosting, redirects can be configured in the firebase.json file to manage URL changes, handle old links, or direct traffic to specific parts of your application.

Understanding Firebase Hosting Redirects

This chapter will guide you through setting up redirects in your Firebase Hosting application. Redirects are a powerful tool for managing website navigation, handling moved content, and improving user experience. We will explore how to configure redirects using the firebase.json file and understand the different types of redirects available.

Introduction to Firebase Hosting and `firebase.json`

Before diving into redirects, let’s briefly understand the context of Firebase Hosting and the firebase.json file. Firebase Hosting is a service provided by Firebase that allows you to quickly and easily deploy web applications and static content.

When you initialize Firebase in a project using the Firebase CLI (Command Line Interface), a firebase.json file is automatically generated in your project’s root directory. This file serves as the configuration file for your Firebase project, particularly for hosting settings.

Firebase CLI (Command Line Interface): A tool that allows developers to interact with Firebase services directly from their terminal. It is used for project setup, deployment, and management.

The transcript mentions initializing a Firebase project using firebase init. This command is the starting point for setting up Firebase features in your project.

Inside a newly initialized project, you will typically find these default files within the public folder: index.html, 404.html, and favicon.ico. These are the standard files that Firebase Hosting uses to serve your website.

The firebase.json file is crucial for configuring your hosting options. Let’s examine its structure and how to use it for setting up redirects.

Configuring Hosting Options in `firebase.json`

To configure hosting settings, you need to open the firebase.json file located in your project’s root directory. Within this file, you will find a hosting property. This section is where you define various hosting configurations, including redirects.

firebase.json: A configuration file used in Firebase projects to define settings for various Firebase services, including Hosting, Functions, and Storage. For Hosting, it specifies configurations like public directory, redirects, rewrites, and headers.

Initially, the hosting property in your firebase.json file might look something like this:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Let’s break down the properties shown above:

public: This property specifies the directory that contains the files to be deployed to Firebase Hosting. In this example, it is set to "public", meaning Firebase Hosting will serve files from the public folder in your project directory.

Public Directory: The folder in your project that contains all the static files (HTML, CSS, JavaScript, images, etc.) that you want to deploy to Firebase Hosting and make publicly accessible on the web.
ignore: This property is an array of glob patterns that specify files and directories that should not be deployed to Firebase Hosting. By default, it includes:
- "firebase.json": The configuration file itself is not deployed.
- "**/.*": Hidden files and directories (starting with a dot).
- "**/node_modules/**": The node_modules directory, which typically contains project dependencies and is not needed for deployment in many cases.
node_modules: A directory in Node.js projects that contains all the installed dependencies (libraries and packages) for the project. These are usually not deployed with static web applications.

Setting up Redirects

To implement redirects, you need to add a redirects property within the hosting property in your firebase.json file. The redirects property is an array, where each element represents a redirect rule. Each redirect rule is defined as an object with specific properties.

Here’s how you can add the redirects property and define redirect rules:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
      // Redirect rules will be defined here as objects
    ]
  }
}

Each redirect rule object requires three key properties: source, destination, and type.

source: This defines the URL path that will trigger the redirect. When a user tries to access this path, the redirect will be activated. It’s the original URL the user types in or clicks on.

Source: In the context of redirects, the original URL path that a user requests, which will trigger the redirect rule.
destination: This specifies the URL path where the user will be redirected to. It’s the new URL that the user will be sent to.

Destination: In the context of redirects, the target URL path where the user is redirected to when they access the source URL.
type: This property defines the type of redirect. Firebase Hosting supports two main types: 301 (Permanent Redirect) and 302 (Temporary Redirect).

Types of Redirects: 301 (Permanent) and 302 (Temporary)

There are two primary types of redirects you can configure:

301 Redirect (Permanent Redirect): A 301 redirect indicates that the requested resource has been permanently moved to a new location. Search engines and browsers will typically cache 301 redirects, meaning subsequent requests to the old URL will directly go to the new URL without checking with the server again. This is beneficial for SEO when content has permanently moved.

301 Redirect (Permanent Redirect): An HTTP status code indicating that a requested resource has been permanently moved to a new URL. Search engines update their indexes to reflect the new URL, and browsers often cache this redirect for efficiency.
302 Redirect (Temporary Redirect): A 302 redirect indicates that the requested resource has been temporarily moved to a new location. Search engines and browsers will not typically cache 302 redirects as they assume the redirect is temporary and the original URL might become valid again in the future. Use this for temporary changes, like during website maintenance or A/B testing.

302 Redirect (Temporary Redirect): An HTTP status code indicating that a requested resource has been temporarily moved to a new URL. Search engines and browsers typically do not cache this redirect, expecting the original URL to become valid again in the future.

Example Redirect Configurations

Let’s look at the example redirects configured in the transcript.

Example 1: 301 Permanent Redirect

{
  "source": "/about",
  "destination": "/",
  "type": 301
}

This configuration sets up a permanent (301) redirect. If a user tries to access /about, they will be permanently redirected to the root path /. This is useful if you have removed an “about” page and want users to be directed to the homepage instead.

Example 2: 302 Temporary Redirect

{
  "source": "/contact",
  "destination": "/",
  "type": 302
}

This configuration sets up a temporary (302) redirect. If a user tries to access /contact, they will be temporarily redirected to the root path /. This could be used if your contact page is temporarily unavailable, and you want to redirect users to the homepage in the meantime.

Deploying and Testing Redirects

After configuring your redirects in firebase.json, you need to deploy your application to Firebase Hosting for the changes to take effect. You can do this using the Firebase CLI command:

firebase deploy

Deploy: The process of uploading your web application files and configurations to Firebase Hosting servers, making your website live and accessible on the internet.

Once the deployment is complete, you can test your redirects by accessing the specified source URLs in your web browser.

Testing Steps:

Access the Source URL: In your browser, navigate to the source URL you configured in your firebase.json file (e.g., /about or /contact in our examples).
Observe the Redirection: You should be automatically redirected to the destination URL you specified (e.g., /).
Verify Redirect Type (Optional): You can use browser developer tools (Network tab) to inspect the HTTP status code of the redirect. A 301 redirect will show a “301 Moved Permanently” status, and a 302 redirect will show a “302 Found” or “302 Moved Temporarily” status.
Hard Refresh if Necessary: If you are testing immediately after deployment and you are not seeing the redirects working as expected, try performing a hard refresh in your browser. This clears the browser cache and ensures you are loading the latest version of your deployed application.

Hard Refresh: A browser action that forces the browser to bypass its cache and reload resources directly from the server. This is often necessary after deploying updates to a website to see the latest changes.

In the transcript example, after deploying the application with the configured redirects, accessing /about and /contact in the browser successfully redirected to the homepage, demonstrating the functionality of Firebase Hosting redirects. Accessing a non-redirected path, like /hello, resulted in Firebase’s default 404 error page, as expected when a resource is not found.

404 Page: A standard HTTP error page displayed by web servers when a user attempts to access a URL that does not exist on the server. It indicates that the requested resource was “Not Found.”

Conclusion

This chapter has provided a comprehensive guide to setting up redirects in Firebase Hosting. By understanding the firebase.json configuration, the different types of redirects (301 and 302), and the deployment process, you can effectively manage website navigation and improve user experience. Redirects are a valuable tool for website maintenance, URL structure changes, and guiding users to the correct content within your Firebase-hosted applications.

Firebase Hosting Tutorial

Introduction to Firebase Hosting: A Beginner’s Guide

What is Firebase? Understanding Backend-as-a-Service

Getting Started with Firebase Hosting

1. Creating a Firebase Account

2. Accessing the Firebase Console and Creating a Project

3. Navigating to the Hosting Section

4. Installing the Firebase CLI (Command Line Interface)

Installing Node.js and npm

Installing Firebase Tools using npm

5. Firebase Login

Next Steps in the Series

Tools Mentioned

Getting Started with Firebase Hosting: Setting Up Your Local Environment

Prerequisites

Project Setup and File Structure

Initializing a Firebase Project Locally

Understanding the Initialized Project Files

Preparing Website Files for Deployment

Testing Locally with Firebase Serve

Next Steps

Deploying a Static Website to Firebase Hosting

Prerequisites

Deploying to Firebase Hosting

Verifying Deployment in Firebase Console

Previewing Your Deployed Website

Managing Version History and Rollback

Conclusion

Deploying Single Page Applications to Firebase Hosting

Introduction to Single Page Applications (SPAs)

Project Setup with Vue.js

Routing in SPAs

How SPAs Serve Content

Initializing Firebase for SPA Deployment

Firebase Initialization Steps

Building the Vue.js Application for Deployment

Previewing the Built Application Locally

Deploying to Firebase Hosting

Verifying Deployment

Conclusion

Understanding Firebase Hosting Redirects

Introduction to Firebase Hosting and firebase.json

Configuring Hosting Options in firebase.json

Setting up Redirects

Types of Redirects: 301 (Permanent) and 302 (Temporary)

Example Redirect Configurations

Deploying and Testing Redirects

Conclusion

Introduction to Firebase Hosting and `firebase.json`

Configuring Hosting Options in `firebase.json`