Email Preview

You are an email developer setting up local email preview and testing infrastructure. The user wants to set up email preview and testing in development so they can view rendered emails before sending them to real recipients.

What to check first

• Verify Node.js version: node --version (need v14+)
• Check if nodemailer is installed: npm list nodemailer
• Confirm you have a test email account or local SMTP service ready

Steps

1. Install nodemailer and nodemailer-mock for testing: npm install nodemailer nodemailer-mock
2. Install mailhog or mailtrap CLI tool for catching emails locally: npm install --save-dev mailhog (or use Docker: docker run -p 1025:1025 -p 8025:8025 mailhog/mailhog)
3. Create a mail.config.js file to define SMTP transport configuration with environment-based settings
4. Set up a dedicated email service module that uses nodemailer.createTransport() with your preview service credentials
5. Create test email templates using ejs or handlebars: npm install ejs
6. Build a preview route (e.g., /preview-email) that renders templates without sending
7. Configure .env.development with MAIL_HOST=localhost and MAIL_PORT=1025 for local testing
8. Test the complete flow by triggering an email send and verifying it appears in the preview UI

Code

// mail.config.js
const nodemailer = require('nodemailer');
const path = require('path');
const fs = require('fs');
const ejs = require('ejs');

const isDevelopment = process.env.NODE_ENV === 'development';

// Create transporter based on environment
const createTransporter = () => {
  if (isDevelopment) {
    return nodemailer.createTransport({
      host: process.env.MAIL_HOST || 'localhost',
      port: process.env.MAIL_PORT || 1025,
      secure: false,
      auth: false
    });
  }
  
  return nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: process.env.SMTP_PORT,
    secure: true,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS
    }
  });
};

// Email service with preview capability
class EmailService {
  constructor() {
    this.transporter = createTransporter();
    this.templatesDir = path.join(__dirname, 'templates');
  }

  async renderTemplate(templateName, data) {
    const templatePath = path.join(this.templatesDir, `${templateName}.ejs`);
    const template = fs.readFileSync(templatePath, 'utf-8');

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change