Plataformas

Cómo crear tu SaaS: el stack completo, paso a paso

Los siete puntos donde tienes que elegir herramienta para lanzar un SaaS, con la opción recomendada y cómo dejar cada una funcionando en minutos.

7 pasosNivel principianteUn fin de semanaDesde 0 € al mes

Qué tendrás al terminar

  • Una aplicación en producción, con tu dominio y su certificado.
  • Usuarios que se registran, inician sesión y solo ven sus propios datos.
  • Un checkout que cobra de verdad y avisa a tu backend cuando alguien paga.
  • Emails transaccionales que llegan a la bandeja de entrada, no a spam.
  • Un panel donde ves cuánta gente entra y de dónde viene.

Esta ruta es el camino más corto que conozco entre una idea y un producto que cobra. Siete decisiones, y en cada una hay una opción recomendada porque es la que menos problemas te va a dar mientras aprendes.

Todo lo que aparece aquí tiene plan gratuito o cuesta unos pocos euros al mes, así que puedes recorrerla entera sin gastar nada hasta que tengas el primer cliente. Lo único que vas a pagar sí o sí es el dominio.

No intentes elegirlo todo antes de empezar. Ve paso a paso: cada uno funciona por su cuenta y puedes parar donde quieras y seguir otro día.

Elige con qué construyes el frontend

La primera decisión, y la que condiciona a las demás.

Todo lo que venga después encaja mejor o peor según lo que elijas aquí, así que merece la pena pensarlo diez minutos. La pregunta que lo resuelve casi siempre es una sola: ¿hay páginas que Google tiene que encontrar?

Si tu producto tiene landing, precios o blog, necesitas renderizado en servidor y quieres un framework full-stack. Si lo que construyes es un panel al que solo se entra con contraseña, el SEO no pinta nada y te sobra con una aplicación de una sola página, que es más simple de entender y de mantener.

Ponlo en marcha

Con Node 20 o superior instalado, un comando y ya tienes proyecto.

npx create-next-app@latest mi-saas --ts --tailwind --app --eslint
cd mi-saas
npm run dev
  • Si prefieres Vite: npm create vite@latest mi-panel -- --template react-ts
  • Di que sí a TypeScript aunque no lo domines. Te avisará de la mitad de los errores antes de que existan.
  • Crea el repositorio en git desde el minuto uno. Lo vas a necesitar en el paso 3 para desplegar.

Pon la base de datos y el login

Dónde viven tus datos y cómo entra la gente a su cuenta.

Este es el paso donde más gente se atasca, porque suena a montar un backend. No lo montes. Un BaaS te da base de datos, autenticación, almacenamiento de archivos y una API sobre todo ello, y te ahorra semanas.

La decisión real es qué tipo de base de datos quieres debajo. Postgres es SQL estándar, se lo lleva cualquier otro proveedor si un día te mudas y es lo que casi todo el mundo recomienda hoy para un SaaS. Las alternativas NoSQL van muy bien para apps móviles y en tiempo real, pero atan más.

Ponlo en marcha

Crea el proyecto en el panel de Supabase y conéctalo desde tu código.

npm install @supabase/supabase-js @supabase/ssr
npx supabase init
npx supabase link --project-ref TU_PROJECT_REF
npx supabase db push

Variables de entorno

NEXT_PUBLIC_SUPABASE_URL=https://TU-PROYECTO.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu-clave-publica
# Solo en el servidor. Nunca en una variable NEXT_PUBLIC_
SUPABASE_SERVICE_ROLE_KEY=tu-clave-secreta
  • Activa Row Level Security en cada tabla y escribe las políticas. Sin eso, la clave pública deja leer toda tu base de datos: es el fallo de seguridad más común en proyectos con Supabase.
  • La clave pública está pensada para ir en el navegador. La secreta jamás: si se filtra, se salta todas las políticas.
  • En proyectos nuevos Supabase llama a estas claves publishable y secret en lugar de anon y service_role. Son lo mismo.

Súbelo a internet

De tu portátil a una URL pública que se actualiza sola en cada push.

El flujo que quieres es este: escribes código, haces push y en un minuto está publicado, sin tocar un servidor. Además, cada rama genera su propia URL de preview para enseñar cambios antes de que los vea nadie.

Las cuatro opciones hacen eso. La diferencia está en el ecosistema: si has elegido Next.js, Vercel lo exprime al máximo porque es su propia empresa. Si tu proyecto es estático o quieres el plan gratuito más generoso, mira las otras.

Ponlo en marcha

Sube el código a GitHub y conéctalo. A partir de ahí, cada push despliega.

git init && git add -A && git commit -m "primer commit"
gh repo create mi-saas --private --source=. --push
npx vercel
npx vercel --prod
  • Las variables de entorno de tu .env local no viajan solas. Cárgalas en el panel del proveedor o con: npx vercel env add NEXT_PUBLIC_SUPABASE_URL production
  • Comprueba que .env y .env.local están en el .gitignore antes del primer commit. Si una clave llega al historial de git, hay que rotarla.
  • Si el build falla en la nube pero funciona en local, casi siempre es una variable de entorno que falta o una versión de Node distinta.

Cobra por tu producto

Un checkout que funciona y un webhook que activa la suscripción.

Aquí hay dos decisiones metidas en una. La primera es qué pasarela usar. La segunda, y más importante para quien vende software desde España o a todo el mundo, es quién responde del IVA de cada venta.

Con una pasarela clásica el responsable fiscal eres tú, y eso significa declarar el IVA del país de cada cliente. Con un merchant of record vende la plataforma por ti y se encarga de los impuestos, a cambio de una comisión más alta. Para un producto que empieza, esa comisión suele salir barata comparada con el lío.

Ponlo en marcha

Empieza siempre en modo test, con la CLI redirigiendo los webhooks a tu localhost.

npm install stripe @stripe/stripe-js
stripe login
stripe listen --forward-to localhost:3000/api/webhooks/stripe
stripe trigger checkout.session.completed

Variables de entorno

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
# Lo imprime stripe listen al arrancar
STRIPE_WEBHOOK_SECRET=whsec_...
  • Da el acceso al producto en el webhook, no en la página de gracias. Si lo haces al volver del checkout, quien cierre la pestaña paga y se queda sin nada.
  • Verifica la firma del webhook con el cuerpo crudo de la petición, sin parsear el JSON antes. Es el error que hace fallar la verificación.
  • El whsec_ que imprime stripe listen es solo para local. En producción se genera otro distinto al dar de alta el endpoint.

Manda los emails que tu producto necesita

Confirmaciones, recuperación de contraseña y avisos que no acaben en spam.

Un SaaS manda emails desde el primer día: verifica la cuenta, restablece la contraseña, confirma el pago. Que lleguen no depende del código, depende de que tu dominio esté bien configurado.

No los mandes desde tu Gmail ni desde el servidor de correo del hosting. Usa un proveedor de email transaccional, verifica el dominio con sus registros DNS y tendrás entregabilidad decente sin pensar más en ello.

Ponlo en marcha

Añade tu dominio en el panel, copia los registros DNS que te dé y espera a que verifique.

npm install resend

Variables de entorno

RESEND_API_KEY=re_...
EMAIL_FROM=hola@midominio.com
  • Hasta que el dominio no esté verificado solo podrás enviarte emails a ti mismo. No es un fallo de tu código.
  • Los registros SPF y DKIM son los que evitan la carpeta de spam. Añade también DMARC cuando el dominio ya verifique.
  • Manda siempre desde un subdominio distinto al de tu correo personal, por ejemplo mail.midominio.com, para que un problema de reputación no arrastre al otro.

Ponle tu dominio

Comprar el dominio y apuntarlo a donde vive tu producto.

Un dominio cuesta unos euros al año y es lo que hace que tu producto parezca un producto. Compra solo el dominio: ignora el hosting, el correo y los certificados que el registrador intentará venderte, porque ya los tienes resueltos en los pasos anteriores.

Mira siempre el precio de renovación, no el del primer año. El patrón del sector es una oferta agresiva de entrada y una subida notable a partir del segundo año.

Ponlo en marcha

Añade el dominio en tu proveedor de hosting y copia los registros DNS que te muestre.

npx vercel domains add midominio.com
dig midominio.com +short
  • No te inventes los valores de los registros: copia exactamente la A o el CNAME que te muestre el panel de tu proveedor, porque cambian con el tiempo.
  • Los DNS tardan de unos minutos a unas horas en propagarse. Si acabas de tocarlos y no funciona, espera antes de tocar nada más.
  • El certificado HTTPS lo emite tu proveedor de hosting automáticamente en cuanto el dominio apunta bien. No compres uno.

Mide qué hace la gente

Saber cuánta gente entra, de dónde viene y dónde se cae.

Sin analítica estás construyendo a ciegas: no sabes si el tráfico llega, por qué canal ni en qué punto del registro se va la gente. Con instalar un script de una línea ya tienes lo que necesitas los primeros meses.

En Europa hay una segunda razón para elegir bien: las herramientas que no usan cookies te ahorran el banner de consentimiento, que es una de las cosas que más conversión se lleva por delante.

Ponlo en marcha

Añade el script en el layout de tu aplicación, dentro del head.

<script defer data-domain="midominio.com" src="https://plausible.io/js/script.js"></script>
  • En Next.js con App Router, mételo en app/layout.tsx usando el componente Script de next/script con strategy afterInteractive.
  • Marca desde el principio los dos o tres eventos que de verdad importan: registro, inicio de checkout y pago completado.
  • Si usas una herramienta sin cookies puedes prescindir del banner de consentimiento, pero sigue haciendo falta la política de privacidad.

Todas las plataformas de esta ruta

Firebase

firebase.google.com

El BaaS de Google: Firestore, autenticación, notificaciones push y analítica. Pensado primero para apps móviles.

Bases de datos y BaaSFreemium

Lemon Squeezy

lemonsqueezy.com

Merchant of record para vender software: gestiona el IVA y los impuestos globales por ti. Forma parte de Stripe.

PagosDe pago

Namecheap

namecheap.com

Registrador de dominios barato y sin sorpresas, con privacidad WHOIS incluida de por vida.

Dominios y DNSDe pago

Netlify

netlify.com

Hosting para webs estáticas y Jamstack con deploys desde git, formularios y funciones serverless.

Hosting y PaaSFreemium

Next.js

nextjs.org

El framework de React para apps full-stack: renderizado en servidor, rutas y API en el mismo proyecto.

Frameworks webGratisOpen source

Plausible

plausible.io

Analítica web ligera, sin cookies y conforme al RGPD; open source y autoalojable.

AnalíticaDe pagoOpen sourceSelf-hosted

Resend

resend.com

API de email transaccional pensada para desarrolladores, con plantillas creadas en React Email.

EmailFreemium

Stripe

stripe.com

La pasarela de pagos de referencia para cobrar online: checkout, suscripciones y facturación.

PagosDe pago

Supabase

supabase.com

Backend como servicio sobre Postgres: base de datos, auth, storage y realtime, open source.

Bases de datos y BaaSFreemiumOpen sourceSelf-hosted

Vercel

vercel.com

Despliega frontends y apps full-stack con previews por cada commit y red edge global.

Hosting y PaaSFreemium

Vite

vite.dev

El servidor de desarrollo y empaquetador más rápido para montar tu frontend en segundos.

Frameworks webGratisOpen source

Astro

astro.build

Framework para webs de contenido: HTML por defecto, cero JavaScript salvo donde lo pidas.

Frameworks webGratisOpen source

Cloudflare Pages

cloudflare.com

Hosting estático con funciones serverless en el edge y un plan gratuito muy amplio.

Hosting y PaaSFreemium

Cloudflare Registrar

cloudflare.com

Dominios a precio de coste, sin margen ni subidas en la renovación, dentro del ecosistema Cloudflare.

Dominios y DNSDe pago

Convex

convex.dev

Backend reactivo en TypeScript: base de datos, funciones y sincronización en tiempo real.

Bases de datos y BaaSFreemiumOpen source

Loops

loops.so

Email para SaaS: newsletters y transaccional en una sola herramienta, con editor estilo Notion.

EmailFreemium

PocketBase

pocketbase.io

Backend completo en un solo archivo (Go + SQLite): auth, base de datos, realtime y panel de administración.

Bases de datos y BaaSGratisOpen sourceSelf-hosted

Polar

polar.sh

Merchant of record open source para desarrolladores: monetiza tu producto con pocas líneas de código.

PagosDe pagoOpen source

Porkbun

porkbun.com

Registrador favorito de los builders: renovaciones baratas, privacidad y SSL incluidos.

Dominios y DNSDe pago

PostHog

posthog.com

Product analytics, session replay, feature flags y tests A/B en una sola plataforma para devs.

AnalíticaFreemiumOpen sourceSelf-hosted

Postmark

postmarkapp.com

Email transaccional con alta entregabilidad y separación clara entre correos de aplicación y marketing.

EmailDe pago

Railway

railway.com

PaaS moderno para desplegar apps y bases de datos desde Git sin configurar infraestructura.

Hosting y PaaSDe pago

Umami

umami.is

Analítica web open source y respetuosa con la privacidad que puedes autoalojar gratis.

AnalíticaFreemiumOpen sourceSelf-hosted

¿Quieres cambiar alguna pieza? Busca alternativas en el directorio

Actualizado el