Paso 1: Configura tu proyecto de Supabase
Ve a supabase.com y crea un nuevo proyecto. Elige una región cercana a tus usuarios (EU West para apps europeasimportante para el cumplimiento del RGPD y la LOPDGDDUS East para apps latinoamericanas, que ofrece baja latencia desde Ciudad de México hasta Buenos Aires).
Crea tu primera tabla en el Editor de Tablas de Supabase. Para una app de gestión de tareas: CREATE TABLE tareas ( id bigserial PRIMARY KEY, titulo text NOT NULL, estado text DEFAULT 'pendiente', user_id uuid REFERENCES auth.users(id), created_at timestamptz DEFAULT now() );
Activa Row-Level Security: ALTER TABLE tareas ENABLE ROW LEVEL SECURITY; CREATE POLICY "Usuarios solo ven sus tareas" ON tareas FOR ALL USING (auth.uid() = user_id);
Con la región UE seleccionada, tus datos están almacenados en Europa y cumplen los requisitos del RGPD, la LOPDGDD y Schrems IIuna condición básica para la mayoría de clientes B2B españoles.
Paso 2: Conecta Supabase a WeWeb
En WeWeb, ve a Plugins → Data Sources → Supabase. Introduce tu URL de Supabase y la clave anon (ambas están en la configuración de tu proyecto de Supabase → API).
WeWeb identificará automáticamente tus tablas y generará fuentes de datos tipadas. Verás una colección "tareas" en el panel de datos de WeWeblista para vincular a componentes de UI.
Este es uno de los momentos más impresionantes con WeWeb + Supabase: pasas de "base de datos vacía" a "fuentes de datos completamente tipadas disponibles en el constructor de frontend visual" en menos de 5 minutos, sin escribir una línea de código.
Paso 3: Construye el flujo de autenticación
En WeWeb creas una página de inicio de sesión con campos de email y contraseña, vinculados al plugin de Supabase Auth de WeWeb. Usa la acción "Iniciar sesión con email/contraseña" en el botón de inicio de sesión.
Protege las páginas de tu app con las condiciones de acceso de página de WeWeb: "Redirigir a /login si el usuario no está autenticado." Este control de cliente + Supabase RLS te da defensa en profundidad.
Para apps en España que requieren identificación adicional, puedes añadir verificación de identidad como paso adicional vía un servicio de validación de DNI o NIF a través de Xano. En México, la integración con verificación de RFC tiene el mismo propósito. En app móvil con FlutterFlow, los flujos biométricos (Face ID, huella dactilar) se integran nativamente.
Paso 4: Vincula datos a componentes de UI
Crea un componente de lista en WeWeb y vincúlalo a tu colección de tareas. Configura el filtro de colección para enviar automáticamente el JWT del usuario actualel plugin de Supabase de WeWeb lo gestiona automáticamente.
Para cada elemento de lista, vincula el título de la tarea a un elemento de texto y el estado a un badge con estilo de color condicional: verde para "completada", azul para "en progreso", gris para "pendiente".
El enlace de datos de WeWeb es visual e inmediatamente actualizadocambia un valor en Supabase y lo ves reflejado en tu vista previa de WeWeb en tiempo real. Esto hace que la depuración y la iteración sean dramáticamente más rápidas que el desarrollo web tradicional.
Paso 5: Operaciones de creación, actualización y eliminación
El plugin de Supabase de WeWeb expone acciones de inserción, actualización y eliminación. Vincúlalas a: - Un botón "Nueva tarea" que abre un modal con formulario, llama a insertar al enviar - Un desplegable de estado inline que llama a actualizar al cambiar - Un botón de eliminación que llama a eliminar tras un diálogo de confirmación
Todas las operaciones respetan RLSlos usuarios solo pueden modificar sus propias filas. Prueba a añadir manejo de errores directamente en el flujo de acciones de WeWeb: ante un error de Supabase, muestra un banner de notificación con un mensaje de error amigable en español.
Paso 6: Actualizaciones en tiempo real
Activa Supabase Realtime en la configuración de tu proyecto. En WeWeb, añade una suscripción Realtime en tu colección de tareas. Ahora cuando una tarea cambia (desde cualquier dispositivo o pestaña), tu UI de WeWeb se actualiza automáticamente.
Esto es potente para herramientas colaborativasobtienes colaboración en vivo sin una sola línea de código WebSocket personalizado. Para SaaS en España y LATAM con equipos distribuidos entre Madrid, Ciudad de México y Buenos Aires, el tiempo real es una característica diferencial que los usuarios aprecian inmediatamente.
Paso 7: Despliega a producción
En WeWeb, haz clic en "Publicar" → introduce tu dominio personalizado. WeWeb despliega tu app a un CDN global con HTTPS. Actualiza los registros DNS de tu dominio para apuntar al CDN edge de WeWeb.
Tu base de datos de Supabase ya está alojada en producción. Ahora tienes una app fullstack completa y escalablecon dominio personalizado, auth, datos en tiempo real y cero gestión de servidores.
Para empresas en España: registra un dominio .es a través de un registrador español y configura DNSSEC para seguridad adicional. Para LATAM: dominios .mx, .co, .ar o .cl señalan anclaje local a clientes e inversores. En App Studio hemos desplegado más de 50 apps en producción con este stack; visita /tools/weweb para ver nuestra práctica de WeWeb.