starmorph logo
Published on

About Supabase Edge Functions and Deno

Edge Functions in Supabase are serverless functions that run on the edge of the Supabase infrastructure. They allow you to write custom server-side logic that can be triggered by HTTP requests. Edge Functions are useful for tasks like data validation, authentication, and other server-side operations.

Supabase Edge Functions use Deno as the runtime environment. Deno is a secure JavaScript and TypeScript runtime built on the V8 JavaScript engine and the Rust programming language. It was created by Ryan Dahl, the original creator of Node.js, to address some of the shortcomings of Node.js.

Here are some key features of Deno:

  1. Secure by default: Deno doesn't allow access to the file system, network, or environment variables unless explicitly granted permission.
  2. Built-in TypeScript support: Deno has first-class TypeScript support, which means you can write your functions in TypeScript without needing a separate compilation step.
  3. Standard library: Deno comes with a built-in standard library that provides a set of high-quality, audited, and maintained modules.
  4. ES modules: Deno uses ES modules as the default module system, which is the standard module system in modern JavaScript.

When working with Supabase Edge Functions, you can write your functions in JavaScript or TypeScript. However, there are some limitations:

  1. Cold start latency: Since Edge Functions are serverless, they may experience cold starts, which can result in higher latency for the first request after a period of inactivity.
  2. Limited resources: Edge Functions have limited resources (CPU, memory, and execution time) compared to traditional servers. Make sure your functions are optimized for performance and don't exceed the allocated resources.

Here are three basic Supabase Edge Functions to help you get started:

  1. Hello World Function

Create a new folder named hello-world inside the .supabase/functions directory. Inside the hello-world folder, create an index.js file with the following content:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return new Response('Hello, World!', { status: 200 })
}

This function simply returns a "Hello, World!" message when it's called.

  1. JSON Response Function

Create a new folder named json-response inside the .supabase/functions directory. Inside the json-response folder, create an index.js file with the following content:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const data = { message: 'Hello, JSON!' }
  const headers = { 'Content-Type': 'application/json' }
  return new Response(JSON.stringify(data), { status: 200, headers })
}

This function returns a JSON response containing a message when it's called.

  1. Query Parameters Function

Create a new folder named query-params inside the .supabase/functions directory. Inside the query-params folder, create an index.js file with the following content:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const name = url.searchParams.get('name') || 'World'
  return new Response(`Hello, ${name}!`, { status: 200 })
}

This function returns a personalized greeting based on the name query parameter provided in the request URL.

To get started using these functions:

  1. Make sure you have the @supabase/cli installed globally:
yarn global add @supabase/cli
  1. Initialize your Supabase project locally if you haven't already:
supabase init
  1. Create the .supabase/functions directory if it doesn't exist:
mkdir .supabase/functions
  1. Create the folders and files for each function as described above.

  2. Deploy your functions to Supabase:

supabase deploy

Once the deployment is complete, you should see your functions in the Supabase UI under the "Edge Functions" tab. You can test your functions by sending HTTP requests to their respective URLs, which will be displayed in the Supabase UI.

Sources

Here are five resources to help you learn more about Edge Functions, Deno, and Supabase Edge Functions:

  1. Supabase Edge Functions documentation: This is the official guide for working with Edge Functions in Supabase. It covers topics like creating, deploying, and managing functions, as well as using Deno in your functions. https://supabase.io/docs/guides/functions

  2. Deno official website: The official Deno website provides comprehensive documentation, examples, and resources to help you learn and use Deno effectively. https://deno.land/

  3. Deno Crash Course: This YouTube video by Traversy Media provides a quick introduction to Deno, covering its features, installation, and basic usage. https://www.youtube.com/watch?v=NHHhiqwcfRM

  4. Supabase YouTube channel: The official Supabase YouTube channel features tutorials, demos, and talks related to Supabase, including Edge Functions and other features. https://www.youtube.com/c/Supabase

  5. Deno 1.0: What you need to know: This blog post by Flavio Copes provides an overview of Deno, its features, and how it compares to Node.js. It's a great starting point for understanding the motivation behind Deno and its benefits. https://flaviocopes.com/deno/

These resources should give you a solid foundation for understanding Edge Functions, Deno, and Supabase Edge Functions, and help you get started with building and deploying your own serverless functions.