Skip to content

Commit edd78ce

Browse files
committed
feat(docs): Add extra information on the email dev seciton of the cli page
1 parent ed2dc39 commit edd78ce

File tree

1 file changed

+57
-1
lines changed

1 file changed

+57
-1
lines changed

β€Žapps/docs/cli.mdxβ€Ž

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,63 @@ icon: 'square-terminal'
1010

1111
Starts a local development server that will watch your files and automatically rebuild your email when you make changes.
1212

13-
**Options**
13+
### Where can I place my static files for previewing
14+
15+
Almost always you will need to have static files in your emails, and seeing
16+
them on the preview server without having to first host on a CDN is very helpful.
17+
18+
We do allow for this, and currently, you can place your files inside of a `static`
19+
directory inside of your `emails` directory.
20+
21+
This does adjust to your `--dir` option, so if your `emails` directory was inside
22+
of `./src/emails`, you would place your static files inside of `./src/emails/static`.
23+
24+
These static files are directly served from our preview server by looking into the
25+
requests made into that end with `/static` and serving the files at that point,
26+
this also allows for you to have images inside of your emails like so:
27+
28+
```jsx
29+
export default Email(props) {
30+
return (
31+
<div>
32+
<img src="/static/email-logo.png" />
33+
</div>
34+
)
35+
}
36+
```
37+
38+
### How to make the preview server ignore directories
39+
40+
Once the preview server has started and is now open on `localhost`, the preview server
41+
reads recursively down into all of your files and directories. This can be disabled
42+
from a directory down by prefixing it with `_`, e.g. `components -> _components`. So if you wanted
43+
to make components for your emails, you could make a structure as follows:
44+
45+
```bash
46+
my-project
47+
β”œβ”€β”€ emails
48+
β”‚ β”œβ”€β”€ _components
49+
β”‚ β”‚ └── this-is-not-going-to-appear-in-the-sidebar.tsx
50+
β”‚ β”œβ”€β”€ email.tsx
51+
β”‚ └── static
52+
β”œβ”€β”€ package.json
53+
└── tsconfig.json
54+
```
55+
56+
### The heuristics for files to be considered emails
57+
58+
To avoid uncanny files appearing in the sidebar of the preview server,
59+
we account for two heuristics to determine weather or not we should
60+
include it:
61+
62+
1. If file has `.js, .jsx or .tsx` file extensions
63+
2. If the file contains a `export default` expression by matching with the regex <br/>
64+
`/\bexport\s*default\b/gm`
65+
66+
These can certainly fail as they are only heuristics, so if you do find
67+
any issues with these, feel free to open an [issue](https://github.com/resend/react-email/issues).
68+
69+
### Options
1470

1571
<ResponseField name="--dir" type="string" default="emails">
1672
Change the directory of your email templates.

0 commit comments

Comments
Β (0)