The ultimate guide to Supabase Edge Functions

The ultimate guide to Supabase Edge Functions


In my previous post Getting Started with Supabase: A Comprehensive Guide for Developers, I covered several basic topics about this great BaaS platform to get you ready for a deep dive into it. So, if this is your first time over here I recommend to go and check it first 😎

What are Supabase Edge Functions & how do they work?

According to Supabase self-description:

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.

So, first, they are Typescript functions by default, which means that you can use all the power of this language out of the box. The fact that they are closed to the users by distribution allows faster response times and reduced latency, as the function is executed closer to the user making the request. And finally, they can be integrated with third-parties libraries which allows extending, even more, the capabilities of what you can do.

Well, spare me the chit-chat, let’s dive in!

Back to our Supabase dashboard, we have to go to the left sidebar and click over the “Edge Functions” tab. In there, you’ll see instructions to create an example function called hello-world.

Instructions to create your first edge function

Setting up the environment

This is how my Supabase edge function project usually looks like:

The project file structure in VSCode

As you can see there are several files inside the project, don’t worry, will be covering each detail, first let's set that environment up!

  • To create our project we need to install the Supabase CLI:
npm install supabase --save-dev

in my case, since I’m using MacOS, I’ll be installing it by using brew:

brew install supabase/tap/supabase
  • Then, create a new project with the following command:
supabase init

This is gonna create the folder supabase within two files inside config.toml and seed.sql. Files written in Toml language, are easy-to-read configuration files and as you may be guessing the configuration file for your project. The other file is intended to have some seed data for every time you need to reset your database and be able to restore with some default data (we’ll be covering this in another article)

  • Then, we’ll be setting Git in our project to have it versioned, run this command:
git init

I have a Git ignore file preconfigured that covers most of the use cases I have faced, feel free to copy and paste, and modify as per your requirements:

Also, I have a prettier file preconfigured for this function, so, you can copy and paste it:

and for the prettier ignore file, you can start with this simple one, after your project grows you may be adding files that you don’t want to be prettify ;)

Creating our first function

So, back to our console, let’s create our first function:

It is recommended to use hyphens to name your functions.

supabase functions new hello-world

The first time you run this command, it is going to create a folder called functions, and inside another folder with the name of the function and a file called index.ts. By convention, all function names are at the folder level and inside have an index.ts file.

If you follow the steps until here, this is how your project should look like this:

First function created

Now, let's see what’s inside the brand-new function…

Function hello-world

There are some things to note here:

Supabase edge functions uses Deno runtime. This is convenient for Supabase functions architecture since Deno is a single binary executable with no external dependencies.

The import is highlighting an error. To have a successful development environment, it is recommended to install the official VSCode Deno extension, it will allow you some configuration like caching new imports, which is the error that is marking the import right now.

  • So, after installing the extension, let's address this by initializing the Deno workspace. Press Ctrl+Shift+P for Windows or Cmd+Shift+P for MacOS, type deno and select the option Deno: Initialize Workspace Configuration.

Deno: Initialize Workspace Configuration

  • Then select yes in the subsequent two options. It will set the following configurations to .vscode settings:

Deno config options

  • Once this is done you’ll see no import error anymore.

✓ At the very end we have commented lines within an example of how to invoke our function with curl. This example has all the needed parameters to test your brand-new function. But before that, we need to deploy our function to Supabase cloud to make it accessible.

supabase functions deploy hello-world --project-ref lwcilxirnpekwwqevcrt
  • From where do we get the project ID? Well, we could get it from our Supabase project URL:

  • Once deployed, you’ll see it in the functions dashboard

function deployed

  • If you click on the function you’ll get into all the details of it, and at the very end, there will be two little arrows pointing at each other, if you click them, that panel will expand and you’ll get all the info you need to test your function. Let’s try!

hello-world configurations

Testing hello-world function in Thunder Client

Wrapping up!

We have covered a complete road to set up a supabase edge function project from scratch. We addressed common errors you’ll find on the road to achieve this, and got over some cool VSCode extensions to improve our development time.

Next steps

  • From here, commit & push your changes to any repository of your preference.

  • Dive deep into the documentation for more advanced examples and understanding.

Stay tuned, I’ll be writing an article integrating Github Actions workflow for your functions 🔥

Bonus content

Repository with the created hello-world function on Github

Did you find this article valuable?

Support Alain Iglesias by becoming a sponsor. Any amount is appreciated!