This is Part 2 of my Supabase tutorial series. If you haven't, please check out the (How to create a contact form with Supabase & Next JS). We will make use of the same Supabase project and API keys. previous article 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 table has a new entry in the next article. contacts 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." Edge Functions 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. Initialize supabase locally To create an edge function in our project, we need the supabase CLI. If you don't have this installed, follow the instructions . here to avoid spending 2 days debugging like me. Check that you have the latest version installed 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 with the project reference, you can check yours in the of the project settings page. The database password is in the also. [reference_id] General tab Database tab supabase link --project-ref [reference_id] Once this is done, we should have a folder at the root of our local project with the file. supabase config.toml Create function Next, we create an edge function named email. supabase functions new email This creates an function. This function is situated in folder. All our functions will be added to this folder. email supabase/functions The default email function should look like this. Next, modify the 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 . email here A few things to note here. First, notice the email, body, and name values from our table in Part 1 of this series. We also use from our environment variables (more on this in the next section). Feel free to use more environment variables. contacts RESEND_API_KEY Environment variables We need to set the variable to use. There are two ways to do this. RESEND_API_KEY The first involves creating an file in the root folder. Remember to add to your . file. This will add all the variables in the file. .env supabase .env gitignore .env 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 or . functions guide CLI documentation Deployment To deploy the function, simply run: email supabase functions deploy email Feel free to invoke your function in your terminal to test. Replace the and with yours. FUNCTION_URL API_KEY curl --request POST 'FUNCTION_URL' \
  --header 'Authorization: Bearer API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{"email":"hello@deolaj.com", "name":"Test person", "body":"This is a test email"}' Conclusion 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 on Carl Nenzen Loven Unsplash

How to Create a Contact Form Using Supabase & Next JS

Personal website

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Sending emails with Edge Functions on Supabase

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Create a Contact Form Using Supabase & Next JS

The Noonification: How Can Enterprises Utilize Edge Computer Vision? (1/14/2023)

51 Stories To Learn About Edge Computing

8 Cloud Computing Trends to Watch in 2021

A Guide to Enhancing Security at the IoT Edge (Part 2)

How to Create a Contact Form Using Supabase & Next JS

The Noonification: How Can Enterprises Utilize Edge Computer Vision? (1/14/2023)

51 Stories To Learn About Edge Computing

8 Cloud Computing Trends to Watch in 2021

A Guide to Enhancing Security at the IoT Edge (Part 2)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps