主题
React 电子邮件
¥React Email
React Email 是一个允许你使用 React 组件创建电子邮件的库。
¥React Email is a library that allows you to use React components to create emails.
由于 Elysia 使用 Bun 作为运行时环境，我们可以直接编写一个 React Email 组件，并将 JSX 直接导入到我们的代码中来发送电子邮件。
¥As Elysia is using Bun as runtime environment, we can directly write a React Email component and import the JSX directly to our code to send emails.
安装
¥Installation
要安装 React Email，请运行以下命令：
¥To install React Email, run the following command:
bash
bun add -d react-email
bun add @react-email/components react react-dom然后将此脚本添加到 package.json：
¥Then add this script to package.json:
json
{
"scripts": {
"email": "email dev --dir src/emails"
}
}我们建议将电子邮件模板添加到 src/emails 目录中，因为我们可以直接导入 JSX 文件。
¥We recommend adding email templates into the src/emails directory as we can directly import the JSX files.
TypeScript
如果你使用 TypeScript，则可能需要将以下内容添加到你的 tsconfig.json：
¥If you are using TypeScript, you may need to add the following to your tsconfig.json:
json
{
"compilerOptions": {
"jsx": "react"
}
}你的第一封邮件
¥Your first email
使用以下代码创建文件 src/emails/otp.tsx：
¥Create file src/emails/otp.tsx with the following code:
tsx
import * as React from 'react'
import { Tailwind, Section, Text } from '@react-email/components'
export default function OTPEmail({ otp }: { otp: number }) {
return (
<Tailwind>
<Section className="flex justify-center items-center w-full min-h-screen font-sans">
<Section className="flex flex-col items-center w-76 rounded-2xl px-6 py-1 bg-gray-50">
<Text className="text-xs font-medium text-violet-500">
Verify your Email Address
</Text>
<Text className="text-gray-500 my-0">
Use the following code to verify your email address
</Text>
<Text className="text-5xl font-bold pt-2">{otp}</Text>
<Text className="text-gray-400 font-light text-xs pb-4">
This code is valid for 10 minutes
</Text>
<Text className="text-gray-600 text-xs">
Thank you for joining us
</Text>
</Section>
</Section>
</Tailwind>
)
}
OTPEmail.PreviewProps = {
otp: 123456
}你可能注意到我们正在使用 @react-email/components 创建电子邮件模板。
¥You may notice that we are using @react-email/components to create the email template.
此库提供了一组组件，包括使用 Tailwind 进行样式设置，并与 Gmail、Outlook 等电子邮件客户端兼容。
¥This library provides a set of components including styling with Tailwind that are compatible with email clients like Gmail, Outlook, etc.
我们还在 OTPEmail 函数中添加了 PreviewProps。这仅在我们的 Playground 上预览电子邮件时适用。
¥We also added a PreviewProps to the OTPEmail function. This is only apply when previewing the email on our playground.
预览你的电子邮件
¥Preview your email
要预览你的电子邮件，请运行以下命令：
¥To preview your email, run the following command:
bash
bun email这将打开一个浏览器窗口，其中包含你的电子邮件预览。
¥This will open a browser window with the preview of your email.
发送电子邮件
¥Sending email
要发送电子邮件，我们可以使用 react-dom/server 渲染电子邮件，然后使用首选提供程序提交：
¥To send an email, we can use react-dom/server to render the the email then submit using a preferred provider:
tsx
import { Elysia, t } from 'elysia'
import * as React from 'react'
import { renderToStaticMarkup } from 'react-dom/server'
import OTPEmail from './emails/otp'
import nodemailer from 'nodemailer'
const transporter = nodemailer.createTransport({
host: 'smtp.gehenna.sh',
port: 465,
auth: {
user: 'makoto',
pass: '12345678'
}
})
new Elysia()
.get('/otp', async ({ body }) => {
// Random between 100,000 and 999,999
const otp = ~~(Math.random() * (900_000 - 1)) + 100_000
const html = renderToStaticMarkup(<OTPEmail otp={otp} />)
await transporter.sendMail({
from: 'ibuki@gehenna.sh',
to: body,
subject: 'Verify your email address',
html,
})
return { success: true }
}, {
body: t.String({ format: 'email' })
})
.listen(3000)tsx
import { Elysia, t } from 'elysia'
import OTPEmail from './emails/otp'
import Resend from 'resend'
const resend = new Resend('re_123456789')
new Elysia()
.get('/otp', ({ body }) => {
// Random between 100,000 and 999,999
const otp = ~~(Math.random() * (900_000 - 1)) + 100_000
await resend.emails.send({
from: 'ibuki@gehenna.sh',
to: body,
subject: 'Verify your email address',
html: <OTPEmail otp={otp} />,
})
return { success: true }
}, {
body: t.String({ format: 'email' })
})
.listen(3000)tsx
import { Elysia, t } from 'elysia'
import * as React from 'react'
import { renderToStaticMarkup } from 'react-dom/server'
import OTPEmail from './emails/otp'
import { type SendEmailCommandInput, SES } from '@aws-sdk/client-ses'
import { fromEnv } from '@aws-sdk/credential-providers'
const ses = new SES({
credentials:
process.env.NODE_ENV === 'production' ? fromEnv() : undefined
})
new Elysia()
.get('/otp', ({ body }) => {
// Random between 100,000 and 999,999
const otp = ~~(Math.random() * (900_000 - 1)) + 100_000
const html = renderToStaticMarkup(<OTPEmail otp={otp} />)
await ses.sendEmail({
Source: 'ibuki@gehenna.sh',
Destination: {
ToAddresses: [body]
},
Message: {
Body: {
Html: {
Charset: 'UTF-8',
Data: html
}
},
Subject: {
Charset: 'UTF-8',
Data: 'Verify your email address'
}
}
} satisfies SendEmailCommandInput)
return { success: true }
}, {
body: t.String({ format: 'email' })
})
.listen(3000)tsx
import { Elysia, t } from 'elysia'
import OTPEmail from './emails/otp'
import sendgrid from "@sendgrid/mail"
sendgrid.setApiKey(process.env.SENDGRID_API_KEY)
new Elysia()
.get('/otp', ({ body }) => {
// Random between 100,000 and 999,999
const otp = ~~(Math.random() * (900_000 - 1)) + 100_000
const html = renderToStaticMarkup(<OTPEmail otp={otp} />)
await sendgrid.send({
from: 'ibuki@gehenna.sh',
to: body,
subject: 'Verify your email address',
html
})
return { success: true }
}, {
body: t.String({ format: 'email' })
})
.listen(3000)提示
请注意，借助 Bun，我们可以直接导入电子邮件组件。
¥Notice that we can directly import the email component out of the box thanks to Bun
你可以在 React Email 集成 中看到所有可用的 React Email 集成，并在 React Email 文档 中了解更多关于 React Email 的信息。
¥You may see all of the available integration with React Email in the React Email Integration, and learn more about React Email in React Email documentation