Cómo instalar Supabase en Angular

3/4/2025

Supabase es una alternativa de código abierto a Firebase que ofrece autenticación, bases de datos en tiempo real y almacenamiento de archivos. En esta guía, aprenderás a integrar Supabase en una aplicación Angular.

1. Crear un Proyecto en Supabase

Dirígete a Supabase y crea una cuenta.
Crea un nuevo proyecto y toma nota de la URL del proyecto y la clave API.
Configura tu base de datos y las tablas necesarias desde el dashboard.

2. Configurar un Proyecto Angular

Si aún no tienes un proyecto Angular, créalo ejecutando:

ng new my-supabase-app cd my-supabase-app

Luego, instala el cliente de Supabase:

npm install @supabase/supabase-js

3. Configurar Supabase en Angular

Crea un archivo de configuración para Supabase, por ejemplo: src/app/supabase.service.ts

import { Injectable } from '@angular/core'; import { createClient, SupabaseClient } from '@supabase/supabase-js'; @Injectable({ providedIn: 'root', }) export class SupabaseService { private supabase: SupabaseClient; constructor() { this.supabase = createClient( 'https://your-supabase-url.supabase.co', 'your-anon-key' ); } async getData() { const { data, error } = await this.supabase .from('your_table') .select('*'); if (error) { throw error; } return data; } }

4. Usar Supabase en un Componente

Edita un componente, por ejemplo src/app/app.component.ts:

import { Component, OnInit } from '@angular/core'; import { SupabaseService } from './supabase.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { data: any[] = []; constructor(private supabaseService: SupabaseService) {} async ngOnInit() { this.data = await this.supabaseService.getData(); } }

5. Mostrar Datos en la Vista

Edita src/app/app.component.html para mostrar los datos:


{{ item.nombre }}

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.