@@ -8,7 +8,8 @@ icon: 'square-terminal'
8
8
9
9
## ` email dev `
10
10
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.
12
13
13
14
### Where can I place my static files for previewing?
14
15
@@ -22,7 +23,7 @@ This does adjust to your `--dir` option, so if your `emails` directory was insid
22
23
` ./src/emails ` , you would place your static files inside ` ./src/emails/static ` .
23
24
24
25
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,
26
27
this also allows for you to have images inside your emails like so:
27
28
28
29
``` jsx
@@ -38,12 +39,11 @@ export default Email(props) {
38
39
<Info >
39
40
This does not mean your images are hosted for you to send the emails.
40
41
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.
44
44
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
47
47
48
48
``` jsx
49
49
const baseURL = process .env .NODE_ENV === ' production'
@@ -58,15 +58,16 @@ export default Email(props) {
58
58
)
59
59
}
60
60
```
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 >
63
64
64
65
### How can I define props specific to the email's preview?
65
66
66
67
Considering that you are already default exporting the React component
67
68
that will render as your email template, you can just define a ` PreviewProps ` with it as follows:
68
69
69
- ``` jsx
70
+ ``` jsx Email template
70
71
export default Email (props) {
71
72
return (
72
73
< div>
@@ -81,14 +82,21 @@ Email.PreviewProps = {
81
82
```
82
83
83
84
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
+ ```
85
92
86
93
### How to make the preview server ignore directories?
87
94
88
95
Once the preview server has started and is now open on ` localhost ` , the preview server
89
96
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:
92
100
93
101
``` bash
94
102
my-project
@@ -101,13 +109,15 @@ my-project
101
109
└── tsconfig.json
102
110
```
103
111
112
+ Then the only file that will be shown on the preview server is going to be your ` email.tsx ` .
113
+
104
114
### The heuristics for files to be considered emails
105
115
106
116
To avoid uncanny files appearing in the sidebar of the preview server,
107
117
we account for two heuristics to determine weather or not we should
108
118
include it:
109
119
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
111
121
2 . If the file contains a ` export default ` expression by matching with the regex<br />
112
122
` /\bexport\s*default\b/gm `
113
123
0 commit comments