# The ultimate guide to Supabase Edge Functions

### **Introduction**

In my previous post [Getting Started with Supabase: A Comprehensive Guide for Developers](https://aiherrera.hashnode.dev/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!**

![](https://miro.medium.com/v2/resize:fit:498/1*kxk47mt5jOhjj8OMpXYHiw.gif align="center")

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](https://miro.medium.com/v2/resize:fit:539/1*KO1lqjIXAg0fcKF8K4jdeg.png align="center")

### Setting up the environment

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

![The project file structure in VSCode](https://cdn-images-1.medium.com/max/800/1*_loqRwcI897z5VztpMU12g.png align="center")

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](https://supabase.com/docs/guides/cli):
    

```bash
npm install supabase --save-dev
```

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

```bash
brew install supabase/tap/supabase
```

* Then, create a new project with the following command:
    

```bash
supabase init
```

This is gonna create the folder *supabase* within two files inside *config.toml* and *seed.sql*. Files written in [Toml language](https://toml.io/en/), 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](https://git-scm.com/) in our project to have it versioned, run this command:
    

```bash
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:

%[https://gist.github.com/aiherrera/2efe27c0a0f5fb00178155903568e212] 

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

%[https://gist.github.com/aiherrera/b726e03596cbc455ed049887025be8cb] 

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 ;)

%[https://gist.github.com/aiherrera/060770fa2172532d75f7a457011f2b90] 

### 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.

```bash
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](https://cdn-images-1.medium.com/max/800/1*dW_gkQbWAAXlQDb8h2z48A.png align="center")

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

![Function hello-world](https://cdn-images-1.medium.com/max/800/1*9pWa5gkIy6iCN9m5zSAPsw.png align="left")

There are some things to note here:

✓ *Supabase edge functions uses* [*Deno runtime*](https://deno.land/)*.* 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](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno), 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](https://cdn-images-1.medium.com/max/800/1*8uoRl8ZyZjRGcZZ8U9oWxg.png align="center")

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

![Deno config options](https://cdn-images-1.medium.com/max/800/1*0UfwJzjxPQe-02xUbcYruw.png align="center")

* 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](https://curl.se/). 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.

```bash
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:
    

![](https://cdn-images-1.medium.com/max/800/1*VIFMbUmGXIjjZO5cTWzSzA.png align="center")

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

![function deployed](https://cdn-images-1.medium.com/max/800/1*ZdinTxngbfGpSAiFpdBfMw.png align="center")

* 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](https://cdn-images-1.medium.com/max/800/1*dHJWefrOT8bmemfxCzsvKA.png align="center")

* For testing the function I’ll be using the [Thunder Client extension](https://www.thunderclient.com/) from VSCode, but feel free to use anyone you prefer, like [Postman](https://www.postman.com/), [Insomnia](https://insomnia.rest/), [RapidAPI](https://rapidapi.com/) or whatever your want.
    

![Testing hello-world function in Thunder Client](https://cdn-images-1.medium.com/max/800/1*FpFcpVjdiP3xJjYDYr773g.png align="center")

### 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](https://github.com/aiherrera/EdgeFunctions/tree/development)