Monorepo Setup
Setting up for pnpm workspaces
Configure React Email on a pnpm monorepo
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 -D -E
pnpm add @react-email/components -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 MyEmail.tsx
and add the following example code:
packages/transactional/emails/MyEmail.tsx
import { Button, Html } from "@react-email/components";
import * as React from "react";
export const MyEmail = () => {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Html>
);
}
export default MyEmail;
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/MyEmail.tsx
file to see the changes.
7. Try it yourself
React Email + Turborepo + pnpm example
See the full source code