Customising the Firestore Quickstart

Customising the Firestore Quickstart and making it use the Firebase Local Emulator Suite

Previously, we set up a Mac as a development environment for a mobile app built with FlutterFlow and Firebase and copied the FriendlyEats' Firestore quickstart web app which had most of the required functionality to be the start point for a web admin app for our mobile app data.

TL:DR — This article focus was on the modifications being made to the quickstart to try to turn it into a working admin app for the Firestore database for my FlutterFlow mobile app. In the end I didn't pursue this approach.

Customising the Quickstart into a new project

FriendlyEats is written in Javascript, with the Material Design Components and Firebase. Its quite daunting especially for me as a newbie to all these things at this level. Nevertheless it has much of the functionality needed so its a better start point than a blank sheet of paper. Modifying it is an opportunity to learn how it works although you probably dont need to go as far as I have done I felt that all the 'FriendlyEats' specific language needed to be changed to reflect my new purpose for this app.

Lets get into it.

License

FriendlyEats is licensed under the Apache License 2.0. You can modify it and use the resulting code in commercial work provided you comply with the licence as noted in their GitHub license document.

Scripts

There are four Javascript scripts that control the app. FriendlyEats.Data.js, FriendlyEats.View.js, FriendlyEats.Mock.js, and FriendlyEats.js, theres some CSS, a few images, and an index.html containing the web markup for the site. Otherwise there are some scaffolding files like manifests in json format which are configuration files.

package.json

package.json records important metadata about the project. Modify the name, version and description.

"name": "yellowgreen",
"version": "0.0.1",
"description": "YellowGreen Firebase Web Admin",

package-lock.json

package-lock.json is (according to npm Docs) "automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates". Modify the name and version to match.

"name": "yellowgreen",
"version": "0.0.1",

manifest.json

According to Mozilla Developer network) "The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).". Modify the name, short_name, icons src and theme_color.

{
  "name": "YellowGreen",
  "short_name": "YellowGreen",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "icons": [{
  "src": "images/icons/yellowgreen-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "theme_color": "#567f17"
}

index.html

Modified the title, deleted the restaurant graphic, changed colour references to #567f17 and looked for references to FriendlyEats and changed them to 'YellowGreen' including the fours scripts! Which are now YellowGreen.Data.js, YellowGreen.View.js, YellowGreen.Mock.js and YellowGreen.js. There are two references to restaurants one is an 'id' and the other is text, which are no longer relevant in my app, so I'll change them to 'territories' and hunt down the corresponding id="no-territories" which I found in YellowGreen.View.js.

There is a div with id="guy-container" with an image used in the quickstart. I found a nice new image, and replaced all instances of the original. guy-container is defined in main.css and is just a definition of some padding and a button background colour. I'll change it otherwise it will annoy me. I changed it to 'image' from 'guy' as my placeholder is an image and its more generic. I needed to change all references to 'guy-container' to 'image-container' in main.css and index.html.

Firebase Local Emulator Suite

So far the Firebase project, development environment, and app have been running locally hosted on my Mac against the live Firebase Firestore database. To experiment with the Firestore database it makes sense now to connect the app to the Firebase Local Emulator Suite. The Firebase Local Emulator Suite contains emulators for hosting, and for firestore (among other things) that can run on my Mac so that is the start point.

Initialise the emulator for your project

The project uses authentication, hosting and firestore so enable them in your project directory using firebase init emulators.

% firebase init emulators

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/.../.../.../firestore-admin

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using yellowgreen.

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Authentication Emulator, Firestore Emulator, Hosting Emulator
? Which port do you want to use for the auth emulator? 9099
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the hosting emulator? 5000
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)? 
? Would you like to download the emulators now? Yes

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
%

Now adjust your code to use the emulator by changing the init.js script at the bottom of index.html (I am sure there is a better way to manage this, but this is what the developer console in my browser told me to do).

<script src="/__/firebase/init.js?useEmulator=true"> </script>

And then start the emulator with firebase emulators:start. Your app should now be connected to auth, firestore and hosting emulators. Now we can experiment as we wish without contaminating the production firestore database. You run the emulator UI and check that your app is connected with an anonymous user authenticated in the Emulator UI.