Resend

BuilderKit provides a simple and efficient way to send emails using the Resend (opens in a new tab) service. With just a few lines of code, you can easily send emails to your users for various purposes such as notifications, welcome messages, or password reset instructions.

Prerequisites

Before you start, make sure you have the following:

• A Resend account. If you don't have one, you can sign up here (opens in a new tab).
• Your Resend API key. You can find it in your Resend Dashboard (opens in a new tab).

Configuration

1. To set up the Loops integration, you need to add your Loops API key to the .env file in the root directory of your project:

RESEND_API_KEY=your_resend_api_key

Make sure to replace your_resend_api_key with your actual Resend API key.

2. Update the sender email address in the src/config.ts file:

const config = {
  // ...
  resend: {
    senderEmailAddress: "onboarding@resend.dev",
  },
  // ...
};

Replace the test Sender Email Id: 'onboarding@resend.dev' with the email address you want to use as the sender for your emails.

Sending an Email

To send an email using Resend, you can use the /api/resend endpoint in your BuilderKit project. Here's an example of how to send an email.

How to use?

Make a POST request to the /api/resend endpoint with the following parameters in the request body:

• email: The recipient's email address. For multiple addresses, send an array of strings (max 50).
• subject: The subject of the email.
• emailBody: The content of the email in HTML format.

import config from "@/config";
 
const URL = `${config.app.url}/api/resend`;
await fetch(URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    email: "vatsal1811@gmail.com",
    subject: "Welcome to BuilderKit",
    emailBody:
      "<h1>Welcome to BuilderKit!</h1><p>Thank you for joining our platform.</p>",
  }),
});

In this example, we're sending a welcome email to vatsal1811@gmail.com with the subject "Welcome to BuilderKit" and an HTML body.

Customization

You can customize the email content, subject, and recipient(s) based on your specific requirements. Feel free to modify the code in the /api/resend route to suit your needs.

For more advanced use cases and configuration options, refer to the Resend Documentation (opens in a new tab).