Skip to content

Commit 3b273b7

Browse files
D-K-PD-K-P
committed
Added dropdown
1 parent b2749bc commit 3b273b7

File tree

3 files changed

+294
-1
lines changed

3 files changed

+294
-1
lines changed

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

File renamed without changes.

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

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
---
2+
title: "Triggering tasks from Supabase edge functions"
3+
sidebarTitle: "Supabase"
4+
description: "This guide will show you how to trigger a task from a Supabase edge function, and then view the run."
5+
icon: "bolt"
6+
---
7+
8+
import Prerequisites from "/snippets/framework-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 / 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+
- Setup a project in [Supabase](https://supabase.com/) and have the Supabase CLI 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+
36+
<Step title="Run the CLI `init` command">
37+
38+
The easiest way to get started it to use the CLI. It will add Trigger.dev to your existing project, create a `/trigger` folder and give you an example task.
39+
40+
<Note>
41+
If you are using Deno, to install Trigger.dev you must first add a `tsconfig.json` file with these settings to the root directory:
42+
<Accordion title="tsconfig.json file to add">
43+
```json tsconfig.json
44+
{
45+
"compilerOptions": {
46+
"allowJs": true,
47+
"esModuleInterop": true,
48+
"experimentalDecorators": true,
49+
"inlineSourceMap": true,
50+
"isolatedModules": true,
51+
"jsx": "react",
52+
"lib": ["esnext"],
53+
"module": "NodeNext",
54+
"moduleResolution": "NodeNext",
55+
"strict": true,
56+
"target": "esnext",
57+
"useDefineForClassFields": true
58+
},
59+
"exclude": ["node_modules"]
60+
}
61+
```
62+
</Accordion>
63+
</Note>
64+
65+
Run this command in the root of your project to get started:
66+
67+
<CodeGroup>
68+
69+
```bash npm
70+
npx trigger.dev@beta init
71+
```
72+
73+
```bash pnpm
74+
pnpm dlx trigger.dev@beta init
75+
```
76+
77+
```bash yarn
78+
yarn dlx trigger.dev@beta init
79+
```
80+
81+
</CodeGroup>
82+
83+
It will do a few things:
84+
85+
1. Log you into the CLI if you're not already logged in.
86+
2. Create a `trigger.config.ts` file in the root of your project.
87+
3. Ask where you'd like to create the `/trigger` directory.
88+
4. Create the `/trigger` directory with an example task, `/trigger/example.[ts/js]`.
89+
90+
Install the "Hello World" example task when prompted. We'll use this task to test the setup.
91+
92+
</Step>
93+
<CliDevStep />
94+
<CliRunTestStep />
95+
<CliViewRunStep />
96+
</Steps>
97+
98+
## Create and a new Supabase edge function and trigger a dev run
99+
100+
<Steps>
101+
102+
<Step title="Create a new edge function using the Supabase CLI">
103+
104+
We will call this example edge function `edge-function-trigger`.
105+
106+
```bash
107+
supabase functions new edge-function-trigger
108+
```
109+
110+
</Step>
111+
112+
<Step title="Update the edge function code">
113+
114+
Replace the `edge-function-trigger` placeholder code with the following:
115+
116+
```ts edge-function-trigger/index.ts
117+
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
118+
import { tasks } from "npm:@trigger.dev/[email protected]/v3";
119+
// Import your task type from your /trigger folder
120+
import type { helloWorldTask } from "../../../src/trigger/example.ts";
121+
122+
Deno.serve(async (req) => {
123+
// @ts-expect-error: Ignoring Task type mismatch and RunHandle incompatibility
124+
await tasks.trigger<typeof helloWorldTask>("edge-function-trigger", "hello");
125+
return new Response("OK");
126+
});
127+
```
128+
129+
<Note>You can only import the `type` from the task.</Note>
130+
<Note>
131+
Tasks in the `trigger` folder use Node, so they must stay in there or they will not run,
132+
especially if you are using a different runtime like Deno. Also do not add "`npm:`" to imports
133+
inside your task files, for the same reason.
134+
</Note>
135+
136+
</Step>
137+
138+
<Step title="Add a .env file to be able to test locally">
139+
140+
First, go to your Trigger.dev project and copy the `dev` secret key from the API keys page.
141+
142+
![How to find your dev secret key](/images/api-key-dev.png)
143+
144+
Then create an `.env` file in the functions folder, and add your `TRIGGER_SECRET_KEY`.
145+
146+
```ts functions/.env
147+
TRIGGER_SECRET_KEY="your-secret-key";
148+
```
149+
150+
<Warning>
151+
If you are using GitHub - make sure to include `.env` in your `.gitignore` file before committing any files to GitHub.
152+
</Warning>
153+
154+
</Step>
155+
156+
<Step title="Test your new edge function locally">
157+
158+
To do this, open up two terminal windows in your project.
159+
160+
In the first terminal window run:
161+
162+
<CodeGroup>
163+
164+
```bash npm
165+
npx trigger.dev@beta dev
166+
```
167+
168+
```bash pnpm
169+
pnpm dlx trigger.dev@beta dev
170+
```
171+
172+
```bash yarn
173+
yarn dlx trigger.dev@beta dev
174+
```
175+
176+
</CodeGroup>
177+
178+
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.
179+
180+
In the second terminal run this command:
181+
182+
```bash
183+
supabase functions serve edge-function-trigger
184+
```
185+
186+
Click the link provided to open the preview URL, making sure to add your function name to the end:
187+
188+
`http://127.0.0.1:54321/functions/v1/<function-name>`
189+
190+
So in this case:
191+
192+
`http://127.0.0.1:54321/functions/v1/edge-function-trigger`
193+
194+
When the URL is opened, your `hello-world` task should be triggered, and you should see `"OK"` in your browser window.
195+
196+
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.
197+
198+
</Step>
199+
</Steps>
200+
201+
## Deploy your new Supabase edge function and Trigger.dev task
202+
203+
Now that your edge function is working in dev, you can deploy it to production.
204+
205+
<Steps>
206+
207+
<Step title="Add your Trigger.dev prod secret key in Supabase">
208+
209+
Go to your Trigger.dev project and copy the `prod` secret key from the API keys page.
210+
211+
![How to find your prod secret key](/images/api-key-prod.png)
212+
213+
Then, in Supabase, navigate to your settings page, click 'Edge functions' in the configurations menu, and then click the 'Add new secret' button.
214+
215+
Add `TRIGGER_SECRET_KEY` with the pasted value of your Trigger.dev `prod` secret key.
216+
217+
![Add secret key in Supabase](/images/supabase-keys-1.png)
218+
219+
</Step>
220+
221+
<Step title="Deploy your edge function using the Supabase CLI">
222+
223+
Go back to your project, and deploy your edge function with the following command:
224+
225+
```bash
226+
supabase functions deploy edge-function-trigger --no-verify-jwt
227+
```
228+
229+
<Note>
230+
`--no-verify-jwt` removes the JSON Web Tokens requirement from the authorization header. By
231+
default this should be on, but it is not required for this example. Learn more about JWTs
232+
[here](https://supabase.com/docs/guides/auth/jwts).
233+
</Note>
234+
235+
Follow the CLI instructions and once complete you should now see your new edge function deployment in your Supabase edge functions dashboard.
236+
237+
Your new `edge-function-trigger` edge function is now ready to trigger your `hello-world` task.
238+
239+
</Step>
240+
241+
<Step title="Deploy your hello-world task">
242+
243+
Deploy your `hello-world` task to [Trigger.dev cloud](https://cloud.trigger.dev).
244+
245+
<CodeGroup>
246+
247+
```bash npm
248+
npx trigger.dev@beta deploy
249+
```
250+
251+
```bash pnpm
252+
pnpm dlx trigger.dev@beta deploy
253+
```
254+
255+
```bash yarn
256+
yarn dlx trigger.dev@beta deploy
257+
```
258+
259+
</CodeGroup>
260+
261+
</Step>
262+
263+
<Step title="Trigger a prod run from your deployed edge function">
264+
265+
To do this all you need to do is simply open the `edge-function-trigger` URL.
266+
267+
On your Supabase dashboard, go to your Edge function dashboard, copy the URL, and paste it into your browser.
268+
269+
Once loaded you should see ‘OK’ on the new screen.
270+
271+
![Edge function URL](/images/supabase-function-url.png)
272+
273+
The task will be triggered when your edge function URL is accessed.
274+
275+
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.
276+
277+
**Congratulations, you have run a simple Hello World task from a Supabase edge function!**
278+
279+
</Step>
280+
</Steps>
281+
282+
<UsefulNextSteps />

‎docs/mint.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,18 @@
203203
},
204204
{
205205
"group": "Frameworks",
206-
"pages": ["guides/frameworks/nextjs", "guides/frameworks/nodejs", "guides/frameworks/remix", "guides/frameworks/supabase"]
206+
"pages": [
207+
"guides/frameworks/nextjs",
208+
"guides/frameworks/nodejs",
209+
"guides/frameworks/remix",
210+
{
211+
"group": "Supabase",
212+
"pages": [
213+
"guides/frameworks/supabase-edge-functions-basic",
214+
"guides/frameworks/supabase-edge-functions-database-webhooks"
215+
]
216+
}
217+
]
207218
},
208219
{
209220
"group": "Dashboard",

0 commit comments

Comments
 (0)