Add startup scripts and environment switching for FriendlyEats quickstart (#727)

* Add new scripts and new environmemt.prod.ts file

* Updated readme and package.json

* Readme Change

* Added more readme changes

* Small Changes

* Checking if projectID for prod

* Added checking for projectID in config file

* Changed name to projectConfig

* Added script to check if config has porject id

* Clean up after merge and modify README.md image

* Space in README

Author: ABradham

firestore/angular-rewrite/README.md

@@ -43,7 +43,7 @@ Follow these steps to setup and run the quickstart:
     ```bash
     npm start
     ```
- 1. Open [http://127.0.0.1:4200](http://127.0.0.1:4200) in your browser and try out the app!
+ 1. Open [http://localhost:4200](http://localhost:4200) in your browser and try out the app!
 
 ## Configure and run the app with the Firebase Console:
 
@@ -59,49 +59,38 @@ Follow these steps to have a working version of the quickstart running with the
 
  ![Photo of firebaseConfig object](images/CopyWebConfig.png)
 
- 3. With the `firebaseConfig` copied, navigate to `src/environments/environments.ts` and paste the contents of the object into the `prod` field:
+ 3. 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.ts` file with mock firebase web config info copied](images/environments-ts.png)
+ ![Photo of `environments.prod.ts` file with mock firebase web config info copied](images/environment-prod-ts.png)
 
- 4. On line 79 of `src/app/app.module.ts`, change your environment from `environments.local` to `environments.prod` in the `provideFirebaseApp` function call
-
- ![Photo of `environments.prod` selection in `src/app/app.module.ts`](images/ProdAppModule.png)
-
- 5. Back in the Firebase console, enable email and password authentication on your project by doing: **Authentication > SIGN-IN METHOD > Email > Email/Password > SAVE**
+ 4. 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](images/Enable-Email.png)
 
- 6. 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.
+ 5. 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](images/EnableFirestore.png)
 
- 7. Simmilarly, enable Cloud Storage on your project by clicking **Get Started** in the **Storage** section of the console and answering all prompts.
+ 6. 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](images/EnableStorage.png)
 
- 8. Set the CLI to use the project you created in Step 1:
+ 7. Set the CLI to use the project you created in Step 1:
 
  ```bash
  firebase --use add
  ```
 
- 9. Deploy the firebase security rules and indexes
-
- ```bash
- firebase deploy --only firestore
- ```
-
- > **Note:** If you've opted to set up a billing plan and wish to deploy functions as well, replace this command with simply `firebase deploy`.
-
- 10. Serve your Angular app and see it connect to the Firebase Console!
+ 8. Serve your Angular app and see it connect to the Firebase Console by opening [http://localhost:4200](http://localhost:4200) in your browser!
 
  ```bash
- ng serve
+ 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`.
 
  11. (Optional) Populate production Firestore with mock data
 
@@ -111,7 +100,7 @@ Follow these steps to have a working version of the quickstart running with the
  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.
+ > **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
 

firestore/angular-rewrite/angular.json

@@ -27,19 +27,18 @@
           },
           "configurations": {
             "production": {
-              "budgets": [
+              "fileReplacements": [
                 {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "replace": "src/environments/environment.default.ts",
+                  "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "outputHashing": "all"
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             },
             "development": {
               "buildOptimizer": false,
@@ -48,21 +47,29 @@
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
+            },
+            "local": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           },
-          "defaultConfiguration": "production"
+          "defaultConfiguration": "local"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
               "browserTarget": "friendly-eats-quickstart:build:production"
             },
-            "development": {
-              "browserTarget": "friendly-eats-quickstart:build:development"
+            "local":{
+              "browserTarget": "friendly-eats-quickstart:build:local"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "local"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

firestore/angular-rewrite/images/ProdAppModule.png

@@ -3,8 +3,12 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "(cd functions && npm run build) && firebase --project demo-friendly-eats emulators:exec --import ./imported-firebase-data 'ng serve'",
-    "populate-emulators": "cp src/environments/environment.ts scripts/environment.js && node scripts/PopulateFirestore.js",
+    "start": "npm run pre-build && firebase --project demo-friendly-eats emulators:exec --import ./imported-firebase-data 'ng serve'",
+    "emulators": "npm run pre-build && firebase --project demo-friendly-eats emulators:exec --import ./imported-firebase-data 'ng serve -c local'",
+    "production": "npm run pre-build && firebase deploy --only firestore && npm run check-config",
+    "check-config":"grep -q \"projectId\" \"src/environments/environment.prod.ts\" && ng serve -c production || echo \"No project id in configuration file!\"",
+    "pre-build": "(cd functions && npm run build)",
+    "populate-emulators": "cp src/environments/environment.default.ts scripts/environment.js && node scripts/PopulateFirestore.js",
     "populate-production": "cp src/environments/environment.prod.ts scripts/environment.js && node scripts/PopulateFirestore.js",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",

firestore/angular-rewrite/images/environment-prod-ts.png

@@ -30,7 +30,7 @@ import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
 import { provideFirestore, getFirestore } from '@angular/fire/firestore';
 import { provideFunctions, getFunctions } from '@angular/fire/functions';
 import { provideStorage, getStorage } from '@angular/fire/storage'
-import { projectConfig } from 'src/environments/environment';
+import { projectConfig } from '../environments/environment.default';
 import { HomepageComponent } from './homepage/homepage.component';
 import { RestuarantPageComponent } from './restuarant-page/restuarant-page.component';
 import { MatIconModule } from '@angular/material/icon';

firestore/angular-rewrite/images/environments-ts.png

@@ -16,11 +16,9 @@
 
 
 /**  If connecting to a live Firebase project (one that you set up in the 
- * Firebase console) put your config vars into the `prod` field object here
- * and change the `initializeApp` value in `app.module.ts` to `environment.prod`. 
+ * Firebase console) put your config vars into the `environment.prod.ts` file.
  * Otherwise, leave untouched to enable connection to demo project and emulators.
 */
-
 export const projectConfig = {
   projectId: 'demo-friendly-eats',
   apiKey: 'API_KEY_UNUSED'

firestore/angular-rewrite/package.json

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+*/
+
+
+/**  If connecting to a live Firebase project (one that you set up in the 
+ * Firebase console) put your config vars into the the object in this file.
+ * Otherwise, leave untouched to enable connection to demo project and emulators.
+ * For more information about generating, finding, or using project config
+ * objects, visit https://support.google.com/firebase/answer/7015592.
+*/
+export const projectConfig = {}