Skip to content

Commit 1900aba

Browse files
gabrielmferngabrielmfern
authored
chore(docs): renovate guides (#2722)
1 parent b703b5d commit 1900aba

File tree

9 files changed

+105
-96
lines changed

9 files changed

+105
-96
lines changed

‎apps/docs/getting-started/automatic-setup.mdx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ yarn create email
2828
pnpm create email
2929
```
3030

31+
```sh bun
32+
bun create email
33+
```
34+
3135
</CodeGroup>
3236

3337
This will create a new folder called `react-email-starter` with a few email templates.
@@ -50,6 +54,10 @@ yarn
5054
pnpm install
5155
```
5256

57+
```sh bun
58+
bun install
59+
```
60+
5361
</CodeGroup>
5462

5563
Then, run the development server:
@@ -68,14 +76,18 @@ yarn dev
6876
pnpm dev
6977
```
7078

79+
```sh bun
80+
bun dev
81+
```
82+
7183
</CodeGroup>
7284

7385
## 3. See changes live
7486

7587
Visit [localhost:3000](http://localhost:3000) and edit any of the files on the `emails` folder to see the changes.
7688

7789
<Frame>
78-
<img alt="Local Development" src="/images/local-dev.jpg" />
90+
<img alt="Local Development" src="/images/automatic-setup-dev.png" />
7991
</Frame>
8092

8193
## 4. Next steps

‎apps/docs/getting-started/manual-setup.mdx‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,110 +10,103 @@ import NextSteps from '/snippets/next-steps.mdx'
1010

1111
<Note>Are you using monorepos? Then we recommend you follow our [monorepos setup](/getting-started/monorepo-setup/choose-package-manager).</Note>
1212

13-
## 1. Create directory
14-
15-
Create a new folder called `react-email-starter` and initialize a new npm project:
16-
17-
```sh
18-
mkdir react-email-starter
19-
cd react-email-starter
20-
npm init
21-
```
22-
23-
## 2. Install dependencies
13+
## 1. Install dependencies
2414

2515
Install the React Email package locally and a few components.
2616

2717
<CodeGroup>
2818

2919
```sh npm
30-
npm install react-email -D -E
20+
npm install react-email @react-email/preview-server -D -E
3121
npm install @react-email/components react react-dom -E
3222
```
3323

3424
```sh yarn
35-
yarn add react-email -D -E
25+
yarn add react-email @react-email/preview-server -D -E
3626
yarn add @react-email/components react react-dom -E
3727
```
3828

3929
```sh pnpm
40-
pnpm add react-email -D -E
30+
pnpm add react-email @react-email/preview-server -D -E
4131
pnpm add @react-email/components react react-dom -E
4232
```
4333

4434
```sh bun
45-
bun add react-email -D -E
35+
bun add react-email @react-email/preview-server -D -E
4636
bun add @react-email/components react react-dom -E
4737
```
4838

4939
</CodeGroup>
5040

51-
## 3. Add scripts
41+
## 2. Add scripts
5242

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

5545
```json package.json
5646
{
5747
"scripts": {
58-
"dev": "email dev"
48+
"email:dev": "email dev"
5949
}
6050
}
6151
```
6252

63-
## 4. Write an email template
53+
## 3. Write an email template
6454

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

67-
```jsx emails/my-email.tsx
68-
import { Button, Html } from "@react-email/components";
57+
```jsx emails/email.tsx
58+
import { Button, Html, Head, Body } from "@react-email/components";
6959
import * as React from "react";
7060

7161
export default function Email() {
7262
return (
7363
<Html>
74-
<Button
75-
href="https://example.com"
76-
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
77-
>
78-
Click me
79-
</Button>
64+
<Head />
65+
<Body>
66+
<Button
67+
href="https://example.com"
68+
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
69+
>
70+
Click me
71+
</Button>
72+
</Body>
8073
</Html>
8174
);
8275
}
8376
```
8477

85-
## 5. Run locally
78+
## 4. Run locally
8679

8780
Start the development server.
8881

8982
<CodeGroup>
9083

9184
```sh npm
92-
npm run dev
85+
npm run email:dev
9386
```
9487

9588
```sh yarn
96-
yarn dev
89+
yarn email:dev
9790
```
9891

9992
```sh pnpm
100-
pnpm dev
93+
pnpm email:dev
10194
```
10295

10396
```sh bun
104-
bun dev
97+
bun email:dev
10598
```
10699

107100
</CodeGroup>
108101

109-
## 6. See changes live
102+
## 5. See changes live
110103

111-
Visit [localhost:3000](http://localhost:3000) and edit the `index.tsx` file to see the changes.
104+
Visit [localhost:3000](http://localhost:3000) and edit `email.tsx` file to see the changes.
112105

113106
<Frame>
114-
<img alt="Local Development" src="/images/local-dev.jpg" />
107+
<img alt="Local Development" src="/images/manual-setup-dev.png" />
115108
</Frame>
116109

117-
## 7. Next steps
110+
## 6. Next steps
118111

119112
<NextSteps/>

‎apps/docs/getting-started/monorepo-setup/bun.mdx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -44,26 +44,27 @@ Include the following script in your `package.json` file.
4444

4545
## 4. Write your emails
4646

47-
Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:
47+
Create a new folder called `emails`, create a file inside called `email.tsx` and add the following example code:
4848

49-
```jsx packages/transactional/emails/MyEmail.tsx
50-
import { Button, Html } from "@react-email/components";
49+
```jsx packages/transactional/emails/email.tsx
50+
import { Button, Html, Head, Body } from "@react-email/components";
5151
import * as React from "react";
5252

53-
export const MyEmail = () => {
53+
export default function Email() {
5454
return (
5555
<Html>
56-
<Button
57-
href="https://example.com"
58-
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
59-
>
60-
Click me
61-
</Button>
56+
<Head />
57+
<Body>
58+
<Button
59+
href="https://example.com"
60+
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
61+
>
62+
Click me
63+
</Button>
64+
</Body>
6265
</Html>
6366
);
6467
}
65-
66-
export default MyEmail;
6768
```
6869

6970
## 5. Run preview server
@@ -76,10 +77,10 @@ bun dev
7677

7778
## 6. See changes live
7879

79-
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
80+
Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.tsx` file to see the changes.
8081

8182
<Frame>
82-
<img alt="Local Development" src="/images/local-dev.jpg" />
83+
<img alt="Local Development" src="/images/manual-setup-dev.png" />
8384
</Frame>
8485

8586
## 7. Try it yourself

‎apps/docs/getting-started/monorepo-setup/npm.mdx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Include a new `package.json` and do not forget to add this to the `workspaces` o
2424
Install React Email in the `transactional` workspace.
2525

2626
```sh packages/transactional
27-
npm install react-email -D -E
27+
npm install react-email @react-email/preview-server -D -E
2828
npm install @react-email/components react react-dom -E
2929
```
3030

@@ -44,26 +44,27 @@ Include the following script in your `package.json` file.
4444

4545
## 4. Write your emails
4646

47-
Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:
47+
Create a new folder called `emails`, create a file inside called `email.tsx` and add the following example code:
4848

49-
```jsx packages/transactional/emails/MyEmail.tsx
50-
import { Button, Html } from "@react-email/components";
49+
```jsx packages/transactional/emails/email.tsx
50+
import { Button, Html, Head, Body } from "@react-email/components";
5151
import * as React from "react";
5252

53-
export const MyEmail = () => {
53+
export default function Email() {
5454
return (
5555
<Html>
56-
<Button
57-
href="https://example.com"
58-
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
59-
>
60-
Click me
61-
</Button>
56+
<Head />
57+
<Body>
58+
<Button
59+
href="https://example.com"
60+
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
61+
>
62+
Click me
63+
</Button>
64+
</Body>
6265
</Html>
6366
);
6467
}
65-
66-
export default MyEmail;
6768
```
6869

6970
## 5. Run preview server
@@ -76,10 +77,10 @@ npm run dev
7677

7778
## 6. See changes live
7879

79-
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
80+
Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.tsx` file to see the changes.
8081

8182
<Frame>
82-
<img alt="Local Development" src="/images/local-dev.jpg" />
83+
<img alt="Local Development" src="/images/manual-setup-dev.png" />
8384
</Frame>
8485

8586
## 7. Try it yourself

‎apps/docs/getting-started/monorepo-setup/pnpm.mdx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ in there setup a new `package.json` and do not forget to add this to your `pnpm-
2323
Install React Email in the `transactional` workspace.
2424

2525
```sh packages/transactional
26-
pnpm add react-email -D -E
26+
pnpm add react-email @react-email/preview-server -D -E
2727
pnpm add @react-email/components react react-dom -E
2828
```
2929

@@ -43,26 +43,27 @@ Include the following script in your `package.json` file.
4343

4444
## 4. Write your emails
4545

46-
Create a new folder called `emails`, create a file inside called `MyEmail.tsx` and add the following example code:
46+
Create a new folder called `emails`, create a file inside called `email.tsx` and add the following example code:
4747

48-
```jsx packages/transactional/emails/MyEmail.tsx
49-
import { Button, Html } from "@react-email/components";
48+
```jsx packages/transactional/emails/email.tsx
49+
import { Button, Html, Head, Body } from "@react-email/components";
5050
import * as React from "react";
5151

52-
export const MyEmail = () => {
52+
export default function Email() {
5353
return (
5454
<Html>
55-
<Button
56-
href="https://example.com"
57-
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
58-
>
59-
Click me
60-
</Button>
55+
<Head />
56+
<Body>
57+
<Button
58+
href="https://example.com"
59+
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
60+
>
61+
Click me
62+
</Button>
63+
</Body>
6164
</Html>
6265
);
6366
}
64-
65-
export default MyEmail;
6667
```
6768

6869
## 5. Run preview server
@@ -75,10 +76,10 @@ pnpm dev
7576

7677
## 6. See changes live
7778

78-
Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes.
79+
Visit [localhost:3000](http://localhost:3000) and edit the `emails/email.tsx` file to see the changes.
7980

8081
<Frame>
81-
<img alt="Local Development" src="/images/local-dev.jpg" />
82+
<img alt="Local Development" src="/images/manual-setup-dev.png" />
8283
</Frame>
8384

8485
## 7. Try it yourself

0 commit comments

Comments
 (0)