Introduction

In this tutorial, you will learn how to use Firebase Hosting to host your web applications. Firebase Hosting provides fast and secure web hosting for your static and dynamic content. At the end of this tutorial, you will have a live web app that is deployed on Firebase Hosting.

Learning Outcomes:
- Initialize a Firebase project
- Deploy a web app to Firebase Hosting
- View your live web app on Firebase Hosting

Prerequisites:
- Basic understanding of web development (HTML, CSS, JavaScript)
- Node.js and npm installed on your local development machine
- A Firebase account

Step-by-Step Guide

1. Install Firebase CLI

Firebase CLI (Command Line Interface) allows you to interact with Firebase from your terminal. Install it by running the following command in your terminal:

npm install -g firebase-tools

2. Login to Firebase

After installing the Firebase CLI, you need to log in to your Firebase account. In your terminal, run:

firebase login

A browser window will open for you to log in to your Firebase account. After login, return to the terminal.

3. Initialize Your Firebase Project

Navigate to your project's directory and run:

firebase init

Follow the prompts. Select 'Hosting', then choose an existing project or create a new one. For the public directory, input the directory that holds your web app's production build (usually build, public, or dist).

4. Deploy Your Web App

After initializing your Firebase project, you can deploy your app with:

firebase deploy

Your web app is now live on Firebase Hosting!

Code Examples

Code Example 1: Initialize Firebase Project

cd my-web-app # Navigate to your project directory
firebase init # Initialize your Firebase project

• cd my-web-app changes your current directory to your project directory.
• firebase init initializes your Firebase project.

Code Example 2: Deploy Your Web App

firebase deploy # Deploy your web app

• firebase deploy deploys your web app.

Summary

In this tutorial, we have covered how to initialize a Firebase project, deploy a web app to Firebase Hosting, and view your live web app. Keep practicing by deploying different web apps or explore more Firebase features.

Practice Exercises

Exercise 1: Initialize and deploy a simple "Hello World" web app.
Solution 1: Create a new directory, initialize a Firebase project, create an index.html file with "Hello World", and deploy it.

Exercise 2: Deploy a web app that includes CSS and JavaScript files.
Solution 2: Create a new directory, initialize a Firebase project, create index.html, styles.css, and script.js files, and deploy it.

Exercise 3: Update your deployed web app.
Solution 3: Make changes to your web app, then run firebase deploy again to update it.

Remember, practice is key when learning new tools and technologies. Happy coding!