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.
* Optionally, install Firebase Admin SDK for server-side usage.
** Find more information at https://github.com/FirebaseExtended/firebase-framework-tools
*** Since Web Framework support uses Cloud Functions, you have to be on the Blaze plan.
Demo & Code Deep Dive
Thank YOu!
| Repository: | https://github.com/nilsroehrig/plant-care-assistant/ |
| Website: | https://plant-care-assistant-38fd3.web.app/ |
| LinkedIn: |
Roman Abendroth Nils Röhrig |
| X / Twitter: | Nils Röhrig |

Building Dynamic Web Apps with SvelteKit and Firebase
By Nils Röhrig
Building Dynamic Web Apps with SvelteKit and Firebase
- 9,672