Setting Up React Email in a Monorepo: A Complete Guide for 2025

Managing email templates in a growing project can get messy fast. Let's solve this by setting up React Email in a monorepo. This guide will show you how to organize your email templates efficiently using npm workspaces.

What is a Monorepo and Why Use It for Email Templates?

A monorepo keeps all your code in one place - like having all your tools in a single toolbox. For email templates, this means you can:

• Share components between different types of emails

• Keep all your email code organized in one spot

• Test changes across all your templates at once

• Deploy updates more easily

Setting Up Your Monorepo

First, let's create our project structure:

1mkdir email-templates-monorepo
2cd email-templates-monorepo
3npm init -y

Now, let's set up npm workspaces. Open your package.json and add:

1{
2  "name": "email-templates-monorepo",
3  "workspaces": ["packages/*"]
4}

Creating Your Email Package

Let's set up the package for your email templates:

1mkdir -p packages/transactional
2cd packages/transactional
3npm init -y

Install the necessary dependencies:

1npm install @react-email/components react react-dom
2
3

Writing Your First Email Template

Create a new template in packages/transactional/emails/WelcomeEmail.tsx:

1mkdir -p packages/shared
2cd packages/shared
3npm init -y

Setting Up the Preview Server

Add this to your packages/transactional/package.json:

1{
2  "scripts": {
3    "dev": "email dev",
4    "export": "email export"
5  }
6}

Start the preview server:

1npm run dev

Organizing Your Templates

Here's a recommended structure for your monorepo:

1email-templates-monorepo/
2├── packages/
3│   ├── transactional/
4│   │   ├── emails/
5│   │   │   ├── WelcomeEmail.tsx
6│   │   │   ├── PasswordReset.tsx
7│   │   │   └── OrderConfirmation.tsx
8│   │   └── package.json
9│   └── marketing/
10│       ├── emails/
11│       │   ├── Newsletter.tsx
12│       │   └── Promotion.tsx
13│       └── package.json
14└── package.json

Sharing Components Between Templates

Create a shared components package:

1mkdir -p packages/shared
2cd packages/shared
3npm init -y

Example shared button component:

1// packages/shared/components/Button.tsx
2
3import * as React from "react"
4
5export const Button = ({ children, ...props }) => {
6  return (
7    <button
8      style={{
9        padding: "12px 20px",
10        borderRadius: "4px",
11        background: "#007bff",
12        color: "white",
13        border: "none",
14      }}
15      {...props}
16    >
17      {children}
18    </button>
19  )
20}

Testing Your Email Templates

React Email makes testing simple. Just visit http://localhost:3000 to see your templates. You can preview how they'll look in different email clients and on different devices.

Best Practices for Monorepo Email Templates

1. Keep shared components in a separate package

2. Use TypeScript for better type safety

3. Maintain consistent styling across templates

4. Document your components well

5. Set up proper version control for your packages

Next Steps

Now that your monorepo is set up, you can:

• Add more email templates

• Create shared components

• Set up continuous integration

• Add testing with Jest

• Implement a design system

With this setup, you're ready to manage email templates efficiently in your growing project. Happy coding!