Documenso mit Vercel, Supabase und Resend bereitstellen

In diesem Artikel werden wir Ihnen zeigen, wie Sie Documenso mit Vercel, Supabase und Resend bereitstellen und selbst hosten.

Sie werden lernen:

• Wie man eine Postgres-Datenbank mit Supabase einrichtet,

• Wie man SMTP mit Resend installiert,

• Wie man Ihr Projekt mit Vercel bereitstellt.

Wenn Sie nicht wissen, was Documenso ist, es ist eine Open-Source-Alternative zu DocuSign, mit der Mission, eine offene Signier-Infrastruktur zu schaffen, während Offenheit, Zusammenarbeit und Transparenz gefördert werden.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie ein GitHub Konto haben. Sie benötigen auch Node.js und npm, die auf Ihrem lokalen Rechner installiert sind (Hinweis: Sie haben auch die Möglichkeit, es in einer Cloud-Umgebung zu hosten, beispielsweise mit Gitpod; das wäre ein weiterer Beitrag). Wenn Sie Konten bei Vercel, Supabase und Resend benötigen, erstellen Sie diese, indem Sie die Vercel, Supabase und Resend Webseiten besuchen.

Checkliste:

• Ein GitHub-Konto haben

• Node.js installieren

• npm installieren

• Ein Vercel-Konto haben

• Ein Supabase-Konto haben

• Ein Resend-Konto haben

Schritt-für-Schritt-Anleitung zur Bereitstellung von Documenso mit Vercel, Supabase und Resend

Um Documenso bereitzustellen, gehen wir die folgenden Schritte durch:

1. Forken Sie das Documenso-Repository

2. Klonen Sie das geforkte Repository und installieren Sie die Abhängigkeiten

3. Erstellen Sie ein neues Projekt auf Supabase

4. Kopieren Sie die Supabase Postgres-Datenbankverbindungs-URL

5. Erstellen Sie eine `.env`-Datei

6. Führen Sie die Migration auf der Supabase Postgres-Datenbank aus

7. Holen Sie sich Ihre SMTP-Schlüssel von Resend

8. Erstellen Sie ein neues Projekt auf Vercel

9. Fügen Sie Umgebungsvariablen zu Ihrem Vercel-Projekt hinzu

Schritt 1: Forken Sie das Documenso-Repository

Beginnen Sie mit dem Erstellen eines Forks von Documenso auf GitHub. Sie können dies tun, indem Sie das Documenso-Repository besuchen und auf die Schaltfläche 'Fork' klicken. (Sternen Sie auch das Repo!)

Wählen Sie Ihr GitHub-Profil als Eigentümer und klicken Sie auf 'Fork erstellen', um einen Fork des Repos zu erstellen.

Schritt 2: Klonen Sie das geforkte Repository und installieren Sie die Abhängigkeiten

Klonen Sie das geforkte Repository auf Ihren lokalen Computer in ein beliebiges Verzeichnis Ihrer Wahl. Öffnen Sie Ihr Terminal und geben Sie die folgenden Befehle ein:

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

# Clone the repo using Git
git clone

Sie können jetzt in das Verzeichnis navigieren und die Abhängigkeiten des Projekts installieren:

cd documenso

npm install

Schritt 3: Erstellen Sie ein neues Projekt auf Supabase

Jetzt richten wir die Datenbank ein.

Wenn Sie noch nicht getan haben, erstellen Sie ein neues Projekt auf Supabase. Dadurch wird automatisch eine neue Postgres-Datenbank für Sie erstellt.

Auf Ihrem Supabase-Dashboard klicken Sie auf die Schaltfläche 'Neues Projekt' und wählen Sie Ihre Organisation.

Auf der Seite 'Ein neues Projekt erstellen' geben Sie einen Datenbanknamen von documenso und ein sicheres Passwort für Ihre Datenbank ein. Wählen Sie eine Region in Ihrer Nähe, einen Preistarif und klicken Sie auf 'Neues Projekt erstellen', um Ihr Projekt zu erstellen.

Schritt 4: Kopieren Sie die Supabase Postgres-Datenbankverbindungs-URL

Klicken Sie in Ihrem Projekt auf das 'Einstellungen'-Symbol unten links.

Im Abschnitt 'Projekteinstellungen' klicken Sie auf 'Datenbank' und scrollen Sie nach unten zum Abschnitt 'Verbindungszeichenfolge'. Kopieren Sie die 'URI' und aktualisieren Sie sie mit dem Passwort, das Sie im vorherigen Schritt gewählt haben.

Schritt 5: Erstellen Sie eine `.env`-Datei

Erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts, indem Sie den Inhalt der .env.example-Datei kopieren.

Fügen Sie die Verbindungszeichenfolge, die Sie von Ihrem Supabase-Dashboard kopiert haben, zur DATABASE_URL-Variablen in der .env-Datei hinzu.

Die .env sollte folgendermaßen aussehen:

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

Schritt 6: Führen Sie die Migration auf der Supabase Postgres-Datenbank aus

Führen Sie die Migration auf der Supabase Postgres-Datenbank mit dem folgenden Befehl aus:

npx prisma migrate deploy

Schritt 7: Holen Sie sich Ihre SMTP-Schlüssel von Resend

Sie haben gerade Documenso geklont, die Abhängigkeiten auf Ihrem lokalen Rechner installiert und Ihre Datenbank mit Supabase eingerichtet. Jetzt fehlt SMTP. E-Mails werden nicht gesendet! Lassen Sie uns das mit Resend beheben.

Gehen Sie zu Ihrem Resend-Dashboard und klicken Sie auf 'API-Schlüssel hinzufügen', um einen Schlüssel für Resend SMTP zu erstellen.

Fügen Sie dann Ihre Domain im Abschnitt 'Domains' in der Seitenleiste hinzu und überprüfen Sie sie. Dadurch können Sie E-Mails von jeder Adresse senden, die mit Ihrer Domain verbunden ist.

Sie können Ihre `.env`-Datei mit dem Folgenden aktualisieren:

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

Schritt 8: Erstellen Sie ein neues Projekt auf Vercel

Sie haben die Datenbank mit Supabase eingerichtet und sind mit Resend SMTP-fertig. Fast geschafft! Der nächste Schritt ist, das Projekt bereitzustellen - wir werden dafür Vercel verwenden.

Auf Ihrem Vercel-Dashboard erstellen Sie ein neues Projekt mit dem geforkten Projekt aus Ihren GitHub-Repositories. Wählen Sie das Projekt aus den Optionen aus und klicken Sie auf 'Importieren', um Documenso zum Laufen zu bringen.

Schritt 9: Fügen Sie Umgebungsvariablen zu Ihrem Vercel-Projekt hinzu

Auf der Seite 'Projekt konfigurieren' ist es wichtig, die erforderlichen Umgebungsvariablen hinzuzufügen, um sicherzustellen, dass die Anwendung ohne Fehler bereitgestellt werden kann.

Insbesondere für die Variablen NEXT_PUBLIC_WEBAPP_URL und NEXTAUTH_URL müssen Sie .vercel.app zu Ihrem Projektnamen hinzufügen. Dies bildet die Bereitstellungs-URL, die in folgendem Format vorliegen wird: https://[project_name].vercel.app.

Zum Beispiel ist in meinem Fall die Bereitstellungs-URL https://documenso-supabase-web.vercel.app.

Dies ist eine Beispiel-.env-Datei zur Bereitstellung. Kopieren Sie sie und fügen Sie sie ein, um die Felder automatisch auszufüllen, und klicken Sie auf Bereitstellen. Jetzt müssen Sie nur noch auf die Bereitstellung Ihres Projekts warten. Sie gehen live - genießen Sie!

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

Zusammenfassung

Herzlichen Glückwunsch! 🎉 Sie haben Documenso erfolgreich mit Vercel, Supabase und Resend bereitgestellt. Sie sind jetzt bereit, Ihre eigenen Dokumente mit Ihrem selbst gehosteten Documenso zu erstellen und zu signieren!

In dieser Schritt-für-Schritt-Anleitung haben Sie gelernt, wie Sie:

• eine Postgres-Datenbank mit Supabase einrichten,

• SMTP mit Resend installieren,

• Ihr Projekt mit Vercel bereitstellen.

Jetzt sind Sie dran! Wie fanden Sie das Tutorial? Wenn es Ihnen gefallen hat, teilen Sie es bitte! Und wenn Sie Fragen oder Kommentare haben, können Sie mich auf Twitter / X (DM offen) oder Discord kontaktieren.

Wir bauen eine Open-Source-Alternative zu DocuSign und freuen uns über jeden Beitrag. Besuchen Sie das GitHub-Repository und lassen Sie uns einen Stern da!