Emails

Emails are all sent over SMTP using nodemailer (opens in a new tab). The content of the emails themselves are implemented directly in your app using react-email (opens in a new tab). This approach is extremely agile as it allows you to design and send emails directly in your app without depending on the implementation of any specific email provider.

If you've ever designed HTML email templates, you'll be aware of how painful it can be given the lack of modern CSS features like flexbox. As having your email templates live in an email provider's web app rather than your app code means having to publish any updates to them in time with your app releases, which slows you down.

SMTP_HOST=
SMTP_PORT=
SMTP_USERNAME=
SMTP_PASSWORD=
EMAIL_FROM=

Sending emails

All emails are sent in the app/services/email/email.server.ts file. If you're sending a new email template, it should be added here for consistency

The components that drive the email contents are regular React components that live in the app/emails directory. There are already a few examples to get you started such as password-reset-template.tsx, user-invited-to-organization-template.tsx and verify-email-template.tsx.

Sending an email is just a case of calling the render() method from react-email with the contents of a react-email template

const subject = 'Welcome to Launchway'
const html = render(WelcomeEmailTemplate({ email }))
sendMail({ to, subject, html })

Designing emails

react-email has a great live editor that loads the contents of your email templates directory (app/emails) so you can preview changes to the templates without having to send emails. There's a preconfigured command in the package.json to get this running

npm run email:dev