Skip to content

Commit

Permalink
update manual setup guide
Browse files Browse the repository at this point in the history
  • Loading branch information
gabrielmfern committed Sep 24, 2024
1 parent 87e0cf7 commit 54ecb25
Showing 1 changed file with 24 additions and 21 deletions.
45 changes: 24 additions & 21 deletions apps/docs/getting-started/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,35 @@ 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. Create directory

Create a new folder called `react-email-starter` and initialize a new npm project:

```sh
mkdir react-email-starter
cd react-email-starter
npm init
```

## 2. Install dependencies
## 1. Install dependencies

Install the React Email package locally and a few components.

<CodeGroup>

```sh npm
npm install react-email -D -E
npm install @react-email/components -E
npm install @react-email/components react react-dom -E
```

```sh yarn
yarn add react-email -D -E
yarn add @react-email/components -E
yarn add @react-email/components react react-dom -E
```

```sh pnpm
pnpm add react-email -D -E
pnpm add @react-email/components -E
pnpm add @react-email/components react react-dom -E
```

```sh bun
bun add react-email -D -E
bun add @react-email/components react react-dom -E
```

</CodeGroup>

## 3. Add scripts
## 2. Add scripts

Include the following script in your `package.json` file.

Expand All @@ -55,11 +50,11 @@ Include the following script in your `package.json` file.
}
```

## 4. Include email template
## 3. Write an email template

Create a new folder called `emails`, create a file inside called `index.tsx`, and add the following code:
Create a new folder called `emails`, create a file inside called `my-email.tsx`, and add the following code:

```jsx index.tsx
```jsx emails/my-email.tsx
import { Button, Html } from "@react-email/components";
import * as React from "react";

Expand All @@ -77,7 +72,7 @@ export default function Email() {
}
```

## 5. Run locally
## 4. Run locally

Start the development server.

Expand All @@ -91,16 +86,24 @@ npm run dev
yarn dev
```

```sh yarn
pnpm dev
```

```sh yarn
bun dev
```

</CodeGroup>

## 6. See changes live
## 5. See changes live

Visit [localhost:3000](http://localhost:3000) and edit the `index.tsx` file to see the changes.

<Frame>
<img alt="Local Development" src="/images/local-dev.jpg" />
</Frame>

## 7. Next steps
## 6. Next steps

<NextSteps/>

0 comments on commit 54ecb25

Please sign in to comment.