Skip to content

Commit d9fbd1c

Browse files
D-K-PD-K-P
committed
More improvements
1 parent a443794 commit d9fbd1c

File tree

1 file changed

+117
-127
lines changed

1 file changed

+117
-127
lines changed

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

Lines changed: 117 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,21 @@ import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";
1717

1818
Supabase and Trigger.dev can be used together to create powerful workflows triggered by real-time changes in your database tables:
1919

20-
The steps in this guide are as follows:
21-
2220
- A Supabase Database Webhook triggers an Edge Function when a row including a video URL is inserted into a table
2321
- The Edge Function triggers a Trigger.dev task, passing the `video_url` column data from the new table row as the payload
2422
- The Trigger.dev task then:
2523
- Uses [FFmpeg](https://www.ffmpeg.org/) to extract the audio track from a video URL
2624
- Uses [Deepgram](https://deepgram.com) to transcribe the extracted audio
27-
- Updates the original table row in Supabase with the transcription using `update`
25+
- Updates the original table row using the `record.id` in Supabase with the new transcription using `update`
2826

2927
## Prerequisites
3028

3129
- Ensure you have the [Supabase CLI](https://supabase.com/docs/guides/cli/getting-started) installed
30+
- Since Supabase CLI version 1.123.4, you must have [Docker Desktop installed](https://supabase.com/docs/guides/functions/deploy#deploy-your-edge-functions) to deploy Edge Functions
3231
- Ensure TypeScript is installed
3332
- [Create a Trigger.dev account](https://cloud.trigger.dev)
3433
- [Create a new Trigger.dev project](/guides/dashboard/creating-a-project)
3534
- [Create a new Deepgram account](https://deepgram.com/) and get your API key from the dashboard
36-
- [Docker](https://docs.docker.com/get-docker/) installed and runningon your machine
3735

3836
## Initial setup
3937

@@ -74,124 +72,60 @@ Choose "None" when prompted to install an example task. We will create a new tas
7472

7573
</Steps>
7674

77-
## Create and deploy a Supabase Edge Function and configure the Database Webhook
78-
79-
### Add your Trigger.dev prod secret key to the Supabase dashboard
80-
81-
First, go to your Trigger.dev [project dashboard](https://cloud.trigger.dev) and copy the `prod` secret key from the API keys page.
75+
## Create a new table in your Supabase database
8276

83-
![How to find your prod secret key](/images/api-key-prod.png)
77+
First, in the Supabase project dashboard, you'll need to create a new table to store the video URL and transcription.
8478

85-
Then, in [Supabase](https://supabase.com/dashboard/projects), select the project you want to use, navigate to 'Project settings' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" />, click 'Edge Functions' <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" /> in the configurations menu, and then click the 'Add new secret' <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" /> button.
79+
To do this, click on 'Table Editor' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> in the left-hand menu and create a new table. <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />
8680

87-
Add `TRIGGER_SECRET_KEY` <Icon icon="circle-4" iconType="solid" size={20} color="A8FF53" /> with the pasted value of your Trigger.dev `prod` secret key.
88-
89-
![Add secret key in Supabase](/images/supabase-keys-1.png)
90-
91-
### Create a new Edge Function using the Supabase CLI
92-
93-
Now create an Edge Function using the Supabase CLI. Call it `video-processing-handler`. This function will be triggered by the Database Webhook.
94-
95-
```bash
96-
supabase functions new video-processing-handler
97-
```
98-
99-
<Note>
100-
We will replace the code in this function later in the guide, but for now you can leave the
101-
default code in place.
102-
</Note>
103-
104-
### Deploy the Edge Function
105-
106-
Now deploy your new Edge Function with the following command:
107-
108-
```bash
109-
supabase functions deploy video-processing-handler
110-
```
111-
112-
Follow the CLI instructions, selecting the same project you added your `prod` secret key to, and once complete you should see your new Edge Function deployment in your Supabase Edge Functions dashboard.
113-
114-
There will be a link to the dashboard in your terminal output.
115-
116-
### Create a new table in your Supabase dashboard
117-
118-
Next, in your Supabase dashboard, click on 'Table Editor' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> in the left-hand menu and create a new table. <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />
119-
120-
![How to create a new table](/images/supabase-new-table-1.png)
81+
![How to create a new Supabase table](/images/supabase-new-table-1.png)
12182

12283
Call your table `video_transcriptions`. <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" />
12384

12485
Add two new columns, one called `video_url` with the type `text` <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />, and another called `transcription`, also with the type `text` <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" />.
12586

126-
### Create a new Database Webhook
127-
128-
In your Supabase project dashboard, click 'Project settings' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" />, then the 'API' tab <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />, and copy the `anon` `public` API key from the table <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" />.
87+
![How to create a new Supabase table 2](/images/supabase-new-table-2.png)
12988

130-
![How to find your Supabase API keys](/images/supabase-api-key.png)
89+
## Create and deploy the Trigger.dev task
13190

132-
Then, go to 'Database' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> click on 'Webhooks' <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />, and then click 'Create a new hook' <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" />.
91+
### Generate the Database type definitions
13392

134-
![How to create a new webhook](/images/supabase-create-webhook-1.png)
93+
To allow you to use TypeScript to interact with your table, you need to [generate the type definitions](https://supabase.com/docs/guides/api/rest/generating-types) for your Supabase table using the Supabase CLI.
13594

136-
<Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> Call the hook `edge-function-hook`.
137-
138-
<Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" /> Select the new table you have created:
139-
`public` `video_transcriptions`.
140-
141-
<Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" /> Choose the `insert` event.
142-
143-
![How to create a new webhook 2](/images/supabase-create-webhook-2.png)
144-
145-
<Icon icon="circle-4" iconType="solid" size={20} color="A8FF53" /> Under 'Webhook configuration', select
146-
'Supabase Edge Functions'{" "}
147-
148-
<Icon icon="circle-5" iconType="solid" size={20} color="A8FF53" /> Under 'Edge Function', choose `POST`
149-
and select the Edge Function you have created: `video-processing-handler`.{" "}
150-
151-
<Icon icon="circle-6" iconType="solid" size={20} color="A8FF53" /> Under 'HTTP 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).
152-
153-
<Info>
154-
Supabase Edge Functions require a JSON Web Token [JWT](https://supabase.com/docs/guides/auth/jwts)
155-
in the authorization header. This is to ensure that only authorized users can access your edge
156-
functions.
157-
</Info>
158-
159-
<Icon icon="circle-7" iconType="solid" size={20} color="A8FF53" /> Click 'Create webhook'.{" "}
160-
161-
![How to create a new webhook 3](/images/supabase-create-webhook-3.png)
162-
163-
Your Database Webhook is now ready to use.
95+
```bash
96+
supabase gen types --lang=typescript --project-id <project-ref> --schema public > database.types.ts
97+
```
16498

165-
## Creating and deploying the Trigger.dev task and updating the edge function
99+
<Note> Replace `<project-ref>` with your Supabase project reference ID. This can be found in your Supabase project settings under 'General'. </Note>
166100

167-
### Creating and deploying the Trigger.dev task
101+
### Create the transcription task
168102

169103
Create a new task file in your `/trigger` folder. Call it `videoProcessAndUpdate.ts`.
170104

171-
This task with take a video from a public video url, extract the audio using FFmpeg and transcribe the audio using Deepgram. The transcription summary will then be added back to the original row in the `video_transcriptions` table in Supabase.
105+
This task takes a video from a public video url, extracts the audio using FFmpeg and transcribes the audio using Deepgram. The transcription summary will then be updated back to the original row in the `video_transcriptions` table in Supabase.
172106

173-
#### Generate the Database type definitions for your Supabase table
107+
You will need to install some additional dependencies for this task:
174108

175-
First, you need to [generate the type definitions](https://supabase.com/docs/guides/api/rest/generating-types) for your Supabase table using the Supabase CLI. This will allow you to use TypeScript to interact with your table.
109+
<CodeGroup>
176110

177-
```bash
178-
npx supabase gen types --lang=typescript --project-id "vuzgnncyyceddococcgj" --schema public > database.types.ts
111+
```bash npm
112+
npm install @deepgram/sdk @supabase/supabase-js fluent-ffmpeg
179113
```
180114

181-
<Note> Replace `<project-ref>` with your Supabase project reference ID. This can be found in your Supabase project settings under 'General'. </Note>
182-
183-
#### Create the transcription task
184-
185-
You will need to install some additional dependencies for this task:
115+
```bash pnpm
116+
pnpm install @deepgram/sdk @supabase/supabase-js fluent-ffmpeg
117+
```
186118

187-
```bash
188-
npm install @deepgram/sdk @supabase/supabase-js fluent-ffmpeg
119+
```bash yarn
120+
yarn install @deepgram/sdk @supabase/supabase-js fluent-ffmpeg
189121
```
190122

191-
These dependencies will allow you to interact with the Deepgram and Supabase APIs, extract audio from a video using FFmpeg, and fetch the video from a URL.
123+
</CodeGroup>
124+
125+
These dependencies will allow you to interact with the Deepgram and Supabase APIs and extract audio from a video using FFmpeg.
192126

193127
```ts /trigger/videoProcessAndUpdate.ts
194-
// Install any missing dependencies below using npm or yarn
128+
// Install any missing dependencies below
195129
import { createClient as createDeepgramClient } from "@deepgram/sdk";
196130
import { createClient as createSupabaseClient } from "@supabase/supabase-js";
197131
import { logger, task } from "@trigger.dev/sdk/v3";
@@ -210,24 +144,20 @@ const supabase = createSupabaseClient<Database>(
210144
process.env.SUPABASE_SERVICE_ROLE_KEY as string // Your service role secret key
211145
);
212146

147+
// Your DEEPGRAM_SECRET_KEY can be found in your Deepgram dashboard
213148
const deepgram = createDeepgramClient(process.env.DEEPGRAM_SECRET_KEY);
214149

215150
export const videoProcessAndUpdate = task({
216151
id: "video-process-and-update",
217-
init: () => {
152+
run: async (payload: { videoUrl: string; id: number }) => {
153+
const { videoUrl, id } = payload;
154+
155+
logger.log(`Processing video at URL: ${videoUrl}`);
156+
218157
// Generate temporary file names
219158
const tempDirectory = os.tmpdir();
220159
const outputPath = path.join(tempDirectory, `audio_${Date.now()}.wav`);
221160

222-
return {
223-
outputPath,
224-
};
225-
},
226-
run: async (payload: { id: string; videoUrl: string }, { init }) => {
227-
const { videoUrl } = payload;
228-
229-
logger.log(`Processing video at URL: ${videoUrl}`);
230-
231161
// Fetch the video
232162
const response = await fetch(videoUrl);
233163

@@ -244,7 +174,7 @@ export const videoProcessAndUpdate = task({
244174
"-ar 44100", // Set audio sample rate to 44.1 kHz
245175
"-ac 2", // Set audio channels to stereo
246176
])
247-
.output(init.outputPath)
177+
.output(outputPath)
248178
.on("end", resolve)
249179
.on("error", reject)
250180
.run();
@@ -256,11 +186,9 @@ export const videoProcessAndUpdate = task({
256186
const { result, error } = await deepgram.listen.prerecorded.transcribeFile(
257187
fs.readFileSync(outputPath),
258188
{
259-
model: "nova-2",
260-
smart_format: true,
261-
// paragraphs: true,
262-
// punctuate: true,
263-
diarize: true,
189+
model: "nova-2", // Use the Nova 2 model
190+
smart_format: true, // Automatically format the transcription
191+
diarize: true, // Enable speaker diarization
264192
}
265193
);
266194

@@ -273,11 +201,16 @@ export const videoProcessAndUpdate = task({
273201

274202
logger.log(`Transcription: ${transcription}`);
275203

204+
// Delete the temporary audio file
205+
fs.unlinkSync(outputPath);
206+
logger.log(`Temporary audio file deleted`, { outputPath });
207+
276208
const { error: updateError } = await supabase
277209
.from("video_transcriptions")
278210
// Set the plan to the new plan and update the timestamp
279-
.update({ transcription: transcription })
280-
.eq("id", payload.id);
211+
.update({ transcription: transcription, video_url: videoUrl })
212+
// Find the row by its ID
213+
.eq("id", id);
281214

282215
// If there was an error updating the subscription, throw an error
283216
if (updateError) {
@@ -289,15 +222,10 @@ export const videoProcessAndUpdate = task({
289222
result,
290223
};
291224
},
292-
cleanup: ({ init }) => {
293-
// Delete the temporary audio file
294-
fs.unlinkSync(init.outputPath);
295-
logger.log(`Temporary audio file deleted`, { outputPath: init.outputPath });
296-
},
297225
});
298226
```
299227

300-
#### Adding the FFmpeg build extension
228+
### Adding the FFmpeg build extension
301229

302230
Before you can deploy the task, you'll need to add the FFmpeg build extension to your `trigger.config.ts` file.
303231

@@ -329,13 +257,13 @@ export default defineConfig({
329257

330258
### Add your Deepgram and Supabase environment variables to your Trigger.dev project
331259

332-
You will need to add your `DEEPGRAM_SECRET_KEY`, `SUPABASE_PROJECT_URL` and `SUPABASE_SERVICE_ROLE_KEY` as environment variables in your Trigger.dev project. This can be done in the 'Environment Variables' page in your Trigger.dev project dashboard.
260+
You will need to add your `DEEPGRAM_SECRET_KEY`, `SUPABASE_PROJECT_URL` and `SUPABASE_SERVICE_ROLE_KEY` as environment variables in your Trigger.dev project. This can be done in the 'Environment Variables' page in your project dashboard.
333261

334262
![Adding environment variables](/images/environment-variables-page.jpg)
335263

336264
### Deploying your task
337265

338-
You can now deploy your task using the following command:
266+
Now you can now deploy your task using the following command:
339267

340268
<CodeGroup>
341269

@@ -353,9 +281,27 @@ yarn dlx trigger.dev@latest deploy
353281

354282
</CodeGroup>
355283

356-
#### Update the Edge Function to trigger the task
284+
## Create and deploy the Supabase Edge Function
285+
286+
### Add your Trigger.dev prod secret key to the Supabase dashboard
357287

358-
Finally, we need to replace your `video-processing-handler` Edge Function code with the below to trigger the `videoProcessAndUpdate` task when it is called.
288+
Go to your Trigger.dev [project dashboard](https://cloud.trigger.dev) and copy the `prod` secret key from the API keys page.
289+
290+
![How to find your prod secret key](/images/api-key-prod.png)
291+
292+
Then, in [Supabase](https://supabase.com/dashboard/projects), select the project you want to use, navigate to 'Project settings' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" />, click 'Edge Functions' <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" /> in the configurations menu, and then click the 'Add new secret' <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" /> button.
293+
294+
Add `TRIGGER_SECRET_KEY` <Icon icon="circle-4" iconType="solid" size={20} color="A8FF53" /> with the pasted value of your Trigger.dev `prod` secret key.
295+
296+
![Add secret key in Supabase](/images/supabase-keys-1.png)
297+
298+
### Create a new Edge Function using the Supabase CLI
299+
300+
Now create an Edge Function using the Supabase CLI. Call it `video-processing-handler`. This function will be triggered by the Database Webhook.
301+
302+
```bash
303+
supabase functions new video-processing-handler
304+
```
359305

360306
```ts functions/video-processing-handler/index.ts
361307
// Setup type definitions for built-in Supabase Runtime APIs
@@ -369,11 +315,12 @@ import type { videoProcessAndUpdate } from "../../../src/trigger/videoProcessAnd
369315
Deno.serve(async (req) => {
370316
const payload = await req.json();
371317

372-
// This payload will contain the video url from the new row in the table
318+
// This payload will contain the video url and id from the new row in the table
373319
const videoUrl = payload.record.video_url;
320+
const id = payload.record.id;
374321

375322
// Trigger the videoProcessAndUpdate task with the videoUrl payload
376-
await tasks.trigger<typeof videoProcessAndUpdate>("video-process-and-update", { videoUrl });
323+
await tasks.trigger<typeof videoProcessAndUpdate>("video-process-and-update", { videoUrl, id });
377324
console.log(payload ?? "No name provided");
378325

379326
return new Response("ok");
@@ -386,14 +333,57 @@ Deno.serve(async (req) => {
386333
inside your task files, for the same reason.
387334
</Note>
388335

389-
#### Redeploy the Edge Function
336+
### Deploy the Edge Function
390337

391-
Now your Edge function has been update you will need to redeploy it using the Supabase CLI.
338+
Now deploy your new Edge Function with the following command:
392339

393340
```bash
394341
supabase functions deploy video-processing-handler
395342
```
396343

344+
Follow the CLI instructions, selecting the same project you added your `prod` secret key to, and once complete you should see your new Edge Function deployment in your Supabase Edge Functions dashboard.
345+
346+
There will be a link to the dashboard in your terminal output.
347+
348+
## Create the Database Webhook
349+
350+
In your Supabase project dashboard, click 'Project settings' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" />, then the 'API' tab <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />, and copy the `anon` `public` API key from the table <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" />.
351+
352+
![How to find your Supabase API keys](/images/supabase-api-key.png)
353+
354+
Then, go to 'Database' <Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> click on 'Webhooks' <Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" />, and then click 'Create a new hook' <Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" />.
355+
356+
![How to create a new webhook](/images/supabase-create-webhook-1.png)
357+
358+
<Icon icon="circle-1" iconType="solid" size={20} color="A8FF53" /> Call the hook `edge-function-hook`.
359+
360+
<Icon icon="circle-2" iconType="solid" size={20} color="A8FF53" /> Select the new table you have created:
361+
`public` `video_transcriptions`.
362+
363+
<Icon icon="circle-3" iconType="solid" size={20} color="A8FF53" /> Choose the `insert` event.
364+
365+
![How to create a new webhook 2](/images/supabase-create-webhook-2.png)
366+
367+
<Icon icon="circle-4" iconType="solid" size={20} color="A8FF53" /> Under 'Webhook configuration', select
368+
'Supabase Edge Functions'{" "}
369+
370+
<Icon icon="circle-5" iconType="solid" size={20} color="A8FF53" /> Under 'Edge Function', choose `POST`
371+
and select the Edge Function you have created: `video-processing-handler`.{" "}
372+
373+
<Icon icon="circle-6" iconType="solid" size={20} color="A8FF53" /> Under 'HTTP 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).
374+
375+
<Info>
376+
Supabase Edge Functions require a JSON Web Token [JWT](https://supabase.com/docs/guides/auth/jwts)
377+
in the authorization header. This is to ensure that only authorized users can access your edge
378+
functions.
379+
</Info>
380+
381+
<Icon icon="circle-7" iconType="solid" size={20} color="A8FF53" /> Click 'Create webhook'.{" "}
382+
383+
![How to create a new webhook 3](/images/supabase-create-webhook-3.png)
384+
385+
Your Database Webhook is now ready to use.
386+
397387
## Triggering the entire workflow
398388

399389
Your `video-processing-handler` Edge Function is now set up to trigger the `videoProcessAndUpdate` task every time a new row is inserted into your `video_transcriptions` table.

0 commit comments

Comments
 (0)