Migrate to Resend

README.md

@@ -53,7 +53,7 @@ Dub.co is the open-source link management infrastructure for modern marketing te
 - [BoxyHQ](https://boxyhq.com/enterprise-sso) – SSO/SAML
 - [Turborepo](https://turbo.build/repo) – monorepo
 - [Stripe](https://stripe.com/) – payments
-- [Postmark](https://postmarkapp.com/) – emails
+- [Resend](https://resend.com/) – emails
 - [Vercel](https://vercel.com/) – deployments
 - [Pangea](https://pangea.cloud/services/domain-intel/reputation) - link scanning
 

apps/web/.env.example

@@ -40,8 +40,8 @@ NEXTAUTH_SECRET=
 NEXTAUTH_URL=http://localhost:8888 # (only needed for localhost)
 
 # Required for email login
-# Get your Postmark API Key here: https://postmarkapp.com/support/article/1008-what-are-the-account-and-server-api-tokens
-POSTMARK_API_KEY=
+# Get your Resend API Key here: https://resend.com/api-keys
+RESEND_API_KEY=
 
 ###############################
 ###### OPTIONAL ENV VARS ######

apps/web/emails/index.ts

@@ -1,10 +1,8 @@
-import { render } from "@react-email/render";
-import { Client } from "postmark";
 import { JSXElementConstructor, ReactElement } from "react";
 
-export const client = process.env.POSTMARK_API_KEY
-  ? new Client(process.env.POSTMARK_API_KEY)
-  : null;
+import { Resend } from "resend";
+
+export const client = new Resend(process.env.RESEND_API_KEY);
 
 export const sendEmail = async ({
   email,
@@ -35,31 +33,28 @@ export const sendEmail = async ({
     return Promise.resolve();
   } else if (!client) {
     console.error(
-      "Postmark is not configured. You need to add a POSTMARK_API_KEY in your .env file for emails to work.",
+      "Resend is not configured. You need to add a RESEND_API_KEY in your .env file for emails to work.",
     );
     return Promise.resolve();
   }
 
-  return client.sendEmail({
-    From:
+  return client.emails.send({
+    from:
       from ||
       (marketing
         ? "[email protected]"
         : process.env.NEXT_PUBLIC_IS_DUB
           ? "[email protected]"
           : `${process.env.NEXT_PUBLIC_APP_NAME} <system@${process.env.NEXT_PUBLIC_APP_DOMAIN}>`),
-    To: email,
-    Bcc: bcc,
+    to: email,
+    bcc: bcc,
     ...(!replyToFromEmail && {
-      ReplyTo: process.env.NEXT_PUBLIC_IS_DUB
+      replyTo: process.env.NEXT_PUBLIC_IS_DUB
         ? "[email protected]"
         : `support@${process.env.NEXT_PUBLIC_APP_DOMAIN}`,
     }),
-    Subject: subject,
-    ...(text && { TextBody: text }),
-    ...(react && { HtmlBody: render(react) }),
-    ...(marketing && {
-      MessageStream: "broadcast",
-    }),
+    subject: subject,
+    text: text,
+    react: react,
   });
 };

apps/web/package.json

@@ -26,8 +26,7 @@
     "@prisma/adapter-planetscale": "5.18.0",
     "@prisma/client": "5.18.0",
     "@radix-ui/react-hover-card": "^1.1.1",
-    "@react-email/components": "^0.0.14",
-    "@react-email/render": "^0.0.12",
+    "@react-email/components": "^0.0.22",
     "@sindresorhus/slugify": "^2.2.1",
     "@splinetool/react-spline": "^2.2.6",
     "@splinetool/runtime": "^1.2.8",
@@ -86,12 +85,11 @@
     "openapi-types": "^12.1.3",
     "openapi3-ts": "^4.2.1",
     "posthog-js": "^1.154.2",
-    "postmark": "^4.0.2",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-dom-confetti": "^0.2.0",
-    "react-email": "^2.0.0",
+    "react-email": "^2.1.6",
     "react-highlight-words": "^0.20.0",
     "react-hook-form": "^7.52.1",
     "react-markdown": "^9.0.1",
@@ -104,6 +102,7 @@
     "rehype-pretty-code": "^0.9.5",
     "rehype-slug": "^5.1.0",
     "remark-gfm": "^3.0.1",
+    "resend": "^4.0.0",
     "shiki": "^0.14.1",
     "sonner": "^1.4.41",
     "stripe": "^12.12.0",

apps/web/ui/analytics/feedback/action.ts

@@ -1,20 +1,17 @@
 "use server";
 
-import { render } from "@react-email/render";
 import { client } from "emails";
 import FeedbackEmail from "emails/feedback-email";
 
 export async function submitFeedback(data: FormData) {
   const email = data.get("email") as string;
   const feedback = data.get("feedback") as string;
 
-  const emailHtml = render(FeedbackEmail({ email, feedback }));
-
-  return await client?.sendEmail({
-    From: "[email protected]",
-    To: "[email protected]",
-    ...(email && { ReplyTo: email }),
-    Subject: "🎉 New Feedback Received!",
-    HtmlBody: emailHtml,
+  return await client.emails.send({
+    from: "[email protected]",
+    to: "[email protected]",
+    ...(email && { replyTo: email }),
+    subject: "🎉 New Feedback Received!",
+    react: FeedbackEmail({ email, feedback }),
   });
 }