Roman Abendroth & Nils Röhrig | Loql
Software Engineer
Software Engineer
A short introduction to both Firebase and SvelteKit.
is a framework for rapidly developing robust, performant web applications using Svelte.
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')
})
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')
})
How it works in Frameworks like Express, Laravel or Spring Boot.
How it works in Frameworks like SvelteKit, Next.js or Nuxt.
Loads data on the client and on the server. Returns data available within the data prop.
Loads data and processes forms on the server. Returns data available within data and form.
The actual path to a specific route, rooted at the routes folder in a SvelteKit code base.
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.
A user-friendly and secure authentication system that supports various sign-in methods.
A global-scale document database that allows easy data storage, synchro-nization, and querying for mobile and web apps
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>>
}
}
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();A short introduction on how to set up a Firebase project with SvelteKit.
Create a Firebase project in the Firebase Console.
Set up a web app within the Firebase project.
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.
| 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 |