Email Setup

Let's set up and customize your application's email system! 🚀

Email Authentication & Deliverability 📫

Before setting up your email provider, understand these critical email authentication protocols:

DKIM (DomainKeys Identified Mail) 🔑

• Digital signature that proves email authenticity
• Prevents email spoofing and tampering
• Consists of:
  1. Public key (published in DNS)
  2. Private key (used to sign emails)
• Most providers auto-generate DKIM keys
• Example DNS record:

  selector._domainkey.yourdomain.com TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4..."

SPF (Sender Policy Framework) 🛡️

• Specifies authorized servers to send emails
• Prevents unauthorized sending from your domain
• Single DNS TXT record listing allowed IPs/servers
• Example record:

  yourdomain.com TXT "v=spf1 include:_spf.google.com include:_spf.mailgun.org ~all"

DMARC (Domain-based Message Authentication) 📊

• Enforces SPF and DKIM policies
• Provides reporting on authentication failures
• Helps prevent domain spoofing
• Example record:

  _dmarc.yourdomain.com TXT "v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com"

• Policy options:
  • p=none: Monitor only
  • p=quarantine: Send to spam folder
  • p=reject: Reject emails

Additional Deliverability Tips 💡

1. Warm Up Your Domain 🌡️

   • Start with low volume
   • Gradually increase sending
   • Monitor engagement metrics
   • Use consistent sending patterns

2. List Hygiene 🧹

   • Remove bounced emails
   • Honor unsubscribe requests
   • Validate email addresses
   • Segment by engagement

3. Technical Setup ⚙️

   • Set up reverse DNS (PTR records)
   • Use dedicated IP (for high volume)
   • Monitor IP/domain reputation
   • Implement feedback loops

4. Content Best Practices 📝

   • Balance text-to-image ratio
   • Avoid spam trigger words
   • Test with spam checkers

Choose Your Email Provider 📮

Select your preferred email provider:

Email Designer ✨

1. Start the email designer:

   npm run dev

   This will launch the email designer at http://localhost:3001

2. Use the designer to:

   • Preview email templates
   • Test responsive layouts

Customizing Email Layout 🎨

Customize your email branding in src/emails/components/layout.tsx:

// src/emails/components/layout.tsx
// ...Existing code...

 <Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                // TODO: Change this to the correct color
                primary: "#f97316",
                background: "#f9fafb",
                foreground: "#111827",
                border: "#e5e7eb",
                muted: "#9ca3af",
                ["primary-foreground"]: "#f8fafc",
              },
            },
          },
        }}
      >

Creating Email Templates 📝

Customize welcome email in src/emails/components/Welcome.tsx:

export default function Welcome({ 
  userName, 
  dashboardUrl 
}: WelcomeEmailProps) {
  return (
    <Layout>
      <Heading>Welcome to {appConfig.projectName}! 👋</Heading>
      
      <Text>Hi {userName},</Text>
      
      <Text>
        We're excited to have you on board! Get started by visiting your dashboard:
      </Text>

      <Button href={dashboardUrl}>
        Go to Dashboard
      </Button>

      <Text>
        If you have any questions, just reply to this email - we're here to help!
      </Text>
    </Layout>
  );
}

Testing Emails 🧪

1. Local Testing

   • Use email designer at localhost:3001
   • Preview all templates
   • Test with different data
   • Check responsive design

2. Production Testing

   • Send test emails to real addresses
   • Verify deliverability
   • Check spam scores
   • Monitor open rates

Best Practices 💡

1. Design

   • Keep emails responsive
   • Use brand colors consistently
   • Include plain text versions
   • Optimize images

2. Content

   • Clear subject lines
   • Personalize content
   • Include unsubscribe links
   • Follow email regulations

3. Technical

   • Set up SPF/DKIM
   • Monitor bounce rates
   • Handle email errors
   • Track delivery status

Now your Indie Kit application is ready to send beautifully designed emails! 🎉