LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Email

Learn how to set up and use email with Resend and React Email templates

TanStarter uses Resend for sending emails, and React Email for building email templates.

Setup

Create Resend Account

Create a Resend account at resend.com.

Get API Key

Click API Keys > Create API Key in the Resend console, set permissions to Send emails or Full access. Copy the API key and add it to your .env file:

.env
RESEND_API_KEY=your-resend-api-key

Update Website Configuration

Update website.ts to use Resend as the mail provider and set the default sender email address:

Note that fromEmail is the email address used to send emails, and supportEmail is the email address used to receive emails. The email domain suffix should be your email domain.

src/config/website.ts
export const websiteConfig = {
  // ...other config
  mail: {
    enable: true, // Whether to enable email functionality
    provider: 'resend', // Mail provider to use
    fromEmail: 'TanStarter <[email protected]>', // Sender email address
    supportEmail: 'TanStarter <[email protected]>', // Support email address
  },
  // ...other config
}

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Customization

Creating New Email Templates

  1. Create an email template in the src/mail/templates directory:
src/mail/templates/my-custom-email.tsx
import { EmailLayout } from '../components/email-layout';
import { EmailButton } from '../components/email-button';

interface MyCustomEmailProps {
  username: string;
  actionUrl: string;
}

export function MyCustomEmail({
  username,
  actionUrl,
}: MyCustomEmailProps) {
  return (
    <EmailLayout>
      <p>Hello {username}!</p>
      <p>Thanks for joining our platform. Click the button below to get started.</p>
      <EmailButton href={actionUrl}>Get Started</EmailButton>
    </EmailLayout>
  );
}

  1. Update the EmailTemplates interface in types.ts to include your new email template.

  2. Preview your template locally:

pnpm email:dev
  1. Use the template in your code:
await sendEmail({
  to: '[email protected]',
  template: 'myCustomEmail',
  context: {
    username: 'John',
    actionUrl: 'https://example.com/start',
  },
});

Creating a New Mail Provider

TanStarter supports extending with new mail providers:

  1. Create a new file in the src/mail/provider directory (e.g., sendgrid.ts)
  2. Implement the MailProvider interface, defined in src/mail/types.ts, which requires the following methods:
src/mail/provider/sendgrid.ts
import type {
  MailProvider,
  SendEmailResult,
  SendRawEmailParams,
  SendTemplateParams,
} from '../types';

export class SendGridProvider implements MailProvider {
  getProviderName(): string {
    return 'sendgrid';
  }

  async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
    // Logic for sending emails using templates
  }

  async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
    // Logic for sending raw HTML emails
  }
}
  1. Register the new provider in the providerRegistry in src/mail/index.ts:
src/mail/index.ts
import { SendGridProvider } from './provider/sendgrid';

const providerRegistry: Record<MailProviderName, ProviderFactory> = {
  resend: () => new ResendProvider(),
  sendgrid: () => new SendGridProvider(),
};

Next Steps

Now that you understand how to use email in TanStarter, you might want to explore these related features:

Database

Configure database

Authentication

Configure authentication

Newsletter

Configure newsletter subscriptions

Environment Configuration

Configure environment variables

Table of Contents

Setup
Create Resend Account
Get API Key
Update Website Configuration
Customization
Creating New Email Templates
Creating a New Mail Provider
Next Steps