react-email-server

This is a simple proof-of-concept for React Email™, a next-generation mechanism for rendering beautiful emails using React and Typescript.

The server itself is powered by NodeJS, Fastify, and Connect.

Most of this code was pulled from the Connect Node guide, courtesy of the Buf team.

FAQ

Why is this useful?

React Email™ provides a few advantages that can be summarized by their call, "Stop developing emails like 2010":

• Devs feel at home with React.
• We get to bring our own responsive styling (e.g., Tailwind).
• We get a nice gallery to view and manage all our emails for free (kind of like what Storybook did for UI development).
• Client inconsistencies (across Gmail, Outlook, and others) are resolved for us.

How does this project fit into your architecture?

1. An event occurs in your platform (e.g., a new user signed up).
2. Your platform calls this service asking ...
   1. ... for rendered HTML.
   2. ... for an email to be sent.

You can configure email sending capabilities is this service or in this service's caller — it's up to you.

At its most barebones, this service is merely an email rendering API. It's using Resend to send emails, but you could rip that out or swap it to some other email SaaS service. Up to you.

My imagined architecture is that some existing workflow in your platform that's already detecting an event can take two additional steps:

How are emails sent?

React Email provides multiple examples of integrating with 3rd-party email services. You can use any number of services for transactional email:

• Resend
• Nodemailer
• SendGrid
• Postmark
• AWS SES
• MailerSend
• Plunk
• Moosend
• Mailjet
• Mandrill
• Elastic Email
• SparkPost

Why use Resend?

It's built by the same people who maintain React Email, with several nice features:

• Affordable (free up to 3000 emails per month)
• Wide language support (lots of SDKs)
• Send emails with your own domain
• Open and click tracking
• Notifications integrations
• Track bounces and other email events
• Dedicated IPs for improved deliverability / sender reputation
• Multi-region for reduced latency, imporved resilience.

Getting started

Run the server

make start

Viewing the HTML output

curl \
  --header 'Content-Type: application/json' \
  --data '{"options": {"pretty": true}, "args": {"name": "Kevin"}}' \
   http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/CreateWelcomeEmail | jq -r '.html' > output.html

open output.html

Sending an email

For email sending capabilities, you'll need to sign up with Resend, configure your own domain (optional), acquire an API key, create a new .env file (in the model of .env.example), and finally, restart the NodeJS server.

If you don't have your own domain, omit the .options.from field from the request.

Send a Stripe Welcome email

(
cat << EOF
{
  "options": {
    "from": "me@kchen.io",
    "to": ["kevinmichaelchen@gmail.com"],
    "subject": "Welcome to the Platform",
    "tags": [
      {
        "name": "email_name",
        "value": "welcome_email"
      },
      {
        "name": "user_id",
        "value": "123"
      }
    ]
  },
  "args": {
    "name": "Kevin"
  }
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendWelcomeEmail

Send an AirBnB Review email

(
cat << EOF
{
  "options": {
    "from": "me@kchen.io",
    "to": ["kevinmichaelchen@gmail.com"],
    "subject": "Welcome to the Platform",
    "tags": [
      {
        "name": "email_name",
        "value": "welcome_email"
      },
      {
        "name": "user_id",
        "value": "123"
      }
    ]
  },
  "args": {
    "author_name": "Kevin",
    "review_text": "Apartment was kind of dirty, not gonna lie"
  }
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendReviewEmail

Send an Apple Receipt email

(
cat << EOF
{
  "options": {
    "from": "me@kchen.io",
    "to": ["kevinmichaelchen@gmail.com"],
    "subject": "Welcome to the Platform",
    "tags": [
      {
        "name": "email_name",
        "value": "welcome_email"
      },
      {
        "name": "user_id",
        "value": "123"
      }
    ]
  },
  "args": {}
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendReceiptEmail