@@ -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
2425These 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,
2627this 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
4949const 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
6667Considering that you are already default exporting the React component
6768that will render as your email template, you can just define a ` PreviewProps ` with it as follows:
6869
69- ``` jsx
70+ ``` jsx Email template
7071export default Email (props) {
7172 return (
7273 < div>
@@ -81,14 +82,21 @@ Email.PreviewProps = {
8182```
8283
8384And 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
8895Once the preview server has started and is now open on ` localhost ` , the preview server
8996reads 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
94102my-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
106116To avoid uncanny files appearing in the sidebar of the preview server,
107117we account for two heuristics to determine weather or not we should
108118include 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
1111212 . If the file contains a ` export default ` expression by matching with the regex<br />
112122` /\bexport\s*default\b/gm `
113123
0 commit comments