mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
113 lines
2.0 KiB
Plaintext
113 lines
2.0 KiB
Plaintext
---
|
|
title: "Manual Setup"
|
|
sidebarTitle: "Manual Setup"
|
|
description: "Create a brand-new folder with packages powered by React Email."
|
|
"og:image": "https://react.email/static/covers/react-email.png"
|
|
icon: "hammer"
|
|
---
|
|
|
|
import NextSteps from '/snippets/next-steps.mdx'
|
|
|
|
<Note>Are you using monorepos? Then we recommend you follow our [monorepos setup](/getting-started/monorepo-setup/choose-package-manager).</Note>
|
|
|
|
## 1. Install dependencies
|
|
|
|
Install the React Email packages locally.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm install @react-email/ui -D -E
|
|
npm install react-email react react-dom -E
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add @react-email/ui -D -E
|
|
yarn add react-email react react-dom -E
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add @react-email/ui -D -E
|
|
pnpm add react-email react react-dom -E
|
|
```
|
|
|
|
```sh bun
|
|
bun add @react-email/ui -D -E
|
|
bun add react-email react react-dom -E
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## 2. Add scripts
|
|
|
|
Include the following script in your `package.json` file.
|
|
|
|
```json package.json
|
|
{
|
|
"scripts": {
|
|
"email:dev": "email dev"
|
|
}
|
|
}
|
|
```
|
|
|
|
## 3. Write an email template
|
|
|
|
Create a new folder called `emails`, create a file inside called `email.tsx`, and add the following code:
|
|
|
|
```jsx 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>
|
|
);
|
|
}
|
|
```
|
|
|
|
## 4. Run locally
|
|
|
|
Start the development server.
|
|
|
|
<CodeGroup>
|
|
|
|
```sh npm
|
|
npm run email:dev
|
|
```
|
|
|
|
```sh yarn
|
|
yarn email:dev
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm email:dev
|
|
```
|
|
|
|
```sh bun
|
|
bun email:dev
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## 5. See changes live
|
|
|
|
Visit [localhost:3000](http://localhost:3000) and edit `email.tsx` file to see the changes.
|
|
|
|
<Frame>
|
|
<img alt="Local Development" src="/images/manual-setup-dev.png" />
|
|
</Frame>
|
|
|
|
## 6. Next steps
|
|
|
|
<NextSteps/>
|