Before you can invoke a Supabase Edge function in WeWeb, there are a few pre-requisites.

Pre-requisites

On your machine, make sure you have installed:

1. the latest version of the Supabase CLI
2. the Docker Desktop app
3. a text editor such as Visual Studio Code

Process overview

Assuming you have all of the above, the process to invoke a Supabase Edge function in your WeWeb app will go as follows:

1. create a project folder on your computer where you run Supabase locally
2. create the function and edit it
3. deploy the function to your Supabase project
4. invoke the Supabase function in your WeWeb app

Let's go through this step by step.

Setup project folder

Create folder

First, create an empty folder on your computer (also called a "repository" or "repo" in the fancy dev world ^^) and open it in your text editor.

In the example below, we created an empty folder called my_project that we opened in Visual Studio Code:

Navigate to folder

Then, open a terminal and navigate to that folder.

If you opened the project in your text editor, you can open the terminal directly from the text editor as we did here:

TIP

Got lost in the terminal?

Learn how to navigate to a specific folder on the command line.

Run Supabase locally

Once you are sure the terminal is on the correct folder, run the supabase init command:

In the example above, you can see:

1. we ran the supabase init command
2. then we agreed to ask VS Code to generate the settings for Deno
3. this created new files in our my_project folder, some our related to our VS Code settings and others to our local instance of Supabase

TIP

If you're using VS Code and have installed the Deno extension, you can have the CLI automatically create helpful Deno settings when running supabase init.

If you're using a different text editor, you won't get that prompt and might need to configure settings manually in a later step.

This will create a new supabase subfolder inside your project.

Create a function

To create an Edge function in your project's supabase subfolder, run the command supabase functions new your-function-name.

This will create a functions subfolder with an index.ts file in the supabase folder of your project repository:

The index.ts file comes with an Edge function boiler plate that you can use as a starting point to write your own functions.

TIP

Supabase Edge functions are written in TypeScript. This is what the .ts file extension stands for.

Learn more about how to write Supabase Edge functions

Deploy the function

Once you are happy with your function, you will need to deploy it to your Supabase project before you can invoke it in WeWeb.

Start Supabase locally

Make sure Docker Desktop is open and run the following command: supabase start.

WARNING

If you try running the supabase start command without Docker Desktop, you will get an error message:

You may also get an error message if you run the command when a Supabase project is already running on the same port:

Deploy the function to Supabase

Once you have successfully started your local instance of Supabase, run supabase functions deploy your-function-name and paste your Supabase project's Reference ID to deploy the function to Supabase:

You'll find the Reference ID of your Supabase project in the project settings:

TIP

Before moving on to WeWeb, check that the function was deployed properly to Supabase:

In the screenshot above, we can see that the function your-function-name we just deployed via our machine's terminal was correctly "received" by Supabase.

Invoke the function

In WeWeb, we can call Supabase Edge functions by selecting the Invoke an Edge function action in a workflow, and typing in the name of our function, for example your-name-function:

In the example above, you can see that we:

1. triggered the Invoke an Edge function action
2. to call on our function called your-name-function
3. this is a POST API call
4. we configured authorization headers
5. the body of our call is an object where the name key is paired with the value of a variable called name ("Joyce" in our example)

As a result, when we test the action in our workflow, we see the response from Supabase is an object that says message: "Hello Joyce!" which is the response format we defined in our Supabase Edge function:

Troubleshooting – CORS errors

When you trigger the Invoke an Edge function action in WeWeb, the function will be called client-side. This may cause your call to fail because of CORS issues.

To address this, you will need to update your Supabase Edge functions to allow for cross-origin calls.

Taking Supabase's hello-world example, we would update the original code to include CORS headers.

Code without CORS headers

Deno.serve(async (req) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }

  return new Response(
    JSON.stringify(data),
    { headers: { "Content-Type": "application/json" } },
  )
})

Code with CORS headers

export const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type, cache-control',
}

Deno.serve(async (req) => {
  // This is needed if you're planning to invoke your function from a browser.
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders })
  }

  try {
    const { name } = await req.json()
    const data = {
      message: `Hello ${name}!`,
    }

    return new Response(JSON.stringify(data), {
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      status: 200,
    })
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      status: 400,
    })
  }
})