Email Setup & Development (Optional)

Set up your local environment, secrets, and subdomains.

Local Email Setup

For local email testing, we recommend using Mailtrap's free sandbox service.

Setting Up Mailtrap

1. Create a free account at https://mailtrap.io/register/signup
2. Select "Email Testing / Sandbox" during onboarding
3. Navigate to the "Sandbox" page in the left menu
4. Copy the SMTP credentials and add them to your .env file:

SMTP_HOST=smtp.mailtrap.io
SMTP_PORT=2525
SMTP_USER=your_username
SMTP_PASS=your_password

All emails sent from your local environment will be captured in the sandbox, regardless of recipient address.

Using Custom Email Functions

Always use the custom sendEmail function from ./src/utilities/email/sendEmail.ts when sending emails. This function automatically adds our default replyTo address, which is essential for email receiving functionality.

Email Development

This project uses React Email for building and previewing email templates.

Starting the Email Preview Server

pnpm email:dev

The email preview server runs on http://localhost:3001.

Email Structure

All React email components live in ./src/emails/ directory. Each file (except those in ./src/emails/_components/) is interpreted as a separate email template.

Previewing Emails

Pass PreviewProps to your email's default export to render it on the preview server:

// Example email component
export default function MyEmail() {
  return <div>Email content</div>
}

export const PreviewProps = {
  userName: 'Jane Doe',
  inviteLink: 'https://example.com/invite'
}

Using Emails in Code

The primary method for using emails is through the render utility from React Email.

See ./src/utilities/email/generateInviteUserEmail.tsx for a complete example of how to:

• Build email components
• Render them to HTML/text
• Send them through the email system

Building and Exporting

• pnpm email:build - Build emails for production
• pnpm email:export - Export emails as static files

These are rarely needed; the render utility handles most use cases.