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
Before following the steps to build and run this quickstart you will need:
Follow these steps to setup and run the quickstart:
-
Install the Angular CLI if you do not already have it installed on your machine:
npm install -g @angular/cli
-
Install the Firebase CLI if you do not have it installed on your machine:
npm -g i firebase-tools
-
Install and build all project dependencies
npm install && (cd functions && npm install)
Note: When modifying the contents of
functions/src
, be sure to runnpm run build
in thefunctions/
directory so that Typescript changes can be compiled and present in the next emulator run. -
Run and serve the project locally:
npm start
-
Open http://localhost:4200 in your browser and try out the app!
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-updatingavgRating
field for restaurants, is conserved.
-
Create a new Firebase project in the Firebase Console
-
On the project homepage, select
Web
underGet Started By Adding Firebase To Your App
and follow prompts to create your app, making sure to copy thefirebaseConfig
object when presented.
- With the
firebaseConfig
copied, navigate tosrc/environments/environments.prod.ts
and paste the contents of the object into theenvironment
object:
- Back in the Firebase console, enable email and password authentication on your project by doing: Authentication > SIGN-IN METHOD > Email > Email/Password > SAVE
- 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"
- 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"
- Set the CLI to use the project you created in Step 1:
firebase --use add
- 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 ofpackage.json
withfirebase deploy
.
- (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.
© Google, 2023. Licensed under an Apache-2 license.