Déployer Documenso avec Vercel, Supabase et Resend

Dans cet article, nous vous guiderons à travers le déploiement et l'hébergement de Documenso en utilisant Vercel, Supabase et Resend.

Vous apprendrez :

• Comment configurer une base de données Postgres en utilisant Supabase,

• Comment installer SMTP avec Resend,

• Comment déployer votre projet avec Vercel.

Si vous ne savez pas ce qu'est Documenso, c'est une alternative open-source à DocuSign, avec pour mission de créer une infrastructure de signature ouverte tout en adoptant l'ouverture, la coopération et la transparence.

Conditions requises

Avant de commencer, assurez-vous d'avoir un compte GitHub. Vous devez également avoir Node.js et npm installés sur votre machine locale (note : vous avez également la possibilité de l'héberger sur un environnement cloud en utilisant Gitpod par exemple ; cela ferait un autre post). Si vous avez besoin de comptes sur Vercel, Supabase et Resend, créez-les en visitant les sites Vercel, Supabase et Resend.

Liste de contrôle :

• Avoir un compte GitHub

• Installer Node.js

• Installer npm

• Avoir un compte Vercel

• Avoir un compte Supabase

• Avoir un compte Resend

Guide étape par étape pour déployer Documenso avec Vercel, Supabase et Resend

Pour déployer Documenso, nous allons suivre les étapes suivantes :

1. Forker le dépôt Documenso

2. Cloner le dépôt forké et installer les dépendances

3. Créer un nouveau projet sur Supabase

4. Copier l'URL de connexion de la base de données Postgres Supabase

5. Créer un fichier `.env`

6. Exécuter la migration sur la base de données Postgres Supabase

7. Obtenez vos clés SMTP sur Resend

8. Créer un nouveau projet sur Vercel

9. Ajouter des variables d'environnement à votre projet Vercel

Alors, êtes-vous prêts ? Plongeons-nous !

Étape 1 : Forker le dépôt Documenso

Commencez par créer un fork de Documenso sur GitHub. Vous pouvez le faire en visitant le dépôt Documenso et en cliquant sur le bouton 'Fork'. (De plus, étoilez le repo !)

Choisissez votre profil GitHub comme propriétaire et cliquez sur 'Créer un fork' pour créer un fork du dépôt.

Étape 2 : Cloner le dépôt forké et installer les dépendances

Clonez le dépôt forké sur votre machine locale dans le répertoire de votre choix. Ouvrez votre terminal et entrez les commandes suivantes :

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

# Clone the repo using Git
git clone

Vous pouvez maintenant naviguer dans le répertoire et installer les dépendances du projet :

cd documenso

npm install

Étape 3 : Créer un nouveau projet sur Supabase

Maintenant, configurons la base de données.

Si ce n'est pas déjà fait, créez un nouveau projet sur Supabase. Cela créera automatiquement une nouvelle base de données Postgres pour vous.

Dans votre tableau de bord Supabase, cliquez sur le bouton 'Nouveau projet' et choisissez votre organisation.

Sur la page 'Créer un nouveau projet', définissez un nom de base de données de documenso et un mot de passe sécurisé pour votre base de données. Choisissez une région plus proche de vous, un plan tarifaire et cliquez sur 'Créer un nouveau projet' pour créer votre projet.

Étape 4 : Copier l'URL de connexion de la base de données Postgres Supabase

Dans votre projet, cliquez sur l'icône 'Paramètres' en bas à gauche.

Sous la section 'Paramètres du projet', cliquez sur 'Base de données' et faites défiler jusqu'à la section 'Chaîne de connexion'. Copiez le 'URI' et mettez-le à jour avec le mot de passe que vous avez choisi à l'étape précédente.

Étape 5 : Créer un fichier `.env`

Créez un fichier .env à la racine de votre projet en copiant le contenu du fichier env.example.

Ajoutez la chaîne de connexion que vous avez copiée depuis votre tableau de bord Supabase à la variable DATABASE_URL dans le fichier .env.

Le fichier .env devrait ressembler à ceci :

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

Étape 6 : Exécuter la migration sur la base de données Postgres Supabase

Exécutez la migration sur la base de données Postgres Supabase en utilisant la commande suivante :

npx prisma migrate deploy

Étape 7 : Obtenez vos clés SMTP sur Resend

Donc, vous venez de cloner Documenso, d'installer les dépendances sur votre machine locale et de configurer votre base de données avec Supabase. Maintenant, SMTP est manquant. Les e-mails ne seront pas envoyés ! Réparons cela avec Resend.

Dans le tableau de bord Resend, cliquez sur 'Ajouter une clé API' pour créer une clé pour Resend SMTP.

Ensuite, ajoutez et vérifiez votre domaine dans la section 'Domaine' sur la barre latérale. Cela vous permettra d'envoyer des e-mails depuis n'importe quelle adresse associée à votre domaine.

Vous pouvez mettre à jour votre fichier `.env` avec ce qui suit :

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]'

Étape 8 : Créer un nouveau projet sur Vercel

Vous avez configuré la base de données avec Supabase et êtes prêt pour SMTP avec Resend. Vous y êtes presque ! L'étape suivante consiste à déployer le projet—nous utiliserons Vercel pour cela.

Dans votre tableau de bord Vercel, créez un nouveau projet en utilisant le projet forké de vos dépôts GitHub. Sélectionnez le projet parmi les options et cliquez sur 'Importer' pour commencer à exécuter Documenso.

Étape 9 : Ajouter des variables d'environnement à votre projet Vercel

Dans la page 'Configurer le projet', l'ajout des variables d'environnement requises est essentiel pour garantir que l'application se déploie sans erreurs.

En particulier, pour les variables NEXT_PUBLIC_WEBAPP_URL et NEXTAUTH_URL, vous devez ajouter .vercel.app à votre nom de projet. Cela formera l'URL de déploiement, qui sera au format : https://[project_name].vercel.app.

Par exemple, dans mon cas, l'URL de déploiement est https://documenso-supabase-web.vercel.app.

Ceci est un exemple de .env à déployer. Copiez et collez-le pour préremplir les champs et cliquez sur Déployer. Maintenant, vous devez simplement attendre que votre projet se déploie. Vous allez en ligne—profitez-en !

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

Conclusion

Félicitations ! 🎉 Vous avez réussi à déployer Documenso en utilisant Vercel, Supabase et Resend. Vous êtes maintenant prêt à créer et à signer vos propres documents avec votre Documenso auto-hébergé !

Dans ce guide étape par étape, vous avez appris comment :

• configurer une base de données Postgres en utilisant Supabase,

• installer SMTP avec Resend,

• déployer votre projet avec Vercel.

À vous de jouer ! Comment s'est passé le tutoriel ? Si vous l'avez apprécié, merci de le partager ! Et si vous avez des questions ou des commentaires, n'hésitez pas à me contacter sur Twitter / X (DM ouvert) ou sur Discord.

Nous construisons une alternative open-source à DocuSign et accueillons chaque contribution. Rendez-vous sur le dépôt GitHub et laissez-nous une étoile !