mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-07-31 18:28:47 -04:00
49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# backend/email
|
|
|
|
React Email templates + send helpers. Templates render to HTML; Resend delivers them.
|
|
|
|
See [README.md](README.md) for the dev preview server (`yarn dev` → http://localhost:3001) and
|
|
[knowledge.md](knowledge.md) for the detailed walkthrough. Cross-package context is in the
|
|
[root CLAUDE.md](../../CLAUDE.md).
|
|
|
|
## Layout
|
|
|
|
```
|
|
backend/email/
|
|
├── emails/
|
|
│ ├── new-message.tsx, new-match.tsx, new-endorsement.tsx, welcome.tsx, ...
|
|
│ │ One React component per email. Default-exported, with previewProps for the dev server.
|
|
│ ├── functions/
|
|
│ │ ├── helpers.tsx sendNewEndorsementEmail, sendWelcomeEmail, ... ← import these from API
|
|
│ │ ├── send-email.ts Low-level Resend wrapper
|
|
│ │ ├── create-emails.ts Bulk creation helper
|
|
│ │ └── mock.ts, send-test-email.ts
|
|
│ ├── utils.tsx Shared layout / styling components
|
|
│ └── static/ Image assets (only used by the dev preview server)
|
|
└── tests/
|
|
```
|
|
|
|
## Adding a new email
|
|
|
|
1. Create `emails/<name>.tsx` exporting a React component as default. Use
|
|
`@react-email/components` primitives for email-safe HTML.
|
|
2. Add `previewProps` so the dev preview server renders it without real data.
|
|
3. Add a `send<Name>Email(...)` helper in `emails/functions/helpers.tsx`. API handlers call this helper, not
|
|
the template directly.
|
|
4. Trigger from a backend handler:
|
|
```ts
|
|
import {sendNewEndorsementEmail} from 'email/functions/helpers'
|
|
await sendNewEndorsementEmail(privateUser, creator, onUser, text)
|
|
```
|
|
|
|
## Build / test
|
|
|
|
```bash
|
|
yarn --cwd=backend/email typecheck
|
|
yarn --cwd=backend/email lint[-fix]
|
|
yarn --cwd=backend/email test
|
|
```
|
|
|
|
You typically don't need to start the email dev preview server yourself — the human runs it when iterating
|
|
on a template.
|