Resend Integration

Complete guide to configuring and using Resend for email delivery in Dopamine Starter Kit

Resend is the primary email delivery service used in Dopamine Starter Kit, providing reliable email delivery with excellent developer experience. This guide covers the complete setup, configuration, and usage of Resend in your application.

What is Resend?

Resend is a modern email API built for developers, offering:

  • Simple API: Clean, intuitive REST API with excellent documentation
  • High deliverability: Built-in authentication (SPF, DKIM, DMARC)
  • Real-time analytics: Detailed delivery metrics and webhook events
  • Template management: Version-controlled email templates
  • Developer experience: TypeScript SDK with comprehensive error handling
  • Generous limits: 3,000 emails/month free, then pay-as-you-scale

Getting Started

1. Create Resend Account

  1. Visit resend.com and sign up for an account
  2. Verify your email address
  3. Complete the onboarding process

2. Generate API Key

  1. Navigate to the API Keys section in your Resend dashboard
  2. Click Create API Key
  3. Choose Sending access for production use
  4. Give your key a descriptive name (e.g., "Dopamine Production")
  5. Copy the generated API key (starts with re_)

For more details, see the API Keys documentation.

3. Domain Configuration

For production use, configure your own domain:

  1. Go to Domains in the Resend dashboard
  2. Click Add Domain
  3. Enter your domain (e.g., yourdomain.com)
  4. Add the required DNS records to your domain provider:
    • SPF Record: v=spf1 include:_spf.resend.com ~all
    • DKIM Record: Provided by Resend (unique per domain)
    • DMARC Record: v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com

For detailed setup instructions, see the Domains documentation.

Configuration

Environment Variables

Add your Resend configuration to the API environment file:

# apps/api/.env
EMAIL_FROM="noreply@yourdomain.com"
RESEND_API_KEY="re_your_api_key_here"

Service Configuration

The ResendService is configured automatically through dependency injection:

// apps/api/src/email/resend.service.ts
@Injectable()
export class ResendService {
  private resend: Resend;
 
  constructor(private configService: ConfigService) {
    const apiKey = this.configService.get<string>('RESEND_API_KEY');
 
    if (!apiKey) {
      throw new Error('RESEND_API_KEY environment variable is required');
    }
 
    this.resend = new Resend(apiKey);
  }
}

Usage

Basic Email Sending

The ResendService provides methods for sending emails:

// apps/api/src/email/resend.service.ts
async sendEmail(options: EmailOptions): Promise<void> {
  const response = await this.resend.emails.send({
    from: options.from,
    to: options.to,
    subject: options.subject,
    html: options.html,
  });
 
  if (response.error) {
    throw new Error(response.error.message || 'Failed to send email');
  }
}

Template-Based Emails

Send emails using React Email templates:

async sendInvitation(
  to: string,
  props: InvitationEmailProps,
  options: { from: string; subject: string },
): Promise<void> {
  // Render React component to HTML
  const html = await render(InvitationEmail(props));
 
  const emailOptions: EmailOptions = {
    from: options.from,
    to,
    subject: options.subject,
    html,
  };
 
  const response = await this.resend.emails.send(emailOptions);
 
  if (response.error) {
    throw new Error(response.error.message || 'Failed to send email');
  }
}

High-Level Email Service

Use the EmailService for application-level email operations:

// apps/api/src/email/email.service.ts
@Injectable()
export class EmailService {
  constructor(
    private configService: ConfigService,
    private resendService: ResendService
  ) {}
 
  async sendInvitationEmail(to: string, props: InvitationEmailProps): Promise<void> {
    try {
      await this.resendService.sendInvitation(to, props, {
        from: this.configService.get<string>('EMAIL_FROM') || 'noreply@example.com',
        subject: "You've been invited to join our workspace",
      });
    } catch (error) {
      this.logger.error(`Failed to send invitation email to ${to}:`, error);
      throw error;
    }
  }
}

Email Types and Interfaces

Core Types

// apps/api/src/email/types/email.types.ts
export interface EmailOptions {
  from: string;
  to: string;
  subject: string;
  html: string;
}
 
export interface InvitationEmailProps {
  name: string;
  inviterName: string;
  workspaceName: string;
  invitationUrl: string;
}

Monitoring and Analytics

Email Metrics

Monitor email performance through the Resend dashboard:

  • Delivery Rate: Percentage of emails successfully delivered
  • Open Rate: Percentage of delivered emails that were opened
  • Click Rate: Percentage of emails with clicked links
  • Bounce Rate: Percentage of emails that bounced
  • Complaint Rate: Percentage of emails marked as spam

Programmatic Analytics

Access analytics data via API:

async getEmailAnalytics(emailId: string): Promise<any> {
  const response = await fetch(`https://api.resend.com/emails/${emailId}`, {
    headers: {
      'Authorization': `Bearer ${this.configService.get('RESEND_API_KEY')}`,
    },
  });
 
  if (!response.ok) {
    throw new Error('Failed to fetch email analytics');
  }
 
  return response.json();
}

For more details on available email data and metrics, see the Emails API documentation.

Conclusion

This comprehensive Resend integration provides reliable, scalable email delivery with excellent monitoring and error handling capabilities for your Dopamine application.