Real World Combined Examples

Now it’s time to bring everything together. In this section, I solve several real-world problems by combining concepts from the Firestore, Realtime Database, user auth, storage, and functions chapters.

I’ve selected these examples because they are (A) commonly needed by developers and (B) implement many of the examples covered in this book. Each example also has a corresponding video lesson.

Important Update for Version 6.0

In version 6.0 of this book I decided to remove all code examples from this section. Is it because I’m lazy? Maybe. Is it because they were perpetually outdated by breaking changes? Getting warmer. Is it because I can provide something more useful? That’s my goal!

Instead of dumping a bunch of complex examples in this section that will become quickly outdated, I will provide you with a curated list of lessons from AngularFirebase.com that I believe are critical to development success on this stack. These lessons are more thorough than what can be provided in a book format, are kept up-to-date, and accompanied by video content. If you hate this change to the book just send me a message on Slack - I’ll make it up to you.

7.1 Auth with Firestore Custom User Data

Problem

You want to maintain custom user records that go beyond the basic information provided by Firebase authentication.

Solution

Episode 55: https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/

An app’s auth system is the first thing I want to see when jumping into a new consulting project. When the user auth flow is screwed up it creates a cascading set of problems that can turn development into a nightmare.

After experimenting with various auth configurations in Firebase, I feel the approach presented in episode 55 is a great starting point. Most apps require their users to save some custom account data, so we wrap the Firebase user with a document in Cloud Firestore allowing us to add any custom data we want. From the developer’s perspective, you get a centralized AuthService that can be injected anywhere in app to observe the current user.

7.2 Role-based Access Control

Problem

You want to assign users unique roles, then secure backend and frontend data based on their assigned roles.

Solution

Episode 75: https://angularfirebase.com/lessons/role-based-authorization-with-firestore-nosql-and-angular-5/

Role-based use authorization is a challenging feature to implement on any stack. There are many different ways to go about it, but I put together an approach that offers a high degree of flexibility. But most importantly, it shows you how to create security mechanisms with both the frontend and backend code. End-to-end security is critical for any access-control feature and this episode goes into great detail.

7.3 Drag and Drop File Uploads

Problem

You want users to drag and drop files into your app and upload them to a Firebase storage bucket.

Solution

Episode 82: https://angularfirebase.com/lessons/firebase-storage-with-angularfire-dropzone-file-uploader/

The book has an entire chapter dedicated to file uploads, but building your own dropzone uploader from scratch is a great exercise. In Episode 82 you will learn how to use angular to handle the drag events, then mix in AngularFireStorage to upload the file.

7.4 Firestore NoSQL Data Modeling

Problem

You’re not sure how to model your Firestore data.

Solution

Episode 85: https://angularfirebase.com/lessons/firestore-nosql-data-modeling-by-example/

Modeling data in NoSQL is tricky. I have worked with MongoDB for many years, which is a document-oriented database that shares fundamental similarities to Firestore. What I’ve found over the years is that almost every data modeling problem has several viable solutions. Solution A might get you better performance, but require more data duplication. While Solution B might be less performant, but have the ability to scale infinitely. In Episodes 85 and 86 I provide a ton of different practical data modeling examples and discuss the tradeoffs for each.

7.5 Server Side Rendering

Problem

You need your Angular App to be search engine and social media linkbot friendly.

Solution

Episode 106 (Prerendering): https://angularfirebase.com/lessons/angular-6-universal-ssr-prerendering-firebase-hosting/

Episode 99 (SSR): https://angularfirebase.com/lessons/server-side-rendering-firebase-angular-universal/

Server-side rendering was once the Achilles’ heal of AngularFirebase development. Universal SSR simply did not work with the Firebase SDK. Thankfully, that all changed in March 2018 and opened the door to building fully SEO optimized apps. There are two main strategies you can start using today:

Prerendering creates an entry-point page for every route in your Angular app and renders it at build-time. It’s great when you have a small number of pages that need to be SEO-optimized, such as landing pages, product listings, etc.

SSR hosts your app on a NodeJS server and renders the app request-time. This means your entire app becomes SEO-optimized, but you have to deal with the added complexity and cost of deploying/scaling a server.