Email development

Why?

Allows to debug and design emails without sending them to real inbox. This will allow for a quicker debugging loop and prevent you from being tagged as a 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}