Roman Abendroth & Nils Röhrig | Loql

The Hosts

Software Engineer

Roman Abendroth

Software Engineer

Nils Röhrig

The Tools

A short introduction to both Firebase and SvelteKit.

                               is a framework for rapidly developing robust, performant web applications using Svelte.

  • Components
  • Rendering
  • Interactivity
  • ‘Browser Stuff‘
  • Routing
  • Data Loading
  • Form Processing
  • ‘Server Stuff‘

Meta-framework for

Meta-framework for

Routing


const express = require('express')
const app = express()

// GET method route
app.get('/', (req, res) => {
  res.send('GET request to the homepage')
})

// POST method route
app.post('/', (req, res) => {
  res.send('POST request to the homepage')
})

Code-Based

How it works in Frameworks like Express, Laravel or Spring Boot.


const express = require('express')
const app = express()

// GET method route
app.get('/', (req, res) => {
  res.send('GET request to the homepage')
})

// POST method route
app.post('/', (req, res) => {
  res.send('POST request to the homepage')
})

Code-Based

How it works in Frameworks like Express, Laravel or Spring Boot.

File-Based

How it works in Frameworks like SvelteKit, Next.js or Nuxt.

Anatomy of a Route

+page.js

Loads data on the client and on the server. Returns data available within the data prop.

+page.server.js

Loads data and processes forms on the server. Returns data available within data and form.

Route/[param]

The actual path to a specific route, rooted at the routes folder in a SvelteKit code base.

+page.svelte

The pages markup, styles and behavior. It may receive a data or a form prop.

<script>
  // The data displayed or used on the page
  export let data;
</script>

<h1>Records</h1>
<ul>
  <!-- Iterating data from `data` prop -->
  {#each data.records as record (record.id)}
    <li><a href="/{record.id}">{record.name}</a></li>
  {/each}
</ul>

<h2>Create New Record</h2>
<!-- Form to create new data -->
<form method="post">
  <input type="text" name="artist" placeholder="Enter artist..." />
  <input type="text" name="name" placeholder="Enter name..." />
  <button type="submit">Create record</button>
</form>
import { list } from "$lib/server/db";
import { add } from "$lib/server/db.js";

export function load() {
  // Describes what is available in the `data` prop
  return {
    records: list(),
  };
}

export const actions = {
  // The default form action to process form posts
  async default({ request }) {
    const data = await request.formData();
    const artist = data.get("artist");
    const name = data.get("name");

    add(artist, name);
  },
};
<script>
    export let data;
</script>

<h1>{data.record.name}</h1>
<p>by {data.record.artist}</p>














import { get } from "$lib/server/db.js";
import { error } from "@sveltejs/kit";

export function load({ params }) {
  const record = get(params.id);

  if (!record) {
    throw error(404);
  }

  return {
    record,
  };
}







                       is an app development platform that helps you build and grow apps and games users love.

Product Examples

...and many more...

Authentication

A user-friendly and secure authentication system that supports various sign-in methods.

Firestore

A global-scale document database that allows easy data storage, synchro-nization, and querying for mobile and web apps

Cloud Functions

Serverless functions that allow secure and private data processing and database event handling.

App Client

Firebase Authentication

Login Credentials / Provider

Session

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

App Client

Firebase Authentication

Login Credentials / Provider

Session

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

App Client

Firebase Authentication

Login Credentials / Provider

Session

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

App Client

Firestore, Storage...

Request via Client SDK

Resource / Error

Firebase Backend

Check Access

Access Denied

Security Rules

App Backend

Request Resource

Resource / Error

Access Granted

Verify Identity

Resource

Request via Admin SDK

Resource

Firebase Authentication

Login Credentials / Provider

Session

service <<name>> {
  // Match the resource path.
  match <<path>> {
    // Allow the request if the following conditions are true.
    allow <<methods>> : if <<condition>>
  }
}

Security RUles

Collection

Collection

Collection

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Document

Database

// Create a new document in a collection
await db.collection("collection-name")
  .doc()
  .set({ fieldName: "field-value" });

// Query documents from a collection
const documents = await db.collection("collection-name")
  .where("fieldName", "==", "field-value")
  .get();

// Update a document in a collection
await db.collection("collection-name")
  .doc("document-id")
  .update({ fieldName: "updated-field-value" });

// Delete a document in a collection
await db.collection("collection-name")
  .doc("document-id")
  .delete();

Project Setup

A short introduction on how to set up a Firebase project with SvelteKit.

1

Create a Firebase project in the Firebase Console.

2

Set up a web app within the Firebase project.

3

Create a SvelteKit project on your computer.

4

Install Firebase Client SDK and use web app config to initialize your App*.

* Optionally, install Firebase Admin SDK for server-side usage.

5

Enable and initialize Experimental Web-Framework support** for your project via Firebase CLI.

6

Use Firebase Emulators Suite for testing. After that, deploy your app with Firebase CLI***

*** Since Web Framework support uses Cloud Functions, you have to be on the Blaze plan.

Demo & Code Deep Dive

Building Dynamic Web Apps with SvelteKit and Firebase

By Nils Röhrig

Building Dynamic Web Apps with SvelteKit and Firebase

  • 9,672