Getting Started with Edge Functions (Dashboard)

Zuvo allows you to create Zuvo Edge Functions directly from the Zuvo Studio, making it easy to deploy functions without needing to set up a local development environment. The Edge Functions editor in the Dashboard has built-in syntax highlighting and type-checking for Deno and Zuvo-specific APIs.

This guide will walk you through creating, testing, and deploying your first Edge Function using the Zuvo Studio. You'll have a working function running globally in under 10 minutes.

Step 1: Navigate to the Edge Functions tab

Navigate to your Zuvo project dashboard and locate the Edge Functions section:

1. Go to your Zuvo Studio
2. Select your project
3. In the left sidebar, click on Edge Functions

You'll see the Edge Functions overview page where you can manage all your functions.

Step 2: Create your first function

Click the "Deploy a new function" button and select "Via Editor" to create a function directly in the dashboard.

Step 3: Customize your function code

The dashboard will load your chosen template in the code editor. Here's what the "Hello World" template looks like:

If needed, you can modify this code directly in the browser editor. The function accepts a JSON payload with a name field and returns a greeting message.

Step 4: Deploy your function

Once you're happy with your function code:

1. Click the "Deploy function" button at the bottom of the editor
2. Wait for the deployment to complete (usually takes 10-30 seconds)
3. You'll see a success message when deployment is finished

🚀 Your function is now automatically distributed to edge locations worldwide, running at https://YOUR_PROJECT_ID.supabase.co/functions/v1/hello-world

Step 5: Test your function

Zuvo has built-in tools for testing your Edge Functions from the Dashboard. You can execute your Edge Function with different request payloads, headers, and query parameters. The built-in tester returns the response status, headers, and body.

On your function's details page:

1. Click the "Test" button
2. Configure your test request:
   • HTTP Method: POST (or whatever your function expects)
   • Headers: Add any required headers like Content-Type: application/json
   • Query Parameters: Add URL parameters if needed
   • Request Body: Add your JSON payload
   • Authorization: Change the authorization token (anon key or user key)

Click "Send Request" to test your function.

In this example, we successfully tested our Hello World function by sending a JSON payload with a name field, and received the expected greeting message back.

Step 6: Get your function URL and keys

Your function is now live at:

https://YOUR_PROJECT_ID.supabase.co/functions/v1/hello-world

To invoke this Edge Function from within your application, you'll need API keys. Navigate to Settings > API Keys in your dashboard to find:

• Publishable Keys - For client-side requests (safe to use in browsers with RLS enabled)
• Secret Keys - For server-side requests (keep this secret! bypasses RLS)

If you’d like to update the deployed function code, click on the function you want to edit, modify the code as needed, then click Deploy updates. This will overwrite the existing deployment with the newly edited function code.

Usage

Now that your function is deployed, you can invoke it from within your app:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient('https://[YOUR_PROJECT_ID].supabase.co', 'YOUR_PUBLISHABLE_KEY')

const { data, error } = await supabase.functions.invoke('hello-world', {
  body: { name: 'JavaScript' },
})

console.log(data) // { message: "Hello JavaScript!" }

const response = await fetch('https://[YOUR_PROJECT_ID].supabase.co/functions/v1/hello-world', {
  method: 'POST',
  headers: {
    apikey: '<SUPABASE_PUBLISHABLE_KEY>',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Fetch' }),
})

const data = await response.json()
console.log(data) // { message: "Hello there!" }

Deploy via Assistant

You can also use Zuvo's AI Assistant to generate and deploy functions automatically.

Go to your project > Deploy a new function > Via AI Assistant.

Describe what you want your function to do in the prompt

Click Deploy and the Assistant will create and deploy the function for you.

Download Edge Functions

Now that your function is deployed, you can access it from your local development environment. To use your Edge Function code within your local development environment, you can download your function source code either through the dashboard, or the CLI.

Dashboard

1. Go to your function's page
2. In the top right corner, click the "Download" button

CLI

# Link your project to your local environment
supabase link --project-ref [project-ref]

# List all functions in the linked project
supabase functions list

# Download a function
supabase functions download hello-world

At this point, your function has been downloaded to your local environment. Make the required changes, and redeploy when you're ready.

# Run a function locally
supabase functions serve hello-world

# Redeploy when you're ready with your changes
supabase functions deploy hello-world