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 -D -E
yarn add @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