Setting up for yarn workspaces
Configure React Email on a yarn monorepo
This is a guide intended at users of yarn modern.
For those who are using yarn classic (1.x), you can do something similar to the
pnpm guide.
1. Create transactional workspace
Create a new folder called transactional inside of where you keep workspace packages (generally ./packages/*).
Include a new package.json and do not forget to add this to the workspaces of your monorepo’s package.json.
React Email + Turborepo + yarn example
See the full source code
2. Set linker either to node-modules or to pnpm
Currently, React Email can only work with yarn’s node-modules and pnpm install modes
so you will need to set it to one of these two on your .yarnrc.yml file:
nodeLinker: node-modules
3. Install dependencies
Install React Email in the transactional workspace.
yarn add react-email @react-email/components -E
4. Add scripts
Include the following script in your package.json file.
{
// ...
"scripts": {
"dev": "email dev"
}
// ...
}
5. Write your emails
Create a new folder called emails, create a file inside called MyEmail.tsx and add the following example code:
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;
6. Run preview server
Start the email previews development server:
yarn dev
7. See changes live
Visit localhost:3000 and edit the emails/MyEmail.tsx file to see the changes.
8. Try it yourself
React Email + Turborepo + yarn example
See the full source code