This is Part 2 of my Supabase tutorial series. If you haven't, please check out the previous article (How to create a contact form with Supabase & Next JS). We will make use of the same Supabase project and API keys.
In this tutorial, we learn how to create an edge function to send emails. We will walk through how to trigger email notifications when the contacts
table has a new entry in the next article.
To follow along, you need basic knowledge of JavaScript.
You can also check it out on Github.
Edge Functions are server-side TypeScript functions, distributed globally at the edge - close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties like Stripe."
We can deploy server-side code that works as API endpoints. If you have worked with Firebase or Netlify, this is similar to how Cloud functions and Netlify functions work.
To create an edge function in our project, we need the supabase CLI. If you don't have this installed, follow the instructions here.
Check that you have the latest version installed to avoid spending 2 days debugging like me.
brew install supabase/tap/supabase
Next, initialize a supabase project and follow the instructions.
supabase init
Next, link your supabase database to your local project. Replace [reference_id]
with the project reference, you can check yours in the General tab
of the project settings page. The database password is in the Database tab
also.
supabase link --project-ref [reference_id]
Once this is done, we should have a supabase
folder at the root of our local project with the config.toml
file.
Next, we create an edge function named email.
supabase functions new email
This creates an email
function. This function is situated in supabase/functions
folder. All our functions will be added to this folder.
The default email function should look like this.
Next, modify the email
function to be functional. Feel free to use any email service you like. For the sake of this example, we will use resend. Thankfully, there is a guide here.
A few things to note here. First, notice the email, body, and name values from our contacts
table in Part 1 of this series. We also use RESEND_API_KEY
from our environment variables (more on this in the next section). Feel free to use more environment variables.
We need to set the RESEND_API_KEY
variable to use. There are two ways to do this.
The first involves creating an .env
file in the root supabase
folder. Remember to add .env
to your .gitignore
file. This will add all the variables in the .env
file.
supabase secrets set --env-file ./supabase/.env
Alternatively, you can set the variables individually.
supabase secrets set RESEND_API_KEY=value
Note that some environment variables have been set by default. To view all environment variables, run:
supabase secrets list
For a more comprehensive explanation, check the functions guide or CLI documentation.
To deploy the email
function, simply run:
supabase functions deploy email
Feel free to invoke your function in your terminal to test. Replace the FUNCTION_URL
and API_KEY
with yours.
curl --request POST 'FUNCTION_URL' \
--header 'Authorization: Bearer API_KEY' \
--header 'Content-Type: application/json' \
--data '{"email":"[email protected]", "name":"Test person", "body":"This is a test email"}'
I hope this tutorial helps to get started with edge functions on supabase.
Next, we learn how to trigger email notifications when our contact form (from Part 1) gets a new submission.
Till next time…
Also published here.
Lead image by Carl Nenzen Loven on Unsplash