Appearance

In this article, we will list the steps you need to go through to send personalized emails with dynamic data from your WeWeb app, using Resend as the email provider, and Supabase as the backend that triggers the function.

TIP

This article is more low-code than no-code. If you don't get it right the first time, don't worry. Take it step by step, try to understand why you get stuck when you get stuck. Reach out to the WeWeb Community, and you'll get there eventually 🙂

Before you can invoke a Supabase Edge function that triggers a Resend email via WeWeb, there are a few pre-requisites.

Pre-requisites ​

First, you'll need to:

  • create a Supabase and a Resend project (both tools have generous free plans)
  • verify your domain name in Resend (so that it can send emails on your behalf)

On your machine, make sure you have installed:

  1. the latest version of the Supabase CLI
  2. the Docker Desktop app
  3. a text editor such as Visual Studio Code

Process overview ​

Assuming you have all of the above, the process to invoke a Supabase Edge function that sends out a Resend email via your WeWeb app will go as follows:

  1. In Resend, create an API key and verify your domain name.
  2. On your computer, create a project folder where you run Supabase locally
  3. Create the function,
  4. In your text editor, edit the default function so you can include dynamic data from the users of your WeWeb app
  5. In your terminal, deploy the function to your Supabase project
  6. In WeWeb, ivoke the Supabase function in your WeWeb app

In the sections below, we cover step 3 and provide the code for the function to send a dynamic email. The other steps are described in this article introducing Supabase Edge functions.

Resend function template ​

Once you have initialized the Supabase project on your machine, you can go through this Resend tutorial.

Step 1 – Create a function ​

Run the supabase functions new resend.

This creates a resend subfolder in the supabase of your repo, and a file with a .ts extension that stands for TypeScript, the programming language used to write Supabase Edge functions.

Step 2 – Add the Resend example ​

Replace Supabase's example code in the index.ts file with the code provided by Resend here.

Step 3 – Deploy the function to Supabase ​

To deploy the function to your Supabase project, run the supabase functions deploy resend command.

Step 4 – Test the function in WeWeb ​

In WeWeb, you can test this function with the Supabase Invoke an Edge function action in a workflow.

Assuming you updated the function with one of your email addresses in the to

Make the function dynamic ​

To make your email dynamic, replace the template code provided by Resend with the code below:

typescript
// Set the API key for the Resend service
const RESEND_API_KEY = 'replace_with_your_resend_api_key'

// Define an asynchronous function (handler) to handle requests with parameters
const handler = async (_request: Request, from: string, to: string, subject: string, html: string): Promise<Response> => {
  // Send a POST request to the Resend API to send an email
  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json', // Set the content type to JSON
      Authorization: `Bearer ${RESEND_API_KEY}`, // Include the API key in the Authorization header
    },
    body: JSON.stringify({
      from: from,
      to: to,
      subject: subject,
      html: html,
    }),
  })

  // Parse the response as JSON
  const data = await res.json()

  // Return a new Response object with the JSON data, status 200, and appropriate headers
  return new Response(JSON.stringify(data), {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  })
}

// Start a Deno HTTP server and pass the handler function with dynamic "from", "to", "subject", and "html" values
Deno.serve(async (req) => {
  const { searchParams } = new URL(req.url)
  
  // Example: Extract "from" and "to" values from query parameters
  const from = searchParams.get('from') || 'defaultfrom@example.com'
  const to = searchParams.get('to') || 'defaultto@example.com'
  const subject = searchParams.get('subject') || 'Best email ever 😀'
  const html = searchParams.get('html') || 'It works!'

  // Call the modified handler function with dynamic "from","to", "subject", and "html" values
  return await handler(req, from, to, subject, html)
})

Save the changes in the index.ts file and run the supabase functions deploy resend command to update the resend function in Supabase.

Send an email via WeWeb ​

In WeWeb, invoke the resend function, making sure to include dynamic data where possible:

[ADD IMAGE]

WARNING

The from field expects a domain that has been verified in Resend.

If you try sending an email from a domain name that isn't verified in Resend, the API call to Resend will fail. No email will go out.