diff --git a/apps/docs/getting-started/automatic-setup.mdx b/apps/docs/getting-started/automatic-setup.mdx index 16a7d2e804..667fe2a7a6 100644 --- a/apps/docs/getting-started/automatic-setup.mdx +++ b/apps/docs/getting-started/automatic-setup.mdx @@ -28,6 +28,10 @@ yarn create email pnpm create email ``` +```sh bun +bun create email +``` + This will create a new folder called `react-email-starter` with a few email templates. @@ -50,6 +54,10 @@ yarn pnpm install ``` +```sh bun +bun install +``` + Then, run the development server: @@ -68,6 +76,10 @@ yarn dev pnpm dev ``` +```sh bun +bun dev +``` + ## 3. See changes live @@ -75,7 +87,7 @@ pnpm dev Visit [localhost:3000](http://localhost:3000) and edit any of the files on the `emails` folder to see the changes. - Local Development + Local Development ## 4. Next steps diff --git a/apps/docs/getting-started/manual-setup.mdx b/apps/docs/getting-started/manual-setup.mdx index 066b29fcc4..9bc5dafa4e 100644 --- a/apps/docs/getting-started/manual-setup.mdx +++ b/apps/docs/getting-started/manual-setup.mdx @@ -10,110 +10,103 @@ import NextSteps from '/snippets/next-steps.mdx' Are you using monorepos? Then we recommend you follow our [monorepos setup](/getting-started/monorepo-setup/choose-package-manager). -## 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. ```sh npm -npm install react-email -D -E +npm install react-email @react-email/preview-server -D -E npm install @react-email/components react react-dom -E ``` ```sh yarn -yarn add react-email -D -E +yarn add react-email @react-email/preview-server -D -E yarn add @react-email/components react react-dom -E ``` ```sh pnpm -pnpm add react-email -D -E +pnpm add react-email @react-email/preview-server -D -E pnpm add @react-email/components react react-dom -E ``` ```sh bun -bun add react-email -D -E +bun add react-email @react-email/preview-server -D -E bun add @react-email/components react react-dom -E ``` -## 3. Add scripts +## 2. Add scripts Include the following script in your `package.json` file. ```json package.json { "scripts": { - "dev": "email dev" + "email:dev": "email dev" } } ``` -## 4. Write an email template +## 3. Write an email template -Create a new folder called `emails`, create a file inside called `my-email.tsx`, and add the following code: +Create a new folder called `emails`, create a file inside called `email.tsx`, and add the following code: -```jsx emails/my-email.tsx -import { Button, Html } from "@react-email/components"; +```jsx emails/email.tsx +import { Button, Html, Head, Body } from "@react-email/components"; import * as React from "react"; export default function Email() { return ( - + + + + ); } ``` -## 5. Run locally +## 4. Run locally Start the development server. ```sh npm -npm run dev +npm run email:dev ``` ```sh yarn -yarn dev +yarn email:dev ``` ```sh pnpm -pnpm dev +pnpm email:dev ``` ```sh bun -bun dev +bun email:dev ``` -## 6. See changes live +## 5. See changes live -Visit [localhost:3000](http://localhost:3000) and edit the `index.tsx` file to see the changes. +Visit [localhost:3000](http://localhost:3000) and edit `email.tsx` file to see the changes. - Local Development + Local Development -## 7. Next steps +## 6. Next steps diff --git a/apps/docs/getting-started/monorepo-setup/bun.mdx b/apps/docs/getting-started/monorepo-setup/bun.mdx index 08950a2cc0..400c9e7044 100644 --- a/apps/docs/getting-started/monorepo-setup/bun.mdx +++ b/apps/docs/getting-started/monorepo-setup/bun.mdx @@ -46,24 +46,25 @@ Include the following script in your `package.json` file. 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"; +```jsx packages/transactional/emails/email.tsx +import { Button, Html, Head, Body } from "@react-email/components"; import * as React from "react"; -export const MyEmail = () => { +export default function Email() { return ( - + + + + ); } - -export default MyEmail; ``` ## 5. Run preview server @@ -79,7 +80,7 @@ bun dev Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes. - Local Development + Local Development ## 7. Try it yourself diff --git a/apps/docs/getting-started/monorepo-setup/npm.mdx b/apps/docs/getting-started/monorepo-setup/npm.mdx index c553677813..2f64f0857f 100644 --- a/apps/docs/getting-started/monorepo-setup/npm.mdx +++ b/apps/docs/getting-started/monorepo-setup/npm.mdx @@ -24,7 +24,7 @@ Include a new `package.json` and do not forget to add this to the `workspaces` o Install React Email in the `transactional` workspace. ```sh packages/transactional -npm install react-email -D -E +npm install react-email @react-email/preview-server -D -E npm install @react-email/components react react-dom -E ``` @@ -46,24 +46,25 @@ Include the following script in your `package.json` file. 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"; +```jsx packages/transactional/emails/email.tsx +import { Button, Html, Head, Body } from "@react-email/components"; import * as React from "react"; -export const MyEmail = () => { +export default function Email() { return ( - + + + + ); } - -export default MyEmail; ``` ## 5. Run preview server @@ -79,7 +80,7 @@ npm run dev Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes. - Local Development + Local Development ## 7. Try it yourself diff --git a/apps/docs/getting-started/monorepo-setup/pnpm.mdx b/apps/docs/getting-started/monorepo-setup/pnpm.mdx index 66f0cfc1bc..95115b2959 100644 --- a/apps/docs/getting-started/monorepo-setup/pnpm.mdx +++ b/apps/docs/getting-started/monorepo-setup/pnpm.mdx @@ -23,7 +23,7 @@ in there setup a new `package.json` and do not forget to add this to your `pnpm- Install React Email in the `transactional` workspace. ```sh packages/transactional -pnpm add react-email -D -E +pnpm add react-email @react-email/preview-server -D -E pnpm add @react-email/components react react-dom -E ``` @@ -45,24 +45,25 @@ Include the following script in your `package.json` file. 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"; +```jsx packages/transactional/emails/email.tsx +import { Button, Html, Head, Body } from "@react-email/components"; import * as React from "react"; -export const MyEmail = () => { +export default function Email() { return ( - + + + + ); } - -export default MyEmail; ``` ## 5. Run preview server @@ -78,7 +79,7 @@ pnpm dev Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes. - Local Development + Local Development ## 7. Try it yourself diff --git a/apps/docs/getting-started/monorepo-setup/yarn.mdx b/apps/docs/getting-started/monorepo-setup/yarn.mdx index 5869142053..ca5e6c4f17 100644 --- a/apps/docs/getting-started/monorepo-setup/yarn.mdx +++ b/apps/docs/getting-started/monorepo-setup/yarn.mdx @@ -39,7 +39,7 @@ nodeLinker: node-modules Install React Email in the `transactional` workspace. ```sh packages/transactional -yarn add react-email -D -E +yarn add react-email @react-email/preview-server -D -E yarn add @react-email/components react react-dom -E ``` @@ -61,24 +61,25 @@ Include the following script in your `package.json` file. 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"; +```jsx packages/transactional/emails/email.tsx +import { Button, Html, Head, Body } from "@react-email/components"; import * as React from "react"; -export const MyEmail = () => { +export default function Email() { return ( - + + + + ); } - -export default MyEmail; ``` ## 6. Run preview server @@ -94,7 +95,7 @@ yarn dev Visit [localhost:3000](http://localhost:3000) and edit the `emails/MyEmail.tsx` file to see the changes. - Local Development + Local Development ## 8. Try it yourself diff --git a/apps/docs/images/automatic-setup-dev.png b/apps/docs/images/automatic-setup-dev.png new file mode 100644 index 0000000000..f823f33719 Binary files /dev/null and b/apps/docs/images/automatic-setup-dev.png differ diff --git a/apps/docs/images/local-dev.jpg b/apps/docs/images/local-dev.jpg deleted file mode 100644 index 221d6ce1e8..0000000000 Binary files a/apps/docs/images/local-dev.jpg and /dev/null differ diff --git a/apps/docs/images/manual-setup-dev.png b/apps/docs/images/manual-setup-dev.png new file mode 100644 index 0000000000..8bf44223ae Binary files /dev/null and b/apps/docs/images/manual-setup-dev.png differ