Ihre App mit dem Supabase-Client verbinden
Installieren Sie den Supabase-JavaScript-Client, initialisieren Sie ihn mit Ihrer Projekt-URL und Ihrem anon key und führen Sie Ihre erste Anfrage aus, um die Verbindung zu bestätigen.
Ihre App mit dem Supabase-Client verbinden ist eine kostenlose Supabase Backend as a Service-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Supabase Backend as a Service-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Supabase Backend as a Service-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
From Dashboard to Code
Dashboard done — now you talk to Supabase from code using its client library. For JavaScript and TypeScript, reach for supabase-js.
Installing the Client
Add the official supabase-js package to your project with your package manager.
npm install @supabase/supabase-jsWhere to Find Your Keys
Under Project Settings > API you will find your Project URL, the browser-safe anon key, and the service_role key for servers only.
Creating the Client
Call createClient once with your URL and anon key, then reuse that single instance everywhere in your app.
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
'https://your-project.supabase.co',
'your-anon-key'
);Keep Secrets in Env Vars
Never hardcode keys in committed code — read them from environment variables instead.
const url = process.env.SUPABASE_URL;
const key = process.env.SUPABASE_ANON_KEY;
console.log('Configured:', Boolean(url && key));Your First Query
Run your first query with select. The client returns a data array and an error object, never throwing on its own.
const { data, error } = await supabase
.from('todos')
.select('*');
if (error) console.error(error.message);
else console.log(data);Always Handle the Error
Supabase will not throw on a failed query, so check error every time before you touch data.
function handle(result) {
if (result.error) return 'Failed: ' + result.error;
return 'Got ' + result.data.length + ' rows';
}
console.log(handle({ data: [1, 2], error: null }));Inserting Data
Write a row with insert, passing an array of objects. Add select to get the inserted rows back.
const { data, error } = await supabase
.from('todos')
.insert([{ title: 'Learn Supabase', done: false }])
.select();Client vs Server Keys
The anon key is guarded by Row-Level Security and safe in the browser. The service_role key bypasses RLS, so keep it server-only.
Confirming the Connection
Quick health check: select a single row. Real data or a clear permission error (not a network error) means your client is wired correctly.
Reusing One Instance
Export your configured client from one module and import it everywhere. A single instance avoids duplicate connections and config drift.
Quick Check
Test your understanding of connecting with the client.
Recap
Recap: you installed supabase-js, built a client from env vars, ran your first select and insert, and learned why anon keys are browser-safe.
Lerne Supabase Backend as a Service mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 11
- Lektionen
- 40
Häufig gestellte Fragen
Ist die Lektion „Ihre App mit dem Supabase-Client verbinden“ kostenlos?
Ja — der vollständige Text von „Ihre App mit dem Supabase-Client verbinden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Supabase Backend as a Service-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Supabase Backend as a Service-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Ihre App mit dem Supabase-Client verbinden“?
Installieren Sie den Supabase-JavaScript-Client, initialisieren Sie ihn mit Ihrer Projekt-URL und Ihrem anon key und führen Sie Ihre erste Anfrage aus, um die Verbindung zu bestätigen. Du übst Supabase Backend as a Service mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Supabase Backend as a Service zu starten?
Keine Vorkenntnisse erforderlich. Supabase Backend as a Service auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Ihre App mit dem Supabase-Client verbinden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Supabase Backend as a Service-Lektion Code schreiben und ausführen?
Ja. Jede Supabase Backend as a Service-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in BaaS und Supabase
- Ihr erstes Projekt einrichten
- Das Supabase-Dashboard erkunden
- Ihre App mit dem Supabase-Client verbinden