All Articles

Angular FireStarter -- great way to write angular program that uses

Start the project

  1. git clone f2
  2. cd f2
  3. time npm install # takes 13 minutes & 36 seconds on my computer
  4. vim src/environments/environments.ts
  5. cd functions/;npm install --save firebase-functions@latest

Provision the project on

  2. Click + near the middle of the screen to add a new project.
  3. I’ll name this one matt-f2 --- name yours whatever you like.
  4. Check the accept the controller-controller terms
  5. Click Create project
  6. Click continue and go to your project’s URL — Mine is
  7. Click the </> icon for web configuration.
  8. Copy the config object. You’ll copy these values to the envrionment.ts files of the project (there are two of them).
  9. and setup google authentication.
  10. create cloud firestore database with rules in test mode.

Try it locally

  1. cd to the main root
  2. ng serve
  3. http://localhost:4200
  4. Click login and use your google account
  5. Click firestore the upper right — add a few notes
  6. Navigate from project’s database — see that you’ve added a few records to the NoSQL datastore

Try it on’s hosting service

  1. npm install -g firebase-tools # this is a one time setup
  2. firebase login # You’re prompted via your web browser
  3. firebase list # lists your firebase projects
  4. firebase use matt-f2 # whatever project you are using
  5. time ng build # takes 28 seconds on my computer
  6. time firebase deploy# takes 2 minutes & 7 seconds on my computer
  7. Visit login, make some notes, be happy.
  8. Improve the cloud firestore rules by requiring authenticated users:
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if request.auth.uid != null;
      allow write: if request.auth.uid != null;


  1. The commit history of this work might interest you: