Skip to content

A gRPC / HTTP API to Render Beautiful React-based HTML Emails. Powered by React Email, NodeJS, Fastify, and Connect-Node 📫

Notifications You must be signed in to change notification settings

kevinmichaelchen/react-email-server

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Screenshot of React Email UI

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:

Screenshot of Potential Architecture

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:

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": "[email protected]",
    "to": ["[email protected]"],
    "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": "[email protected]",
    "to": ["[email protected]"],
    "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": "[email protected]",
    "to": ["[email protected]"],
    "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

About

A gRPC / HTTP API to Render Beautiful React-based HTML Emails. Powered by React Email, NodeJS, Fastify, and Connect-Node 📫

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published