Setting up for pnpm workspaces

1. Create workspace

Create a new folder called transactional inside of where you keep workspace packages (generally ./packages/*) and in there setup a new package.json and do not forget to add this to your pnpm-workspace.yaml.

React Email + Turborepo + pnpm example

See the full source code

2. Install dependencies

Install React Email in the transactional workspace.

packages/transactional

pnpm add @react-email/ui -D -E
pnpm add react-email react react-dom -E

3. Add scripts

Include the following script in your package.json file.

packages/transactional/package.json

{
  // ...
  "scripts": {
    "dev": "email dev"
  }
  // ...
}

4. Write your emails

Create a new folder called emails, create a file inside called email.tsx and add the following example code:

packages/transactional/emails/email.tsx

import { Button, Html, Head, Body } from "react-email";
import * as React from "react";

export default function Email() {
  return (
    <Html>
      <Head />
      <Body>
        <Button
          href="https://example.com"
          style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
        >
          Click me
        </Button>
      </Body>
    </Html>
  );
}

5. Run preview server

Start the email previews development server:

packages/transactional

pnpm dev

6. See changes live

Visit localhost:3000 and edit the emails/email.tsx file to see the changes.

7. Try it yourself

React Email + Turborepo + pnpm example

See the full source code

Setting up for npm workspaces

Setting up for yarn workspaces

​1. Create workspace

React Email + Turborepo + pnpm example

​2. Install dependencies

​3. Add scripts

​4. Write your emails

​5. Run preview server

​6. See changes live

​7. Try it yourself

React Email + Turborepo + pnpm example

1. Create workspace

2. Install dependencies

3. Add scripts

4. Write your emails

5. Run preview server

6. See changes live

7. Try it yourself