Skip to content

Latest commit

 

History

History
46 lines (29 loc) · 2.63 KB

README.md

File metadata and controls

46 lines (29 loc) · 2.63 KB

@op/emails Workspace

This workspace manages the creation and sending of transactional emails using the React Email library and Nodemailer.

Purpose

To define email templates using React components and Tailwind CSS, making it easier to build, preview, and maintain consistent email designs. It provides a function (OPNodemailer) in index.tsx to render these templates and send them using Nodemailer via Resend's SMTP service.

Structure

  • emails/: Contains the React components that define the different email templates (e.g., WelcomeEmail.tsx, PasswordResetEmail.tsx). Each component should also export a subject string.
  • components/: Contains shared React components used within the email templates.
  • index.tsx: Exports the main OPNodemailer function, which takes a recipient email, a template component (including its subject), and optional render options, then renders the email using @react-email/render and sends it via Nodemailer configured for Resend.
  • preview/: Generated by React Email for local previewing of email templates (via pnpm dev).

The package.json includes scripts provided by the react-email CLI:

  • dev: Starts a local development server (port 3883) to preview emails.
  • export: Exports the email templates to static HTML files.

Key Technologies

  • React Email: Core library for building email templates with React.
  • React: Used for defining the email component structure.
  • @react-email/components: Pre-built components optimized for email clients.
  • @react-email/tailwind: Allows using Tailwind CSS utility classes within email templates.
  • Nodemailer: Node.js library used in index.tsx to send the rendered emails via Resend's SMTP.
  • Zod: Used in index.tsx for validating the recipient email address passed to OPNodemailer.

Relationship to Other Workspaces

Depends On:

  • @op/core: For shared configuration used in sending, specifically APP_NAME and genericEmail used in index.tsx.

  • @op/typescript-config (Dev): Used for TypeScript configuration during development.

Depended On By:

  • Although this package provides the OPNodemailer function for sending emails, no other workspace (like apps/api or @op/trpc) currently appears to import or call this function. It seems the email sending capability is defined but not yet integrated.

Development

  • Run pnpm dev to start the React Email development server and preview email templates in the browser.
  • Run pnpm typecheck to type-check the code.
  • Modify or create new React components in the designated templates directory.