First pass without images

Author: D-K-P

docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx

@@ -18,9 +18,11 @@ import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to
 
 ## Overview
 
-Supabase edge functions allow you to trigger tasks either when an event is sent from a third party (e.g. when a new Stripe payment is processed, when a new user signs up to a service, etc), or when there are any changes / updates to your Supabase database.
+Database webhooks allow you to send realtime data from your database to another system whenever an event occurs in your table.
 
-This guide shows you how to set up and deploy a simple Supabase edge function example that triggers a task when an edge function URL is accessed.
+This could be when a new row is inserted, updated, or deleted, or when a specific column is updated.
+
+This guide shows you how to set up and deploy a simple Supabase edge function that triggers a task every time a new row is added to your database.
 
 ## Prerequisites
 
@@ -95,33 +97,33 @@ Install the "Hello World" example task when prompted. We'll use this task to tes
   <CliViewRunStep />
 </Steps>
 
-## Create and a new Supabase edge function and trigger a dev run
+## Create and deploy a new Supabase edge function
 
 <Steps>
 
 <Step title="Create a new edge function using the Supabase CLI">
 
-We will call this example edge function `edge-function-trigger`.
+We will call this example edge function `database-webhook`.
 
 ```bash
-supabase functions new edge-function-trigger
+supabase functions new database-webhook
 ```
 
 </Step>
 
 <Step title="Update the edge function code">
 
-Replace the `edge-function-trigger` placeholder code with the following:
+Replace the `database-webhook` placeholder code with the following:
 
-```ts edge-function-trigger/index.ts
+```ts database-webhook/index.ts
 import "jsr:@supabase/functions-js/edge-runtime.d.ts";
 import { tasks } from "npm:@trigger.dev/[email protected]/v3";
 // Import your task type from your /trigger folder
 import type { helloWorldTask } from "../../../src/trigger/example.ts";
 
 Deno.serve(async (req) => {
   // @ts-expect-error: Ignoring Task type mismatch and RunHandle incompatibility
-  await tasks.trigger<typeof helloWorldTask>("edge-function-trigger", "hello");
+  await tasks.trigger<typeof helloWorldTask>("database-webhook", "hello");
   return new Response("OK");
 });
 ```
@@ -135,149 +137,58 @@ Deno.serve(async (req) => {
 
 </Step>
 
-<Step title="Add a .env file to be able to test locally">
-
-First, go to your Trigger.dev project and copy the `dev` secret key from the API keys page.
-
-![How to find your dev secret key](/images/api-key-dev.png)
-
-Then create an `.env` file in the functions folder, and add your `TRIGGER_SECRET_KEY`.
-
-```ts functions/.env
-TRIGGER_SECRET_KEY = "your-secret-key";
-```
-
-<Warning>
-  If you are using GitHub - make sure to include `.env` in your `.gitignore` file before committing
-  any files to GitHub.
-</Warning>
-
-</Step>
-
-<Step title="Test your new edge function locally">
-
-To do this, open up two terminal windows in your project.
-
-In the first terminal window run:
-
-<CodeGroup>
-
-```bash npm
-npx trigger.dev@beta dev
-```
-
-```bash pnpm
-pnpm dlx trigger.dev@beta dev
-```
-
-```bash yarn
-yarn dlx trigger.dev@beta dev
-```
-
-</CodeGroup>
-
-The CLI `dev` command runs a server for your tasks. It watcbes for changes in your `/trigger` directory and communicates with the Trigger.dev platform to register your tasks, perform runs, and send data back and forth.
-
-In the second terminal run this command:
-
-```bash
-supabase functions serve edge-function-trigger
-```
-
-Click the link provided to open the preview URL, making sure to add your function name to the end:
-
-`http://127.0.0.1:54321/functions/v1/<function-name>`
+<Step title="Create a new database">
 
-So in this case:
+In your Supabase dashboard, click on 'Table Editor' in the left-hand menu.
 
-`http://127.0.0.1:54321/functions/v1/edge-function-trigger`
+[How to create a new table]()
 
-When the URL is opened, your `hello-world` task should be triggered, and you should see `"OK"` in your browser window.
+Create a new table called `skynet`.
 
-Check the first terminal window to see if the task has run successfully. You can also check the [cloud.trigger.dev](http://cloud.trigger.dev) runs dashboard to see if there has been a successful run.
+Add a new column called `name` with the type `text`.
 
 </Step>
-</Steps>
-
-## Deploy your new Supabase edge function and Trigger.dev task
-
-Now that your edge function is working in dev, you can deploy it to production.
-
-<Steps>
-
-<Step title="Add your Trigger.dev prod secret key in Supabase">
-
-Go to your Trigger.dev project and copy the `prod` secret key from the API keys page.
-
-![How to find your prod secret key](/images/api-key-prod.png)
 
-Then, in Supabase, navigate to your settings page, click 'Edge functions' in the configurations menu, and then click the 'Add new secret' button.
+<Step title="Configure JWT settings">
 
-Add `TRIGGER_SECRET_KEY` with the pasted value of your Trigger.dev `prod` secret key.
+By default, Supabase edge functions require a JSON Web Token (JWT) in the authorization header. This is to ensure that only authorized users can access your edge functions.
 
-![Add secret key in Supabase](/images/supabase-keys-1.png)
+First, go to your Supabase dashboard, click 'Project settings', 'API' tab, and copy the `anon` `public` API key from the table.
 
-</Step>
-
-<Step title="Deploy your edge function using the Supabase CLI">
+[How to find your Supabase API keys]()
 
-Go back to your project, and deploy your edge function with the following command:
+Then, go to 'Database' in the Supabase dashboard, click on 'Webhooks', and then click 'Create a new hook'.
 
-```bash
-supabase functions deploy edge-function-trigger --no-verify-jwt
-```
+[How to create a new webhook]()
 
-<Note>
-  `--no-verify-jwt` removes the JSON Web Tokens requirement from the authorization header. By
-  default this should be on, but it is not required for this example. Learn more about JWTs
-  [here](https://supabase.com/docs/guides/auth/jwts).
-</Note>
+Call the hook `edge-function-hook`:
 
-Follow the CLI instructions and once complete you should now see your new edge function deployment in your Supabase edge functions dashboard.
+1. Select the new table you have created: `public``skynet`.
+2. Choose the `insert` event.
+3. Under 'Webhook configuration', select 'Supabase Edge functions'
+4. Under 'Edge function', choose `POST` and select the edge function you have created: `database-webhook`.
+5. Under 'Headers', add a new header with the key `Authorization` and the value `Bearer <your-api-key>` (replace `<your-api-key>` with the `anon` `public` API key you copied earlier).
+6. Click 'Create webhook'.
 
-Your new `edge-function-trigger` edge function is now ready to trigger your `hello-world` task.
+[How to configure the webhook]()
 
 </Step>
+<Step title="Trigger your new database webhook edge function">
 
-<Step title="Deploy your hello-world task">
+Go back to your Supabase dashboard, click on 'Table Editor' in the left-hand menu, and then click on the `skynet` table.
 
-Deploy your `hello-world` task to [Trigger.dev cloud](https://cloud.trigger.dev).
-
-<CodeGroup>
+Click 'insert', and add a new item under `name`, with the value `Sarah Connor`.
 
-```bash npm
-npx trigger.dev@beta deploy
-```
+[How to insert a new row]()
 
-```bash pnpm
-pnpm dlx trigger.dev@beta deploy
-```
+Go back to your edge function dashboard, and you should see a new run of your edge function, under 'Logs'.
 
-```bash yarn
-yarn dlx trigger.dev@beta deploy
-```
+[How to view the logs]()
 
-</CodeGroup>
+Congratulations, you have successfully triggered a task from a Supabase edge function using a database webhook!
 
 </Step>
 
-<Step title="Trigger a prod run from your deployed edge function">
-
-To do this all you need to do is simply open the `edge-function-trigger` URL.
-
-On your Supabase dashboard, go to your Edge function dashboard, copy the URL, and paste it into your browser.
-
-Once loaded you should see ‘OK’ on the new screen.
-
-![Edge function URL](/images/supabase-function-url.png)
-
-The task will be triggered when your edge function URL is accessed.
-
-Check the terminal to see if the task has run. You can also check the [cloud.trigger.dev](http://cloud.trigger.dev) dashboard for any successful runs.
-
-    **Congratulations, you have run a simple Hello World task from a Supabase edge function!**
-
-</Step>
 </Steps>
 
 <UsefulNextSteps />