mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
95 lines
2.1 KiB
Plaintext
95 lines
2.1 KiB
Plaintext
---
|
|
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. Install dependencies
|
|
|
|
Install React Email to the `transactional` workspace.
|
|
|
|
```sh packages/transactional
|
|
bun add @react-email/ui -D -E
|
|
bun add react-email react react-dom -E
|
|
```
|
|
|
|
## 3. Add scripts
|
|
|
|
Include the following script in your `package.json` file.
|
|
|
|
```json packages/transactional/package.json
|
|
{
|
|
// ...
|
|
"scripts": {
|
|
"dev": "email dev"
|
|
}
|
|
// ...
|
|
}
|
|
```
|
|
|
|
## 4. Write your emails
|
|
|
|
Create a new folder called `emails`, create a file inside called `email.tsx` and add the following example code:
|
|
|
|
```jsx packages/transactional/emails/email.tsx
|
|
import { Button, Html, Head, Body } from "react-email";
|
|
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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 5. Run preview server
|
|
|
|
Start the email previews development server:
|
|
|
|
```sh packages/transactional
|
|
bun dev
|
|
```
|
|
|
|
## 6. See changes live
|
|
|
|
Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.tsx` file to see the changes.
|
|
|
|
<Frame>
|
|
<img alt="Local Development" src="/images/manual-setup-dev.png" />
|
|
</Frame>
|
|
|
|
## 7. 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>
|