Email development

Why?

Allows to debug and design emails without sending them to real inbox. This will allows quicker debug loop and prevent you to be tag as spammer by your STMP because it's hard to do nice styles without sending a lot of emails 😅.

How?

Maildev to catch emails

In development, the emails will not be sent and will be catched by maildev (opens in a new tab).

The maildev UI is available at 0.0.0.0:1080 (opens in a new tab).

Preview emails

Emails templates are built with react-email components in the src/emails folder.

You can preview an email template at http://localhost:3000/devtools/email/{template} where {template} is the name of the template file in the src/emails/templates folder.

Example: Login Code (opens in a new tab)

Email translation preview

Add the language in the preview url http://localhost:3000/devtools/email/{template}/{language} where {language} is the language key (en, fr, ...)

Email props preview

You can add search params to the preview url to pass as props to the template. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}