Skip to content

Latest commit

 

History

History
111 lines (68 loc) · 5.9 KB

README.md

File metadata and controls

111 lines (68 loc) · 5.9 KB
Raw

Firestore Quickstart: Friendly Eats

Photo of the FriendlyEats Homepage

Introduction

FriendlyEats is a restaurant recommendation app built on Firestore. It was built with the Angular Javascript framework, and can make use of Firebase's Local Emulator Suite (specifically, the Authentication, Storage, Functions, and Firestore emulators) so that the quickstart can be run without needing to create a project in the Firebase Console.

For more information about Firestore visit the Firestore docs.

For more information about the Firebase Emulator Suite visit the Emulator Suite docs

Prerequisites

Before following the steps to build and run this quickstart you will need:

  1. Node.Js Version 16.0 or higher
  2. Java JDK version 11 or higher.

Configure and run the app locally with emulators:

Follow these steps to setup and run the quickstart:

  1. Install the Angular CLI if you do not already have it installed on your machine:

    npm install -g @angular/cli

  2. Install the Firebase CLI if you do not have it installed on your machine:

    npm -g i firebase-tools

  3. Install and build all project dependencies

    npm install && (cd functions && npm install)

    Note: When modifying the contents of functions/src, be sure to run npm run build in the functions/ directory so that Typescript changes can be compiled and present in the next emulator run.

  4. Run and serve the project locally:

    npm start

  5. Open http://localhost:4200 in your browser and try out the app!

Configure and run the app with the Firebase Console:

Follow these steps to have a working version of the quickstart running with the Firebase console:

Note: In the original application (that runs on the emulators), there is a Firebase Function that updates the avgRating field of a restaurant whenever that restaurant recieves a review. While Authentication, Storage, and Firestore are offered as free services through the Firebase console, using Firebase Functions on the Firebase Console requires a billing plan. There is a free tier billing plan that allows up to 2 million free function calls per month, but enabling this plan requires presenting payment information to Firebase. The following instructions, therefore, exclude those steps needed to deploy and host functions on the Firebase Console. All application functionality, other than the auto-updating avgRating field for restaurants, is conserved.

  1. Create a new Firebase project in the Firebase Console

  2. On the project homepage, select Web under Get Started By Adding Firebase To Your App and follow prompts to create your app, making sure to copy the firebaseConfig object when presented.

Photo of Firebase Project Homepage

Photo of firebaseConfig object

  1. With the firebaseConfig copied, navigate to src/environments/environments.prod.ts and paste the contents of the object into the environment object:

Photo of environments.prod.ts file with mock firebase web config info copied

  1. Back in the Firebase console, enable email and password authentication on your project by doing: Authentication > SIGN-IN METHOD > Email > Email/Password > SAVE

Photo of the enable email/password screen on Firebase Authentication page

  1. In the Firebase console, enable Firestore on your project by clicking Create Database in the Cloud Firestore section of the console and answering all prompts.
  • When prompted, select "Start in Test Mode"

Photo of Firebase Firestore Setup

  1. Simmilarly, enable Cloud Storage on your project by clicking Get Started in the Storage section of the console and answering all prompts.
  • When prompted, select "Start in Test Mode"

Photo of Firebase Storage Setup

  1. Set the CLI to use the project you created in Step 1:
firebase --use add
  1. Serve your Angular app and see it connect to the Firebase Console by opening http://localhost:4200 in your browser!
npm run production

Note: If you've opted to set up a billing plan and wish to deploy functions as well, replace the firebase deploy --only firestore on line 8 of package.json with firebase deploy.

  1. (Optional) Populate production Firestore with mock data

Now that the application is live on the Firebase console, you likely want to add some data to your production Firestore database so that you can see the application in action. Rather than manually adding restaurants and reviews, a convenice script is available to populate your production Firestore database. Run the following command (defined in the Firestore/ directory's package.json) to add mock data:

npm run populate-production

Note: To ensure that the script runs as intended, make sure that you have correctly populated the environemnt.prod.ts file with your Firebase credentials.

Support

License

© Google, 2023. Licensed under an Apache-2 license.