Implementando Documenso con Vercel, Supabase y Resend

En este artículo, te guiaremos a través de cómo desplegar y auto alojar Documenso utilizando Vercel, Supabase y Resend.

Aprenderás:

• Cómo configurar una base de datos Postgres utilizando Supabase,

• Cómo instalar SMTP con Resend,

• Cómo desplegar tu proyecto con Vercel.

Si no sabes qué es Documenso, es una alternativa de código abierto a DocuSign, con la misión de crear una infraestructura abierta de firma mientras se abraza la apertura, la cooperación y la transparencia.

Requisitos previos

Antes de comenzar, asegúrate de tener una cuenta de GitHub. También necesitas tener Node.js y npm instalados en tu máquina local (nota: también tienes la opción de alojarlo en un entorno en la nube usando Gitpod, por ejemplo; eso sería otro post). Si necesitas cuentas en Vercel, Supabase y Resend, créalas visitando los sitios web de Vercel, Supabase y Resend.

Lista de verificación:

• Tener una cuenta de GitHub

• Instalar Node.js

• Instalar npm

• Tener una cuenta de Vercel

• Tener una cuenta de Supabase

• Tener una cuenta de Resend

Guía paso a paso para desplegar Documenso con Vercel, Supabase y Resend

Para desplegar Documenso, seguiremos los siguientes pasos:

1. Hacer un fork del repositorio de Documenso

2. Clonar el repositorio bifurcado e instalar dependencias

3. Crear un nuevo proyecto en Supabase

4. Copiar la URL de conexión de la base de datos Postgres de Supabase

5. Crear un archivo `.env`

6. Ejecutar la migración en la base de datos Postgres de Supabase

7. Obtener tus claves SMTP en Resend

8. Crear un nuevo proyecto en Vercel

9. Agregar variables de entorno a tu proyecto de Vercel

Entonces, ¿estás listo? ¡Vamos a empezar!

Paso 1: Hacer un fork del repositorio de Documenso

Comienza creando un fork de Documenso en GitHub. Puedes hacerlo visitando el repositorio de Documenso y haciendo clic en el botón 'Fork'. (¡También, dale una estrella al repositorio!)

Elige tu perfil de GitHub como propietario y haz clic en 'Crear fork' para crear un fork del repositorio.

Paso 2: Clonar el repositorio bifurcado e instalar dependencias

Clona el repositorio bifurcado en tu máquina local en cualquier directorio de tu elección. Abre tu terminal e ingresa los siguientes comandos:

# Clone the repo using Github CLI
gh repo clone [your_github_username]/documenso

# Clone the repo using Git
git clone

Ahora puedes navegar al directorio e instalar las dependencias del proyecto:

cd documenso

npm install

Paso 3: Crear un nuevo proyecto en Supabase

Ahora, configuremos la base de datos.

Si aún no lo has hecho, crea un nuevo proyecto en Supabase. Esto creará automáticamente una nueva base de datos Postgres para ti.

En tu panel de Supabase, haz clic en el botón 'Nuevo proyecto' y elige tu organización.

En la página 'Crear un nuevo proyecto', establece un nombre de base de datos de documenso y una contraseña segura para tu base de datos. Elige una región más cercana a ti, un plan de precios y haz clic en 'Crear nuevo proyecto' para crear tu proyecto.

Paso 4: Copiar la URL de conexión de la base de datos Postgres de Supabase

En tu proyecto, haz clic en el icono 'Configuraciones' en la parte inferior izquierda.

Bajo la sección 'Configuraciones del proyecto', haz clic en 'Base de datos' y desplázate hacia abajo hasta la sección 'Cadena de conexión'. Copia el 'URI' y actualízalo con la contraseña que elegiste en el paso anterior.

Paso 5: Crear un archivo `.env`

Crea un archivo .env en la raíz de tu proyecto copiando el contenido del archivo .env.example.

Agrega la cadena de conexión que copiaste de tu panel de Supabase a la variable DATABASE_URL en el archivo .env.

El archivo .env debería verse así:

DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"

Paso 6: Ejecutar la migración en la base de datos Postgres de Supabase

Ejecuta la migración en la base de datos Postgres de Supabase utilizando el siguiente comando:

npx prisma migrate deploy

Paso 7: Obtener tus claves SMTP en Resend

Así que acabas de clonar Documenso, instalar dependencias en tu máquina local y establecer tu base de datos utilizando Supabase. Ahora, falta SMTP. ¡Los correos no saldrán! Vamos a solucionarlo con Resend.

En el panel de Resend, haz clic en 'Agregar clave API' para crear una clave para Resend SMTP.

A continuación, añade y verifica tu dominio en la sección 'Dominios' en la barra lateral. Esto te permitirá enviar correos desde cualquier dirección asociada con tu dominio.

Puedes actualizar tu archivo `.env` con lo siguiente:

SMTP_MAIL_HOST='smtp.resend.com';
SMTP_MAIL_PORT='25';
SMTP_MAIL_USER='resend';
SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY';
MAIL_FROM='noreply@[YOUR_DOMAIN]'

Paso 8: Crear un nuevo proyecto en Vercel

Has configurado la base de datos con Supabase y estás listo para SMTP con Resend. ¡Casi ahí! El siguiente paso es desplegar el proyecto — usaremos Vercel para eso.

En tu panel de Vercel, crea un nuevo proyecto usando el proyecto bifurcado de tus repositorios de GitHub. Selecciona el proyecto entre las opciones y haz clic en 'Importar' para comenzar a ejecutar Documenso.

Paso 9: Agregar variables de entorno a tu proyecto de Vercel

En la página 'Configurar proyecto', agregar las variables ambientales requeridas es esencial para asegurar que la aplicación se despliegue sin errores.

Específicamente, para las variables NEXT_PUBLIC_WEBAPP_URL y NEXTAUTH_URL, debes agregar .vercel.app a tu nombre de proyecto. Esto formará la URL de despliegue, que estará en el formato: https://[nombre_del_proyecto].vercel.app.

Por ejemplo, en mi caso, la URL de despliegue es https://documenso-supabase-web.vercel.app.

Este es un ejemplo de archivo .env para desplegar. Copia y pega para autocompletar los campos y haz clic en Desplegar. Ahora, solo necesitas esperar a que tu proyecto se despliegue. Estás en vivo — ¡disfruta!

DATABASE_URL='postgresql://postgres:typeinastrongpassword@db.njuigobjlbteahssqbtw.supabase.co:5432/postgres'
NEXT_PUBLIC_WEBAPP_URL='https://documenso-supabase-web.vercel.app'
NEXTAUTH_SECRET='something gibrish to encrypt your jwt tokens'
NEXTAUTH_URL='https://documenso-supabase-web.vercel.app'
 # Get a Sendgrid Api key here:  
SENDGRID_API_KEY=''
# Set SMTP credentials to use SMTP instead of the Sendgrid API.
SMTP_MAIL_HOST='smtp.resend.com'
SMTP_MAIL_PORT='25'
SMTP_MAIL_USER='resend'
SMTP_MAIL_PASSWORD='YOUR_RESEND_API_KEY'
MAIL_FROM='noreply@[YOUR_DOMAIN]'
NEXT_PUBLIC_ALLOW_SIGNUP=true

Concluyendo

¡Felicidades! 🎉 Has desplegado con éxito Documenso usando Vercel, Supabase y Resend. ¡Ahora estás listo para crear y firmar tus propios documentos con tu Documenso auto alojado!

En esta guía paso a paso, aprendiste cómo:

• configurar una base de datos Postgres utilizando Supabase,

• instalar SMTP con Resend,

• desplegar tu proyecto con Vercel.

¡Ahora es tu turno! ¿Cómo fue el tutorial? Si te gustó, ¡por favor compártelo! Y si tienes alguna pregunta o comentario, no dudes en contactarme en Twitter / X (DM abierto) o Discord.

Estamos construyendo una alternativa de código abierto a DocuSign y damos la bienvenida a todas las contribuciones. Dirígete al repositorio de GitHub y ¡déjanos una estrella!