Conexión de su aplicación con el cliente de Supabase
Instale el cliente JavaScript de Supabase, inicialícelo con la URL de su proyecto y la clave anon, y realice su primera solicitud para confirmar la conexión.
Conexión de su aplicación con el cliente de Supabase es una lección gratuita de Supabase Backend as a Service en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Supabase Backend as a Service, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Conexión de su aplicación con el cliente de Supabase» es gratis?
Sí — el texto completo de «Conexión de su aplicación con el cliente de Supabase» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Supabase Backend as a Service, actualiza a CoddyKit PRO. El curso de Supabase Backend as a Service incluye 4 lecciones en total.
¿Qué aprenderé en «Conexión de su aplicación con el cliente de Supabase»?
Instale el cliente JavaScript de Supabase, inicialícelo con la URL de su proyecto y la clave anon, y realice su primera solicitud para confirmar la conexión. Practicas Supabase Backend as a Service con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Supabase Backend as a Service?
No se requiere experiencia previa. Supabase Backend as a Service en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Conexión de su aplicación con el cliente de Supabase»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Supabase Backend as a Service?
Sí. Cada lección de Supabase Backend as a Service incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a BaaS y Supabase
- Configuración de su primer proyecto
- Recorrido por el Dashboard de Supabase
- Conexión de su aplicación con el cliente de Supabase