Skip to content

Commit 7ca2b62

Browse files
D-K-PD-K-P
authored
Added tutorial docs and images (#1295)
1 parent 9c61a25 commit 7ca2b62

20 files changed

+481
-4
lines changed

‎docs/guides/frameworks/supabase-edge-functions-basic.mdx

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: "Triggering tasks from Supabase edge functions"
3+
sidebarTitle: "Edge function hello world"
4+
description: "This guide will show you how to trigger a task from a Supabase edge function, and then view the run in our dashboard."
5+
---
6+
7+
import Prerequisites from "/snippets/framework-prerequisites.mdx";
8+
import SupabasePrerequisites from "/snippets/supabase-prerequisites.mdx";
9+
import CliInitStep from "/snippets/step-cli-init.mdx";
10+
import CliDevStep from "/snippets/step-cli-dev.mdx";
11+
import CliRunTestStep from "/snippets/step-run-test.mdx";
12+
import CliViewRunStep from "/snippets/step-view-run.mdx";
13+
import UsefulNextSteps from "/snippets/useful-next-steps.mdx";
14+
import TriggerTaskNextjs from "/snippets/trigger-tasks-nextjs.mdx";
15+
import NextjsTroubleshootingMissingApiKey from "/snippets/nextjs-missing-api-key.mdx";
16+
import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.mdx";
17+
import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
18+
19+
## Overview
20+
21+
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 or updates to your Supabase database.
22+
23+
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.
24+
25+
## Prerequisites
26+
27+
- Ensure you have the [Supabase CLI](https://supabase.com/docs/guides/cli/getting-started) installed
28+
- Ensure TypeScript is installed
29+
- [Create a Trigger.dev account](https://cloud.trigger.dev)
30+
- [Create a new Trigger.dev project](/guides/dashboard/creating-a-project)
31+
32+
## Initial setup
33+
34+
<Steps>
35+
<SupabasePrerequisites />
36+
<CliInitStep />
37+
<CliDevStep />
38+
<CliRunTestStep />
39+
<CliViewRunStep />
40+
</Steps>
41+
42+
## Create a new Supabase edge function and deploy it
43+
44+
<Steps>
45+
46+
<Step title="Create a new Supabase edge function">
47+
48+
We'll call this example `edge-function-trigger`.
49+
50+
In your project, run the following command in the terminal using the Supabase CLI:
51+
52+
```bash
53+
supabase functions new edge-function-trigger
54+
```
55+
56+
</Step>
57+
58+
<Step title="Update the edge function code">
59+
60+
Replace the placeholder code in your `edge-function-trigger/index.ts` file with the following:
61+
62+
```ts functions/edge-function-trigger/index.ts
63+
// Setup type definitions for built-in Supabase Runtime APIs
64+
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
65+
// Import the Trigger.dev SDK - replace "<your-sdk-version>" with the version of the SDK you are using, e.g. "3.0.0-beta.55". You can find this in your package.json file.
66+
import { tasks } from "npm:@trigger.dev/sdk@<your-sdk-version>/v3";
67+
// Import your task type from your /trigger folder
68+
import type { helloWorldTask } from "../../../src/trigger/example.ts";
69+
70+
Deno.serve(async () => {
71+
await tasks.trigger<typeof helloWorldTask>(
72+
// Your task id
73+
"hello-world",
74+
// Your task payload
75+
"Hello from a Supabase Edge Function!"
76+
);
77+
return new Response("OK");
78+
});
79+
```
80+
81+
<Note>You can only import the `type` from the task.</Note>
82+
<Note>
83+
Tasks in the `trigger` folder use Node, so they must stay in there or they will not run,
84+
especially if you are using a different runtime like Deno. Also do not add "`npm:`" to imports
85+
inside your task files, for the same reason.
86+
</Note>
87+
88+
</Step>
89+
90+
<Step title="Deploy your edge function using the Supabase CLI">
91+
92+
You can now deploy your edge function with the following command in your terminal:
93+
94+
```bash
95+
supabase functions deploy edge-function-trigger --no-verify-jwt
96+
```
97+
98+
<Note>
99+
`--no-verify-jwt` removes the JSON Web Tokens requirement from the authorization header. By
100+
default this should be on, but it is not required for this example. Learn more about JWTs
101+
[here](https://supabase.com/docs/guides/auth/jwts).
102+
</Note>
103+
104+
Follow the CLI instructions and once complete you should now see your new edge function deployment in your Supabase edge functions dashboard.
105+
106+
There will be a link to the dashboard in your terminal output, or you can find it at this URL:
107+
108+
`https://supabase.com/dashboard/project/<your-project-id>/functions`
109+
110+
<Note>Replace `your-project-id` with your actual project ID.</Note>
111+
112+
</Step>
113+
114+
</Steps>
115+
116+
## Set your Trigger.dev prod secret key in the Supabase dashboard
117+
118+
To trigger a task from your edge function, you need to set your Trigger.dev secret key in the Supabase dashboard.
119+
120+
To do this, first go to your Trigger.dev [project dashboard](https://cloud.trigger.dev) and copy the `prod` secret key from the API keys page.
121+
122+
![How to find your prod secret key](/images/api-key-prod.png)
123+
124+
Then, in [Supabase](https://supabase.com/dashboard/projects), select your project, 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.
125+
126+
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.
127+
128+
![Add secret key in Supabase](/images/supabase-keys-1.png)
129+
130+
## Deploy your task and trigger it from your edge function
131+
132+
<Steps>
133+
134+
<Step title="Deploy your 'Hello World' task">
135+
136+
Next, deploy your `hello-world` task to [Trigger.dev cloud](https://cloud.trigger.dev).
137+
138+
<CodeGroup>
139+
140+
```bash npm
141+
npx trigger.dev@beta deploy
142+
```
143+
144+
```bash pnpm
145+
pnpm dlx trigger.dev@beta deploy
146+
```
147+
148+
```bash yarn
149+
yarn dlx trigger.dev@beta deploy
150+
```
151+
152+
</CodeGroup>
153+
154+
</Step>
155+
156+
<Step title="Trigger a prod run from your deployed edge function">
157+
158+
To do this all you need to do is simply open the `edge-function-trigger` URL.
159+
160+
`https://supabase.com/dashboard/project/<your-project-id>/functions`
161+
162+
<Note>Replace `your-project-id` with your actual project ID.</Note>
163+
164+
In your Supabase project, go to your Edge function dashboard, find `edge-function-trigger`, copy the URL, and paste it into a new window in your browser.
165+
166+
Once loaded you should see ‘OK’ on the new screen.
167+
168+
![Edge function URL](/images/supabase-function-url.png)
169+
170+
The task will be triggered when your edge function URL is accessed.
171+
172+
Check your [cloud.trigger.dev](http://cloud.trigger.dev) dashboard and you should see a succesful `hello-world` task.
173+
174+
**Congratulations, you have run a simple Hello World task from a Supabase edge function!**
175+
176+
</Step>
177+
</Steps>
178+
179+
<UsefulNextSteps />

0 commit comments

Comments
 (0)