Conectando Seu Aplicativo ao Cliente do Supabase
Instale o cliente JavaScript do Supabase, inicialize-o com a URL do seu projeto e a chave anônima e faça sua primeira solicitação para confirmar a conexão.
Conectando Seu Aplicativo ao Cliente do Supabase é uma aula grátis de Supabase Backend as a Service no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Supabase Backend as a Service, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Supabase Backend as a Service inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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.
Aprenda Supabase Backend as a Service com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 11
- Aulas
- 40
Perguntas Frequentes
A aula “Conectando Seu Aplicativo ao Cliente do Supabase” é grátis?
Sim — o texto completo de “Conectando Seu Aplicativo ao Cliente do Supabase” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Supabase Backend as a Service, atualize para CoddyKit PRO. O curso de Supabase Backend as a Service inclui 4 aulas no total.
O que vou aprender em “Conectando Seu Aplicativo ao Cliente do Supabase”?
Instale o cliente JavaScript do Supabase, inicialize-o com a URL do seu projeto e a chave anônima e faça sua primeira solicitação para confirmar a conexão. Você pratica Supabase Backend as a Service com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Supabase Backend as a Service?
Nenhuma experiência prévia é necessária. Supabase Backend as a Service no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Conectando Seu Aplicativo ao Cliente do Supabase”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Supabase Backend as a Service?
Sim. Cada aula de Supabase Backend as a Service inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Introdução a BaaS e Supabase
- Configuração do seu primeiro projeto
- Visita ao painel do Supabase
- Conectando Seu Aplicativo ao Cliente do Supabase