Resend is an email platform that helps developers build and send transactional and marketing emails. It is designed to be easy to use and reliable, with a focus on deliverability. Resend offers a variety of features to help improve email deliverability, including dedicated IPs, email authentication, and spam tracking. Additionally, Resend integrates with React to allow developers to create beautiful email templates.
Installation
Install via decohub
Fill the necessary fields
- API KEY Resend. To generate your API KEY, simply create your account at resend
- Access your page api keys and click on "+create api key", write down your api in a safe place as you will not be able to view it again. docs
- Field: Sender Options | Default is the sender's name that appears in the email. It is an optional field in which the name can be changed but the domain should only be changed if domain configuration is carried out
- Field: Receiver | Default is the value of the default recipients who can receive the email
- Field: Subject | Default is the optional default subject field of the sent email
Import the app's manifest into your runtime.ts. This will allow you to easily use the action that is exported. Example:
// runtime.ts import { proxy } from "@deco/deco/web"; import type { Manifest } from "./manifest.gen.ts"; import type { Manifest as ManifestVNDA } from "apps/vnda/manifest.gen.ts"; import type { Manifest as ManifestVTEX } from "apps/vtex/manifest.gen.ts"; import type { Manifest as ManifestResend } from "apps/resend/manifest.gen.ts"; export const invoke = proxy<Manifest & ManifestVNDA & ManifestVTEX & ManifestResend>();
Your setup is complete 🥳✉️
Fire an example email
Create an example island that triggers a function
//islands/form.tsx const handleSubmit: JSX.GenericEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); } export default function Form(){ return ( <form onSubmit={handleSubmit}> ... </form> ) }
Import example email, render function and invoke to trigger the app action
//islands/form.tsx import { invoke } from "../runtime.ts"; import { render } from "apps/resend/utils/reactEmail.ts"; import { StripeWelcomeEmail } from "apps/resend/mailExamples/StripeWelcomeEmail.tsx"; const handleSubmit: JSX.GenericEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); await invoke.resend.actions.emails.send({ to: "[email protected]", // receiver optional html: render(<StripeWelcomeEmail />, { // Convert your react email template when the action is triggered to HTML using render or pure HTML too pretty: true, // }), subject: "Formulário de contato | Resend App - Deco", // subject optional }); } export default function Form(){ return ( <form onSubmit={handleSubmit}> ... </form> ) }
Done! Check the receiver's message box
Observations
- You can create your own email templates using react-email components that are exported from the file "apps/resend/utils/reactEmail.ts". If any component you need is not being exported, contribute!!
- Tailwind for email template is currently not supported