Skip to content

Commit d75ae91

Browse files
D-K-PD-K-P
committed
Updated intro list and added task coe
1 parent 179a9c9 commit d75ae91

File tree

2 files changed

+64
-16
lines changed

2 files changed

+64
-16
lines changed

‎docs/guides/examples/react-email.mdx

+62-16
Original file line numberDiff line numberDiff line change
@@ -144,12 +144,13 @@ We recommend using our [Cursor rules](https://trigger.dev/changelog/cursor-rules
144144

145145
#### The generated code
146146

147-
```tsx trigger/welcome.tsx
147+
```tsx emails/trigger-welcome-email.tsx
148148
import {
149149
Body,
150-
Button,reac
150+
Button,
151151
Container,
152152
Head,
153+
Heading,
153154
Hr,
154155
Html,
155156
Img,
@@ -159,11 +160,13 @@ import {
159160
Text,
160161
} from "@react-email/components";
161162

162-
const baseUrl = process.env.VERCEL_URL
163-
? `https://${process.env.VERCEL_URL}`
164-
: "";
163+
const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "";
165164

166-
export const TriggerDevWelcomeEmail = () => (
165+
export interface TriggerWelcomeEmailProps {
166+
name: string;
167+
}
168+
169+
export const TriggerWelcomeEmail = ({ name }: TriggerWelcomeEmailProps) => (
167170
<Html>
168171
<Head />
169172
<Preview>Welcome to Trigger.dev - Your background jobs platform!</Preview>
@@ -177,13 +180,14 @@ export const TriggerDevWelcomeEmail = () => (
177180
alt="Trigger.dev"
178181
/>
179182
<Hr style={hr} />
183+
<Heading>Welcome, {name}!</Heading>
180184
<Text style={paragraph}>
181-
Thanks for signing up for Trigger.dev! You're now ready to start
182-
creating powerful background jobs and workflows.
185+
Thanks for signing up for Trigger.dev! You're now ready to start creating powerful
186+
background jobs and workflows.
183187
</Text>
184188
<Text style={paragraph}>
185-
You can monitor your jobs, view runs, and manage your projects right
186-
from your dashboard.
189+
You can monitor your jobs, view runs, and manage your projects right from your
190+
dashboard.
187191
</Text>
188192
<Button style={button} href="https://cloud.trigger.dev/dashboard">
189193
View your Trigger.dev Dashboard
@@ -201,9 +205,8 @@ export const TriggerDevWelcomeEmail = () => (
201205
.
202206
</Text>
203207
<Text style={paragraph}>
204-
You can create your first job using our SDK, set up integrations,
205-
and configure triggers to automate your workflows. Take a look at
206-
our{" "}
208+
You can create your first job using our SDK, set up integrations, and configure triggers
209+
to automate your workflows. Take a look at our{" "}
207210
<Link style={anchor} href="https://trigger.dev/docs/examples">
208211
examples
209212
</Link>{" "}
@@ -217,8 +220,7 @@ export const TriggerDevWelcomeEmail = () => (
217220
to connect with other developers and get help when you need it.
218221
</Text>
219222
<Text style={paragraph}>
220-
We're here to help you build amazing things. If you have any
221-
questions, check out our{" "}
223+
We're here to help you build amazing things. If you have any questions, check out our{" "}
222224
<Link style={anchor} href="https://trigger.dev/docs">
223225
documentation
224226
</Link>{" "}
@@ -233,7 +235,7 @@ export const TriggerDevWelcomeEmail = () => (
233235
</Html>
234236
);
235237

236-
export default TriggerDevWelcomeEmail;
238+
export default TriggerWelcomeEmail;
237239

238240
const main = {
239241
backgroundColor: "#0E0C15",
@@ -288,6 +290,50 @@ const footer = {
288290
};
289291
```
290292

293+
And then to trigger the email, you can use the following task:
294+
295+
```tsx trigger/triggerWelcomeEmail.tsx
296+
import { logger, task } from "@trigger.dev/sdk/v3";
297+
import { Resend } from "resend";
298+
import TriggerWelcomeEmail from "emails/triggerdotdev-welcome-email";
299+
300+
// Initialize Resend client
301+
const resend = new Resend(process.env.RESEND_API_KEY);
302+
303+
export const sendEmail = task({
304+
id: "trigger-welcome-email",
305+
run: async (payload: { to: string; name: string; subject: string; from?: string }) => {
306+
try {
307+
to: payload.to,
308+
});
309+
310+
const { data, error } = await resend.emails.send({
311+
// The from address needs to be a verified email address
312+
from: payload.from || "email@acmeinc.com", // Default from address
313+
to: payload.to,
314+
subject: payload.subject,
315+
react: <TriggerWelcomeEmail name={payload.name} />,
316+
});
317+
318+
if (error) {
319+
logger.error("Failed to send email", { error });
320+
throw new Error(`Failed to send email: ${error.message}`);
321+
}
322+
323+
logger.info("Email sent successfully", { emailId: data?.id });
324+
325+
return {
326+
id: data?.id,
327+
status: "sent",
328+
};
329+
} catch (error) {
330+
logger.error("Unexpected error sending email", { error });
331+
throw error;
332+
}
333+
},
334+
});
335+
```
336+
291337
## Learn more
292338

293339
### React Email docs

‎docs/guides/introduction.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ Task code you can copy and paste to use in your project. They can all be extende
6868
| [PDF to image](/guides/examples/pdf-to-image) | Use `MuPDF` to turn a PDF into images and save them to Cloudflare R2. |
6969
| [React to PDF](/guides/examples/react-pdf) | Use `react-pdf` to generate a PDF and save it to Cloudflare R2. |
7070
| [Puppeteer](/guides/examples/puppeteer) | Use Puppeteer to generate a PDF or scrape a webpage. |
71+
| [React email](/guides/examples/react-email) | Send an email using React Email. |
7172
| [Resend email sequence](/guides/examples/resend-email-sequence) | Send a sequence of emails over several days using Resend with Trigger.dev. |
73+
| [Satori](/guides/examples/satori) | Generate OG images using React Satori. |
7274
| [Scrape Hacker News](/guides/examples/scrape-hacker-news) | Scrape Hacker News using BrowserBase and Puppeteer, summarize the articles with ChatGPT and send an email of the summary every weekday using Resend. |
7375
| [Sentry error tracking](/guides/examples/sentry-error-tracking) | Automatically send errors to Sentry from your tasks. |
7476
| [Sharp image processing](/guides/examples/sharp-image-processing) | Use Sharp to process an image and save it to Cloudflare R2. |

0 commit comments

Comments
 (0)