mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
feat(docs): Monorepos Setup (#1096)
Co-authored-by: Zeno Rocha <zno.rocha@gmail.com>
This commit is contained in:
Gabriel Miranda
@@ -18,3 +18,4 @@ Try adding these other components to your email.
|
||||
A preview text that will be displayed in the inbox of the recipient.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
|
||||
@@ -6,6 +6,8 @@ description: 'Add React Email to any JavaScript or TypeScript project in minutes
|
||||
icon: 'download'
|
||||
---
|
||||
|
||||
<Note>Using monorepos? Then, we recommend following the [monorepo setup](/getting-started/monorepo-setup/choose-package-manager).</Note>
|
||||
|
||||
## 1. Install
|
||||
|
||||
We recommend using `create-email`, which sets up everything automatically for you.
|
||||
|
||||
@@ -6,7 +6,7 @@ description: "Create a brand-new folder with packages powered by React Email."
|
||||
icon: "hammer"
|
||||
---
|
||||
|
||||
import NextSteps from "../snippets/next-steps.mdx";
|
||||
<Note>Are you using monoorepos? Then we recommend you follow our [monorepos setup](/getting-started/monorepo-setup/choose-package-manager).</Note>
|
||||
|
||||
## 1. Create directory
|
||||
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: 'Setting up for bun workspaces'
|
||||
sidebarTitle: 'bun'
|
||||
description: 'Configure React Email on a bun monorepo'
|
||||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||||
---
|
||||
|
||||
## 1. Create 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 + bun example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-bun-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
|
||||
## 2. Add the preview client to your workspaces
|
||||
|
||||
Currently, for React Email to work properly with bun's workspaces, you will need to add
|
||||
the preview client's folder to the workspaces as follows:
|
||||
|
||||
```json package.json
|
||||
{
|
||||
// ...
|
||||
"workspaces": ["packages/*", "packages/transactional/.react-email"],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Install dependencies
|
||||
|
||||
Install React Email to the `transactional` workspace.
|
||||
|
||||
```sh packages/transactional
|
||||
bun add react-email @react-email/components -E
|
||||
```
|
||||
|
||||
## 4. Add scripts
|
||||
|
||||
Include the following script in your `package.json` file.
|
||||
|
||||
```json packages/transactional/package.json
|
||||
{
|
||||
// ...
|
||||
"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:
|
||||
|
||||
```jsx 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;
|
||||
```
|
||||
|
||||
## 6. Run preview server
|
||||
|
||||
Start the email previews development server:
|
||||
|
||||
```sh packages/transactional
|
||||
bun dev
|
||||
```
|
||||
|
||||
## 7. See changes live
|
||||
|
||||
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
|
||||
|
||||
<Frame>
|
||||
<img alt="Local Development" src="/images/local-dev.png" />
|
||||
</Frame>
|
||||
|
||||
## 8. Try it yourself
|
||||
|
||||
<Card
|
||||
title="React Email + Turborepo + bun example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-bun-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: 'Monorepo setup'
|
||||
sidebarTitle: 'bun'
|
||||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||||
---
|
||||
|
||||
What package manager are you using?
|
||||
|
||||
<CardGroup>
|
||||
<Card icon="arrow-up-right-from-square" title="npm" href="/getting-started/monorepo-setup/npm">
|
||||
See a manual setup guide specific for npm
|
||||
</Card>
|
||||
<Card icon="arrow-up-right-from-square" title="pnpm" href="/getting-started/monorepo-setup/pnpm">
|
||||
See a manual setup guide specific for pnpm
|
||||
</Card>
|
||||
<Card icon="arrow-up-right-from-square" title="yarn" href="/getting-started/monorepo-setup/yarn">
|
||||
See a manual setup guide specific for yarn
|
||||
</Card>
|
||||
<Card icon="arrow-up-right-from-square" title="bun" href="/getting-started/monorepo-setup/bun">
|
||||
See a manual setup guide specific for bun
|
||||
</Card>
|
||||
</CardGroup>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: 'Setting up for npm workspaces'
|
||||
sidebarTitle: 'npm'
|
||||
description: 'Configure React Email on a npm monorepo'
|
||||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||||
---
|
||||
|
||||
## 1. Create 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 + npm example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-npm-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
|
||||
## 2. Add the preview client to your workspaces
|
||||
|
||||
Currently, for React Email to work properly with npm's workspaces, you will need to add
|
||||
the preview client's folder to the workspaces as follows:
|
||||
|
||||
```json package.json
|
||||
{
|
||||
// ...
|
||||
"workspaces": ["packages/*", "packages/transactional/.react-email"],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Install dependencies
|
||||
|
||||
Install React Email in the `transactional` workspace.
|
||||
|
||||
```sh packages/transactional
|
||||
npm install react-email @react-email/components -E
|
||||
```
|
||||
|
||||
## 4. Add scripts
|
||||
|
||||
Include the following script in your `package.json` file.
|
||||
|
||||
```json packages/transactional/package.json
|
||||
{
|
||||
// ...
|
||||
"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:
|
||||
|
||||
```jsx 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;
|
||||
```
|
||||
|
||||
## 6. Run preview server
|
||||
|
||||
Start the email previews development server:
|
||||
|
||||
```sh packages/transactional
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 7. See changes live
|
||||
|
||||
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
|
||||
|
||||
<Frame>
|
||||
<img alt="Local Development" src="/images/local-dev.png" />
|
||||
</Frame>
|
||||
|
||||
## 8. Try it yourself
|
||||
|
||||
<Card
|
||||
title="React Email + Turborepo + npm example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-npm-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: 'Setting up for pnpm workspaces'
|
||||
sidebarTitle: 'pnpm'
|
||||
description: 'Configure React Email on a pnpm monorepo'
|
||||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||||
---
|
||||
|
||||
## 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`.
|
||||
|
||||
<Card
|
||||
title="React Email + Turborepo + pnpm example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-pnpm-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
|
||||
## 2. Add the preview client to your workspaces
|
||||
|
||||
Currently, for React Email to work properly with pnpm, you will need to add
|
||||
the preview client's folder to the workspaces as follows:
|
||||
|
||||
```yaml pnpm-workspace.yaml
|
||||
packages:
|
||||
- "packages/transactional/.react-email"
|
||||
- "packages/*"
|
||||
```
|
||||
|
||||
## 3. Install dependencies
|
||||
|
||||
Install React Email in the `transactional` workspace.
|
||||
|
||||
```sh packages/transactional
|
||||
pnpm add react-email @react-email/components -E
|
||||
```
|
||||
|
||||
## 4. Add scripts
|
||||
|
||||
Include the following script in your `package.json` file.
|
||||
|
||||
```json packages/transactional/package.json
|
||||
{
|
||||
// ...
|
||||
"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:
|
||||
|
||||
```jsx 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;
|
||||
```
|
||||
|
||||
## 6. Run preview server
|
||||
|
||||
Start the email previews development server:
|
||||
|
||||
```sh packages/transactional
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## 7. See changes live
|
||||
|
||||
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
|
||||
|
||||
<Frame>
|
||||
<img alt="Local Development" src="/images/local-dev.png" />
|
||||
</Frame>
|
||||
|
||||
## 8. Try it yourself
|
||||
|
||||
<Card
|
||||
title="React Email + Turborepo + pnpm example"
|
||||
icon="arrow-up-right-from-square"
|
||||
href="https://github.com/resend/react-email-turborepo-pnpm-example"
|
||||
>
|
||||
See the full source code
|
||||
</Card>
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: 'Setting up for yarn workspaces'
|
||||
sidebarTitle: 'yarn'
|
||||
description: 'Configure React Email on a yarn monorepo'
|
||||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||||
---
|
||||
|
||||
<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](https://yarnpkg.com/features/linkers)
|
||||
so you will need to set it to one of these two on your `.yarnrc.yml` file:
|
||||
|
||||
```yml .yarnrc.yml
|
||||
nodeLinker: node-modules
|
||||
```
|
||||
|
||||
## 3. Add the preview client to your workspaces
|
||||
|
||||
Currently, for React Email to work properly with yarn, you will need to add
|
||||
the preview client's folder to the workspaces as follows:
|
||||
|
||||
```json package.json
|
||||
{
|
||||
// ...
|
||||
"workspaces": ["packages/*", "packages/transactional/.react-email"],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## 4. Install dependencies
|
||||
|
||||
Install React Email in the `transactional` workspace.
|
||||
|
||||
```sh packages/transactional
|
||||
yarn add react-email @react-email/components -E
|
||||
```
|
||||
|
||||
## 5. Add scripts
|
||||
|
||||
Include the following script in your `package.json` file.
|
||||
|
||||
```json packages/transactional/package.json
|
||||
{
|
||||
// ...
|
||||
"scripts": {
|
||||
"dev": "email dev"
|
||||
}
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## 6. Write your emails
|
||||
|
||||
Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:
|
||||
|
||||
```jsx 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;
|
||||
```
|
||||
|
||||
## 7. Run preview server
|
||||
|
||||
Start the email previews development server:
|
||||
|
||||
```sh packages/transactional
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## 8. See changes live
|
||||
|
||||
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
|
||||
|
||||
<Frame>
|
||||
<img alt="Local Development" src="/images/local-dev.png" />
|
||||
</Frame>
|
||||
|
||||
## 9. Try it yourself
|
||||
|
||||
<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>
|
||||
@@ -50,6 +50,16 @@
|
||||
"pages": [
|
||||
"getting-started/automatic-setup",
|
||||
"getting-started/manual-setup",
|
||||
{
|
||||
"group": "Monorepo Setup",
|
||||
"icon": "diagram-project",
|
||||
"pages": [
|
||||
"getting-started/monorepo-setup/npm",
|
||||
"getting-started/monorepo-setup/pnpm",
|
||||
"getting-started/monorepo-setup/yarn",
|
||||
"getting-started/monorepo-setup/bun"
|
||||
]
|
||||
},
|
||||
"getting-started/migrating-to-react-email"
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user