Build a Serverless Web App with Firebase

Enabling & Creating Firestore

1. Open the Navigation menu and select APIs & Services → Library. Then search for “Firestore” in the search box and click Google Cloud Firestore API.
2. If not already enabled, click Enable. Your Console should resemble the following:
   
3. Now open the navigation menu and select Firestore.
4. You will be prompted to choose where you want to store your data. Click Select Native Mode:
   
5. Select nam5 (United States) for your location and then click Create Database.
6. After your database is initialized, you will be brought to a similar page:
   

Create a Firebase project

1. Open the Firebase console in a new tab of your browser .
2. Then click Add project.
3. Accept the Firebase terms and click Continue. Confirm the “Pay as you go” billing plan.
4. Click Continue and on the following page de-select the Google Analytics for your Firebase Project.
5. Then click Add Firebase. Click Continue when you see a prompt that says your new project is ready

Register your app

1. Select the web icon (highlighted below) from the list of “Get started by adding Firebase to your app” icons:
   
2. When prompted for an “App nickname”, type in Pet Theory.
3. Then check the box next to Set up Firebase hosting.
4. Click on the Register app button.
5. Click Next > Next > Continue to console.

Install the Firebase CLI and deploy to Firebase Hosting

1. In Cloud Shell, run the following command to clone the Pet Theory repository:

   git clone https://github.com/webmagicinformatica/Build-a-Serverless-Web-App-with-Firebase.git

2. Then change your current working directory:

   cd Build-a-Serverless-Web-App-with-Firebase

3. In Cloud Shell run the following npm command to create a new Node app and install the Firebase CLI, a command-line tool:

   npm init --yes
   npm install -g firebase-tools

4. Now run the following command to link your Google account with Firebase:

   firebase login --no-localhost

5. Enter in Y if asked if Firebase can collect error reporting information and press Enter.
6. Copy and paste the URL generated in a new browser tab and press Enter (directly clicking on the link results in an error).
7. Select your Google account and then click Allow. You will then be given an access code:
   
8. Copy the access code, paste it in the Cloud Shell prompt, and press Enter.
9. Run the following command to set your project region to us-central1 so that it matches up with your Firebase project’s resource location:

   gcloud config set compute/region us-central1

10. Now initialize a new Firebase project in your current working directory:

    firebase init

    Running this command will step you through setting up your project directory and Firebase products.

11. You will be asked to select the Firebase CLI features you want set up in this folder. Use the arrow keys and the spacebar to select Firestore and Hosting. Ensure your shell matches the following and then hit Enter:
    
12. Then run through the rest of the steps to configure Firebase:
    1. Key down to Use an existing project and press Enter.
    2. Select your Project ID from the list  then Enter.
    3. Press Enter and then N to keep your firestore.rules file.
    4. Press Enter and then Y to keep your firestore.indexes.json file.
    5. Press Enter to keep your public directory and then N to disallow rewrites to your /index.html file.
    6. Press Enter to Set up automatic builds and deploys with GitHub? and press N.
    7. Enter in N when prompted to overwrite your 404.html file.
    8. Enter in N when prompted to overwrite your index.html file.

Set up authentication and a database

1. Click on the Project Overview button in the left-hand navigation menu.
2. Select Authentication tile and then click on Get Started:
3. From the list of Sign-in Providers, click on the pencil icon next to the Google item.
4. Click the enable toggle in the top right corner and for the Project support email select your Google account from the drop down list. Your page should now resemble the following:
   
5. Once you have verified the above, click on the Save button.

Deploy your application

1. Now run the following command to deploy your firebase application:

   firebase deploy

2. Copy the hosting URL (should resemble [PROJECT-ID].web.app) and open it in a new tab. Now click on the Sign in with Google button
3. Select your Google account. You will be brought to the following page:
   
4. Go to the Firebase Console and click Firestore to view the profile information saved: