AngularFire web codelab

1. Overview

In this codelab, you'll learn how to use AngularFire to create web applications by implementing and deploying a chat client using Firebase products and services.

What you'll learn

• Build a web app using Angular and Firebase.
• Sync data using Cloud Firestore and Cloud Storage for Firebase.
• Authenticate your users using Firebase Authentication.
• Deploy your web app on Firebase App Hosting.
• Send notifications with Firebase Cloud Messaging.
• Collect your web app's performance data.

What you'll need

• A GitHub account
• The ability to upgrade your Firebase project to the Blaze pricing plan
• The IDE/text editor of your choice, such as WebStorm, Sublime, or VS Code
• The package manager npm, which typically comes with Node.js
• A terminal/console
• A browser of your choice, such as Chrome
• The codelab's sample code (See the next step of the codelab for how to get the code.)

2. Get the sample code

Create a GitHub repository

The codelab source can be found at https://github.com/firebase/codelab-friendlychat-web. The repository contains sample projects for multiple platforms. However, this codelab uses only the angularfire-start directory.

Copy the angularfire-start folder into your own repository:

1. Using a terminal, create a new folder on your computer and change into the new directory:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. Use the giget npm package to fetch only the angularfire-start folder:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. Track changes locally with git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. Create a new GitHub repository: https://github.com/new. Name it anything you'd like.
   1. GitHub will give you a new repository URL that looks like either https://github.com/[user-name]/[repository-name].git or git@github.com:[user-name]/[repository-name].git. Copy this URL.
5. Push local changes to your new GitHub repository. Run the following command, substituting your repository URL for the your-repository-url placeholder.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. You should now see the starter code in your GitHub repository.

3. Create and set up a Firebase project

Create a Firebase project

1. Sign into the Firebase console using your Google Account.
2. Click the button to create a new project, and then enter a project name (for example, FriendlyChat).
   
3. Click Continue.
4. If prompted, review and accept the Firebase terms, and then click Continue.
5. (Optional) Enable AI assistance in the Firebase console (called "Gemini in Firebase").
6. For this codelab, you do not need Google Analytics, so toggle off the Google Analytics option.
7. Click Create project, wait for your project to provision, and then click Continue.

Upgrade your Firebase pricing plan

To use Firebase App Hosting and Cloud Storage for Firebase, your Firebase project needs to be on the pay-as-you go (Blaze) pricing plan, which means it's linked to a Cloud Billing account.

• A Cloud Billing account requires a payment method, like a credit card.
• If you're new to Firebase and Google Cloud, check if you're eligible for a $300 credit and a Free Trial Cloud Billing account.
• If you're doing this codelab as part of an event, ask your organizer if there are any Cloud credits available.

To upgrade your project to the Blaze plan, follow these steps:

1. In the Firebase console, select to upgrade your plan.
2. Select the Blaze plan. Follow the on-screen instructions to link a Cloud Billing account to your project.
   If you needed to create a Cloud Billing account as part of this upgrade, you might need to navigate back to the upgrade flow in the Firebase console to complete the upgrade.

Add a Firebase web app to the project

1. Click the web icon to create a new Firebase web app.
2. Register the app with the nickname Friendly Chat. Don't check the box next to Also set up Firebase Hosting for this app. Click Register app.
3. On the next step, you'll see a configuration object. You don't need it right now. Click Continue to console.

Set up Firebase products

The application that you're going to build uses Firebase products that are available for web apps:

• Firebase Authentication to easily allow your users to sign into your app.
• Cloud Firestore to save structured data on the cloud and get instant notification when data changes.
• Cloud Storage for Firebase to save files in the cloud.
• Firebase App Hosting to build, host, and serve the app.
• Firebase Cloud Messaging to send push notifications and display browser popup notifications.
• Firebase Performance Monitoring to collect user performance data for your app.

Some of these products need special configuration or need to be enabled using the Firebase console.

Set up Authentication

To allow users to sign in to the web app with their Google accounts, you'll use the Google sign-in method.

1. In the Firebase console, navigate to Authentication.
2. Click Get started.
3. In the Additional providers column, click Google > Enable.
4. In the Public-facing name for project text box, enter a memorable name, such as My Next.js app.
5. From the Support email for project drop-down, select your email address.
6. Click Save.

Set up Cloud Firestore

The web app uses Cloud Firestore to save chat messages and receive new chat messages.

Here's how to set up Cloud Firestore in your Firebase project:

1. In the left-panel of the Firebase console, expand Build and then select Firestore database.
2. Click Create database.
3. Leave the Database ID set to (default).
4. Select a location for your database, then click Next.
   For a real app, you want to choose a location that's close to your users.
5. Click Start in test mode. Read the disclaimer about the security rules.
   Later in this codelab, you'll add Security Rules to secure your data. Do not distribute or expose an app publicly without adding Security Rules for your database.
6. Click Create.

Set up Cloud Storage for Firebase

The web app uses Cloud Storage for Firebase to store, upload, and share pictures.

Here's how to set up Cloud Storage for Firebase in your Firebase project:

1. In the left-panel of the Firebase console, expand Build and then select Storage.
2. Click Get started.
3. Select a location for your default Storage bucket.
   Buckets in US-WEST1, US-CENTRAL1, and US-EAST1 can take advantage of the "Always Free" tier for Google Cloud Storage. Buckets in all other locations follow Google Cloud Storage pricing and usage.
4. Click Start in test mode. Read the disclaimer about the security rules.
   Later in this codelab, you'll add security rules to secure your data. Do not distribute or expose an app publicly without adding Security Rules for your Storage bucket.
5. Click Create.

4. Install the Firebase command-line interface

The Firebase command-line interface (CLI) allows you to use Firebase Hosting to serve your web app locally, as well as to deploy your web app to your Firebase project.

1. Install the CLI by running the following npm command:

npm -g install firebase-tools@latest

2. Verify that the CLI has been installed correctly by running the following command:

firebase --version

Make sure that the version of the Firebase CLI is v13.9.0 or later.

3. Authorize the Firebase CLI by running the following command:

firebase login

You've set up the web app template to pull your app's configuration for Firebase Hosting from your app's local directory (the repository that you cloned earlier in the codelab). But to pull the configuration, you need to associate your app with your Firebase project.

4. Make sure that your command line is accessing your app's local angularfire-start directory.
5. Associate your app with your Firebase project by running the following command:

firebase use --add

6. When prompted, select your Project ID, then give your Firebase project an alias.

An alias is useful if you have multiple environments (production, staging, etc). However, for this codelab, let's just use the alias of default.

7. Follow the remaining instructions on your command line.

5. Install AngularFire

Before running the project, make sure you have the Angular CLI and AngularFire set up.

1. In a console, run the following command:

npm install -g @angular/cli

2. Then, in a console from the angularfire-start directory, run the following Angular CLI command:

ng add @angular/fire

This will install all the necessary dependencies for your project.

3. When prompted, uncheck ng deploy -- hosting with the space bar. Select the following features with the arrow keys and space bar:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Press enter and follow the remaining prompts.
5. Create a commit with commit message "Install AngularFire" and push it to your GitHub repository.

6. Create an App Hosting backend

In this section, you'll set up an App Hosting backend to watch a branch on your git repository.

By the end of this section, you'll have an App Hosting backend connected to your repository in GitHub that will automatically re-build and rollout a new version of your app whenever you push a new commit to your main branch.

1. Navigate to the App Hosting page in the Firebase console:

2. Click "Get started" to start the backend creation flow. Configure your backend as follows:
3. Follow the prompts in the first step to connect the GitHub repository you created earlier.
4. Set deployment settings:
   1. Keep the root directory as /
   2. Set the live branch to main
   3. Enable automatic rollouts
5. Name your backend friendlychat-codelab.
6. In "Create or associate a Firebase web app", pick the web app you configured earlier from the "Select an existing Firebase web app" drop down.
7. Click "Finish and deploy". After a moment, you'll be taken to a new page where you can see the status of your new App Hosting backend!
8. Once your rollout completes, click your free domain under "domains". This may take a few minutes to begin working due to DNS propagation.

You've deployed the initial web app! Every time you push a new commit to the main branch of your GitHub repository, you'll see a new build and rollout begin in the Firebase console, and your site will automatically update once the rollout completes.

You should see your FriendlyChat app's sign-in screen, which is not (yet!) functioning.