Documentation
The Packages Directory
Transactional Folder

The packages/transactional folder

The packages/transactional folder contains the email templates for transactional emails used throughout the application. It leverages React Email (opens in a new tab) to create custom styled email templates directly within the codebase.

  1. Design emails using React components
  2. Easily update and version control email templates
  3. Use TypeScript for type-safe email templates

Defining email templates within the codebase allows for much easies management and testing of your templates. It makes transactional emails so much easier to develop and you dont have to rely on external online platforms like i.e. Postmark.

đź’ˇ

React Email (opens in a new tab) is a framework for building responsive email templates using React components. It provides a familiar development experience for React developers and ensures consistency across different email clients.

Usage

Other packages in the monorepo can import these email components and use React Email's render method to convert them to simple HTML strings. These strings can then be passed into AWS SES to send out transactional emails from any place in the codebase.

Available Example Templates

Blitzship already comes with two example templates for you to use as a starting point.

  • CheckoutCompleted.tsx: This template is sent to customers after a successful checkout.
  • SignInVerification.tsx: This template is used for email verification during the sign-in process.

Testing and Development

You can test and visually inspect your email templates using the React Email preview functionality. To run the development server:

  1. Navigate to the transactional package directory
  2. Run the following command: pnpm run dev

This command starts a local server on port 5001. You can then view and interact with your email templates in your browser, making it easier to design and refine them.

Schemas Folder