In the ever-evolving web development landscape, keeping pace with emerging technologies is imperative. The concept of Edge Functions stands at the forefront of a transformative paradigm shift in cloud computing that brings computing closer to data sources, significantly enhancing processing speeds and reducing latency. This breakthrough opens the door to a wealth of possibilities for real-time applications and highly responsive user experiences.

Recently, we have been exploring the world of Edge Functions with Supabase, where the synergy between these technologies empowers developers to craft applications that are not only robust and scalable but also lightning-fast, with an unprecedented level of efficiency and adaptability.

However, when it comes to deploying them locally and invoking them from a web browser, we face a unique set of challenges, particularly in navigating CORS validations. Since Supabase’s documentation provides us with a way to implement an Edge function in different environments, the purpose of this guide is to extract the necessary steps for its implementation, invocation, and handling of any errors that may arise along the way.

In this post, we will guide you step by step on how to implement an Edge Function in the local Supabase development environment and call it in a web browser. Let’s dive into the process!

Prerequisites

At this stage, it is assumed that you have already set up your local instance of Supabase within your project. This setup will generate a supabase folder that we’ll need to add Edge Functions. You can refer to the documentation here on how to add Supabase locally to your project.

After ensuring you have the necessary prerequisites in place, let’s dive into the step-by-step process of working with Edge Functions locally using Supabase:

Step 1: Create an Edge Function

To create a new function we only need to run the following command:

supabase functions new send-notification

This creates a folder called send-notification with an index.ts file inside it, this is all created inside a functions folder in our supabase folder, if the functions folder does not exist it is created.

Note

Once the Edge Function is created, we should be able to serve and invoke it. However, if we try to call this function from the browser now, we’ll see the following error:

To solve this, let’s move to the next step.

Step 2: CORS support for Invoking from the browser

One of the challenges we encountered was when attempting to call our functions from the browser. We faced an error while validating a CORS (Cross-Origin Resource Sharing) preflight request.

To solve this we must add a file called cors.ts inside a _shared folder, it is recommended that we keep this folder inside our functions folder.

Additionally, we must edit our /supabase/functions/send-notification/index.ts file to handle the CORS preflight request. Now our edge function would look like this:

Step 3: Serve the Edge Function

In order for us to call our edge functions we must first serve them, we can do this with the following command:

supabase functions serve

We can serve a specific function by adding the name of the function at the end of the command:

supabase functions serve send-notification

Note: Before serving the edge functions.

When executing this command, we get an EOF error. The reason is that the supabase serve command requires a file where external functions are imported; otherwise, we will encounter an error when trying to serve them.

We must create an import_map.json file inside our functions folder.

If we wanted to import an external module, it would be enough to add it like this:

Once this file is added we can now serve our edge functions.

Step 4: Invoking Edge Functions

There are two ways to invoke an edge function, using curl:

Or using our client library (supabase-js)

If everything works correctly we should receive a response like this:

{message: 'Hello John Doe!'}

Conclusion

In conclusion, the integration of Edge Functions with Supabase opens up a realm of possibilities for developers seeking to create highly responsive and efficient applications. Implementing this powerful combination locally provides a practical environment for testing and development. However, it’s crucial to navigate challenges such as CORS validations.

Alongside the capability to craft our own custom edge functions, Supabase provides a curated selection of pre-built Edge Functions ready for use. Here are a few illustrative examples:

Once we finish these steps we can focus on adding logic to our functions.

Happy coding!