Configure Resend for transactional emails — domain verification, templates, and sending.

Email Setup

ScaleRocket uses Resend to send transactional emails and React Email for building templates. All email templates live in packages/emails/.

Create a Resend Account

Go to resend.com and sign up
You get a free tier with 100 emails/day — enough for development

Get Your API Key

In the Resend dashboard, go to API Keys
Click Create API Key
Give it a name (e.g., "ScaleRocket Development")
Choose Full access permission
Copy the key (starts with re_)

Add it to your environment:

# apps/web/.env.local
RESEND_API_KEY=re_123456789...

Verify Your Domain

For production, you need to verify a sending domain so emails come from hello@yourdomain.com instead of onboarding@resend.dev.

In Resend dashboard, go to Domains
Click Add Domain
Enter your domain (e.g., yourdomain.com)
Add the DNS records Resend provides:
- SPF record (TXT)
- DKIM records (CNAME)
- DMARC record (TXT, optional but recommended)
Wait for verification (usually a few minutes)

Note: For local development, you can skip domain verification. Resend lets you send to your own email address from onboarding@resend.dev.

Email Templates

ScaleRocket includes ready-to-use templates in packages/emails/:

packages/emails/
├── src/
│   ├── templates/
│   │   ├── welcome.tsx
│   │   ├── onboarding-day3.tsx
│   │   ├── trial-started.tsx
│   │   ├── trial-ending.tsx
│   │   ├── subscription-activated.tsx
│   │   ├── payment-failed.tsx
│   │   ├── payment-recovered.tsx
│   │   ├── invoice.tsx
│   │   ├── plan-changed.tsx
│   │   ├── goodbye.tsx
│   │   ├── winback.tsx
│   │   ├── feedback-request.tsx
│   │   └── inactivity.tsx
│   └── components/
│       ├── header.tsx           # Shared email header
│       ├── footer.tsx           # Shared email footer
│       └── button.tsx           # CTA button component
├── package.json
└── tsconfig.json

Preview Templates

React Email provides a live preview server. Run it from the root:

pnpm --filter emails dev

This starts a preview server at http://localhost:3001 where you can browse and preview all templates with hot reload.

Customize Templates

Templates use React Email components. Here is an example:

// packages/emails/src/templates/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from "@react-email/components";
import { Header } from "../components/header";
import { Footer } from "../components/footer";

interface WelcomeEmailProps {
  name: string;
}

export default function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to ScaleRocket, {name}!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Header />
          <Heading style={h1}>Welcome aboard, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. You are all set to start using ScaleRocket.
          </Text>
          <Footer />
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: "#f6f9fc", fontFamily: "sans-serif" };
const container = { margin: "0 auto", padding: "40px 20px", maxWidth: "560px" };
const h1 = { fontSize: "24px", fontWeight: "bold", margin: "30px 0" };
const text = { fontSize: "16px", lineHeight: "26px", color: "#333" };

Send Emails

ScaleRocket provides a utility function for sending emails:

// packages/emails/src/send.ts
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendEmail({
  to,
  subject,
  react,
}: {
  to: string;
  subject: string;
  react: React.ReactElement;
}) {
  const { data, error } = await resend.emails.send({
    from: "ScaleRocket <hello@yourdomain.com>",
    to,
    subject,
    react,
  });

  if (error) throw error;
  return data;
}

Use it in your Edge Functions or API routes:

import { sendEmail } from "@saas/emails";
import WelcomeEmail from "@saas/emails/templates/welcome";

await sendEmail({
  to: user.email,
  subject: "Welcome to ScaleRocket!",
  react: WelcomeEmail({ name: user.name }),
});

Test Sending

Start the dev server: pnpm dev
Sign up with a real email address
Check your inbox for the welcome email
Check the Resend dashboard under Emails to see delivery logs

Note: In development, Resend may deliver to your inbox slowly. Check the Resend dashboard for instant delivery status and any errors.

Production Checklist

Verify your sending domain
Update the from address in packages/emails/src/send.ts
Set RESEND_API_KEY in your production environment
Test all email templates by triggering each flow

Next Steps

Set up authentication — emails are sent during signup and password reset
Configure Stripe — payment emails on subscription events

Done reading? Mark this page as complete.

Email Setup

On this page