Skip to content

Commit 2705e83

Browse files
committed
feat(docs): A few minor tweaks on the email dev section
1 parent c04ba40 commit 2705e83

File tree

1 file changed

+24
-14
lines changed

1 file changed

+24
-14
lines changed

apps/docs/cli.mdx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ icon: 'square-terminal'
88

99
## `email dev`
1010

11-
Starts a local development server that will watch your files and automatically rebuild your email when you make changes.
11+
Starts a local development server that will watch your files and automatically rebuild
12+
your email template when you make changes.
1213

1314
### Where can I place my static files for previewing?
1415

@@ -22,7 +23,7 @@ This does adjust to your `--dir` option, so if your `emails` directory was insid
2223
`./src/emails`, you would place your static files inside `./src/emails/static`.
2324

2425
These static files are directly served from our preview server by looking into the
25-
requests made into that end with `/static` (i.e. `http://localhost:3000/static/...`) and serving the files at that point,
26+
requests made into it that end with `/static` (i.e. `http://localhost:3000/static/...`) and serving the files at that point,
2627
this also allows for you to have images inside your emails like so:
2728

2829
```jsx
@@ -38,12 +39,11 @@ export default Email(props) {
3839
<Info>
3940
This does not mean your images are hosted for you to send the emails.
4041

41-
If you do send the rendered email, and you are trying to link to an image
42-
or something similar inside `emails/static`, they will not load properly on the email.
43-
</Info>
42+
If you do send the rendered email, and you are trying to link to an image,
43+
or some other asset inside `emails/static`, they will not load on the email that was sent.
4444

45-
Of curse, more often than not you will need to host your images on a CDN, so we recommend
46-
you change the `src` to the CDN's base URL based on the environment like:
45+
We recommend that you use a different source link to your files depending on whether you're
46+
running in production or not. Here's an example
4747

4848
```jsx
4949
const baseURL = process.env.NODE_ENV === 'production'
@@ -58,15 +58,16 @@ export default Email(props) {
5858
)
5959
}
6060
```
61-
62-
You can refer to our [demo emails source code](https://demo.react.email/preview/vercel-invite-user.tsx?view=source) for an example of how we do this.
61+
You can refer to our [demo emails source code](https://demo.react.email/preview/vercel-invite-user.tsx?view=source)
62+
for an example of how we do this with our demo deploy on Vercel.
63+
</Info>
6364

6465
### How can I define props specific to the email's preview?
6566

6667
Considering that you are already default exporting the React component
6768
that will render as your email template, you can just define a `PreviewProps` with it as follows:
6869

69-
```jsx
70+
```jsx Email template
7071
export default Email(props) {
7172
return (
7273
<div>
@@ -81,14 +82,21 @@ Email.PreviewProps = {
8182
```
8283

8384
And then when opening this email's preview the `PreviewProps`
84-
will be used as props into Email.
85+
will be used as props into Email. So, in a nutshell, it will render the same as if you were to do:
86+
87+
```jsx Another file
88+
import Email from './path-to-my-email';
89+
90+
<Email {...Email.PreviewProps} />
91+
```
8592

8693
### How to make the preview server ignore directories?
8794

8895
Once the preview server has started and is now open on `localhost`, the preview server
8996
reads recursively down into all of your files and directories. This can be disabled
90-
from a directory down by prefixing it with `_`, e.g. `components -> _components`. So if you wanted
91-
to make components for your emails, you could make a structure as follows:
97+
from a directory down by prefixing it with `_`, e.g. `components -> _components`.
98+
99+
So if you wanted to make components for your emails, you could have a file structure as follows:
92100

93101
```bash
94102
my-project
@@ -101,13 +109,15 @@ my-project
101109
└── tsconfig.json
102110
```
103111

112+
Then the only file that will be shown on the preview server is going to be your `email.tsx`.
113+
104114
### The heuristics for files to be considered emails
105115

106116
To avoid uncanny files appearing in the sidebar of the preview server,
107117
we account for two heuristics to determine weather or not we should
108118
include it:
109119

110-
1. If file has `.js, .jsx or .tsx` file extensions
120+
1. If a file has `.js, .jsx or .tsx` as their file extension
111121
2. If the file contains a `export default` expression by matching with the regex<br/>
112122
`/\bexport\s*default\b/gm`
113123

0 commit comments

Comments
 (0)