Setting up for yarn workspaces

<Note> This is a guide intended at users of [yarn modern](https://yarnpkg.com/getting-started/qa#why-should-you-upgrade-to-yarn-modern). For those who are using [yarn classic](https://www.npmjs.com/package/yarn) (`1.x`), you can do something similar to the [pnpm guide](/getting-started/monorepo-setup/pnpm). </Note>

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.

<Card title="React Email + Turborepo + yarn example" icon="arrow-up-right-from-square" href="https://github.com/resend/react-email-turborepo-yarn-example"

See the full source code </Card>

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:

yml

nodeLinker: node-modules

3. Install dependencies

Install React Email in the transactional workspace.

yarn add react-email @react-email/preview-server -D -E
yarn add @react-email/components react react-dom -E

4. Add scripts

Include the following script in your package.json file.

json

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

5. Write your emails

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

jsx

import { Button, Html, Head, Body } from "@react-email/components";
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>
  );
}

6. Run preview server

Start the email previews development server:

yarn dev

7. See changes live

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

8. Try it yourself