Firebase

Fastest possible! and explanations

(credit card required for full experience)

What we'll be learning

Serverless
Web console
Firebase CLI
Firebase SDK
Firebase Emulators
CRUDs
Full-text search
Firebase extensions
Custom endpoints (aka Cloud Functions)
Webhooks
Pricing
Security rules
Other options (Supabase, Hasura, etc)

Serverless?

This is a really bad name! Of course we have a server (most of the time more than one)

Serverless means we have no configuration to do on our end manually until we need it!

NoSQL database setup automatically
SSL handled automatically (https:// domain)
There is no ssh to access anything
Scaling is handled

Web console

https://console.firebase.google.com/

Github repo

https://github.com/santospatrick/firebase-workshop

Firebase CLI

Run the following commands to be presented within a CLI, then choose the options that matches your needs!

Firebase SDK

https://firebase.google.com/docs/build

Firebase Emulators

CRUDs

import { firestore } from '@/config/firebase'

// Create
firestore
  .collection('users')
  .add({ name: 'Patrick', email: 'patrick@email.com' })

// Read
firestore
  .collection('users')
  .get()

// Update
    // One or more attributes
    firestore
        .doc('users/YEQijU76K8fshla3fUFngYjZQsBA')
        .update({ name: 'Patrick Santos' })

    // Set all attributes
    firestore
        .doc('users/YEQijU76K8fshla3fUFngYjZQsBA')
        .set({ name: 'Patrick Santos', email: 'patrick@outroemail.com' })

// Delete
firestore
    .doc('users/YEQijU76K8fshla3fUFngYjZQsBA')
    .delete()

Firebase Queries vs SQL

Full-text search

import { firestore } from '@/config/firebase'

// Full-text search
firestore
  .collection('users')
  .orderBy('createdAt')
  .startAt('PAT') // uppercase
  .endAt('pat\uf8ff') // lowercase
  .limit(10)

SELECT * FROM users WHERE name ILIKE 'pat%';

Firebase extensions

https://firebase.google.com/products/extensions

Algolia

yarn add algoliasearch react-instantsearch-dom
yarn add @types/react-instantsearch-dom --dev

import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';

const searchClient = algoliasearch('PROJECT_ID', 'SEARCH_API_KEY');

const App = () => (
  <InstantSearch searchClient={searchClient} indexName="collection_name">
    <SearchBox />
    <Hits />
  </InstantSearch>
);

Cloud Functions

import * as functions from "firebase-functions"

export const helloWorld = functions.https
  .onRequest((request, response) => {
    response.send("My first cloud functions!");
  });
// firebase deploy --only "functions:helloWorld"

Environment Variables

# set an env variable
firebase functions:config:set some.path=value

# get all env variables into a file
firebase functions:config:get > .runtimeconfig.json
# windows: firebase functions:config:get | sc .runtimeconfig.json

import * as functions from "firebase-functions";

functions.config().some.path

# setup new environment in same project
firebase use --add

# after running this, 
# all deploy commands will point to another env
firebase use production

Webhooks

import * as functions from "firebase-functions";

export const sendWelcomeEmail = functions
  .auth.user().onCreate((user) => {
    // ...
  });

https://firebase.google.com/docs/functions/auth-events

Pricing

Security Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isSignedIn() {
      return request.auth != null;
    }

    function isOwner(userId) {
      return request.auth.uid == userId;
    }

    match /users/{userId} {
      allow read: if true
      allow create: if true
      allow update, delete: if isSignedIn() && isOwner(userId)
    }
  }
}

https://github.com/google/cel-spec

https://fireship.io/snippets/firestore-rules-recipes/

Security Checklist

https://firebase.google.com/support/guides/security-checklist

Avoid abusive traffic
Understand API keys
Security rules
Authentication
Anonymous authentication
Environment management
Library management
Cloud Function safety

Supabase

Hasura

Thanks for your time! Questions?

Github

Linkedin

Template Repo