65fa8300ad
* Removed next references in the ReadMe * FAQ improvements to update Next.js references * Added a new Frameworks page with logos to link to the quick start guides * Renamed the mdx file so the link works * Added basic platform guides * Introduction doesn’t reference next.js only * Added a note about serverless and restructured the side menu * Added more frameworks pages to the manual install section * Fixed SVG error * Coming soon guides now using snippets so they can be in 2 places while we work on them * Removed redirects * Added a new named icon * increased fireworks particle count slightly * Creating a route for the onboarding and link to access it anytime from the side menu * Moved the onboarding into new components * Updated the routes for the onboarding page * Onboarding is now Setup and the frameworks overview page now links to different framework page in the onboarding side nav * URLs and pages renamed to ‘setup’ * URLs and pages renamed to ‘setup’ * Fixed some old named component imports * WIP on a new less hacked-in background image * Added svg logos for all the frameworks * New paths for the new framework pages * Side menu collapses once you selected a framework * Temporary Nuxt page * New routes for the new frameworks * New ‘framework coming soon’ component - now used in the coming soon framework pages * Moved/removed files * Moved all svg framework logos into a new folder and file * balanced the logo sizes * Framework coming soon pages take a name and url * New express svg logo * New component for a Framework item in the grid * Added information and design for the coming soon frameworks * Change the grid to 1 row if jobs === 0 * Updated the framework coming soon snippet and added it to the relevant pages * Express now 2nd in all lists * Added link to long running server support discussion * New logo to include next.js + supabase quick start * roadmap now links to homepage with page anchor to roadmap section * changelog now links to Github releases page * Removed reference to Next.js * Docs pages with coming soon info all share the same framework snippets * Fixed issue of missing props * Moved the fireworks effect into a separate file to make it easier for adding more framework onboarding pages * Info callouts have a more muted style * Added a callout to the top of the next onboarding to reference Serverless-only support * Moved the callout explaining scheduled triggers not working in dev to the bottom of the test panel This is to resolve eric’s UX ticket: https://github.com/triggerdotdev/trigger.dev/issues/416 * Added groundwork for Nest.js framework * Using framer motion for the menu transition instead of css - now has a slight spring and is snappier * redirect the manual setup page to the new nextjs setup page * Fixed broken docs link * Added a readme.md to next.js package * Capital I for integration * Renamed component: NextDevCommand to RunDevCommand * Made required props non-optional * CLI now points at manual install guides if no Next project detected * Explicitly made supported default to false (it was working but a bit hard to read) * Added links to all github issues for the frameworks coming soon component --------- Co-authored-by: Matt Aitken <matt@mattaitken.com>
178 lines
5.7 KiB
Plaintext
178 lines
5.7 KiB
Plaintext
---
|
|
title: "Supabase Quick Start"
|
|
sidebarTitle: "Supabase"
|
|
description: "Integrate Supabase with Trigger.dev in minutes."
|
|
---
|
|
|
|
This quick start guide will get you setup with Trigger.dev and Supabase inside a new Next.js project.
|
|
|
|
## Preparing Supabase & Next.js
|
|
|
|
Create an account with Supabase or login if you have one already:
|
|
|
|
- [Create a new Supabase account](https://supabase.com/dashboard/sign-up)
|
|
- [Login to Supabase](https://supabase.com/dashboard/sign-in)
|
|
|
|
Once on the dashboard, click the 'New project' button to create a new project in Supabase.
|
|
|
|

|
|
|
|
From inside your new project, click the 'SQL Editor' button in the side menu and then click the "User Management Starter" from the Quickstarts menu:
|
|
|
|
<Note>
|
|
Feel free to choose another starter or use hand-crafted tables, anything will work for purposes of
|
|
this quick start
|
|
</Note>
|
|
|
|

|
|
|
|
Over in a terminal window, create a new Next.js app with Supabase support:
|
|
|
|
```bash
|
|
npx create-next-app@latest -e with-supabase my-supabase-app
|
|
cd my-supabase-app
|
|
```
|
|
|
|
Next, rename the `.env.local.example` file to `.env.local` and add your Supabase URL and public key:
|
|
|
|
```
|
|
NEXT_PUBLIC_SUPABASE_URL=your-project-url
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
|
```
|
|
|
|
You can find your API keys in Supabase by clicking the cog (⚙️) icon in the left menu and selecting 'API' from the Project Settings menu:
|
|
|
|

|
|
|
|
Finally, in the terminal, go ahead and [Generate the Typescript types](https://supabase.com/docs/reference/javascript/typescript-support) now as we'll be using them shortly:
|
|
|
|
<Tip>
|
|
You may need to login to the supabase CLI first. For more info see the [supabase login
|
|
docs](https://supabase.com/docs/reference/cli/supabase-login)
|
|
</Tip>
|
|
|
|
```bash
|
|
npx supabase gen types typescript --project-id <your project id> --schema public --schema auth > supabase-types.ts
|
|
```
|
|
|
|
## Setup Trigger.dev
|
|
|
|
Now it's time to create a Trigger.dev account. You can either:
|
|
|
|
- Use the [Trigger.dev Cloud](https://cloud.trigger.dev).
|
|
- Or [self-host](/documentation/guides/self-hosting) the service.
|
|
|
|
Once you've created an account, follow the steps in the app to:
|
|
|
|
1. Complete your account details.
|
|
2. Create your first Organization and Project.
|
|
|
|
Next, initialize Trigger.dev in the project by running this command:
|
|
|
|
```bash
|
|
npx @trigger.dev/cli@latest init
|
|
```
|
|
|
|
Edit the `middleware.ts` file and add the following code to exclude the Trigger.dev endpoint from the Supabase auth middleware:
|
|
|
|
```ts
|
|
// Match all routes other than /api/trigger
|
|
export const config = {
|
|
matcher: ["/((?!api/trigger).*)"],
|
|
};
|
|
```
|
|
|
|
## Add the Supabase Integration
|
|
|
|
Add the Supabase package to your project by running this command:
|
|
|
|
```bash
|
|
npm add @trigger.dev/supabase
|
|
```
|
|
|
|
Edit the `jobs/examples.ts` file and replace with the following code:
|
|
|
|
```ts
|
|
import { client } from "@/trigger";
|
|
import { Database } from "@/supabase-types";
|
|
import { SupabaseManagement } from "@trigger.dev/supabase";
|
|
|
|
// Use OAuth to authenticate with Supabase Management API
|
|
const supabaseManagement = new SupabaseManagement({
|
|
id: "supabase-management",
|
|
});
|
|
|
|
// Use the types we generated earlier
|
|
const db = supabaseManagement.db<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL!);
|
|
|
|
client.defineJob({
|
|
id: "supabase-test-job",
|
|
name: "My Supabase Test Job",
|
|
version: "1.0.0",
|
|
trigger: db.onInserted({
|
|
schema: "auth",
|
|
table: "users",
|
|
}),
|
|
run: async (payload, io, ctx) => {},
|
|
});
|
|
```
|
|
|
|
## Authenticate to the Supabase Management API
|
|
|
|
The Supabase Triggers use the [Supabase Management API](https://trigger.dev/docs/integrations/apis/supabase/management) to register the triggers in your Supabase projects.
|
|
|
|
You can authenticate using a Personal Access Token or via the new Supabase Management API OAuth implementation, which we are using in this example.
|
|
|
|
Login to Trigger.dev and navigate to the project "Integrations" page. Select the "Supabase Management" integration and configure it like so:
|
|
|
|

|
|
|
|
Authorize access to your Supabase project and then you'll be ready to run the Job.
|
|
|
|

|
|
|
|
## Run and test the Job
|
|
|
|
Now you are ready to run the Next.js app and test the Job. Run the following command to start the Next.js app:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
And then in a separate terminal, run the following command to start the Trigger.dev agent:
|
|
|
|
```bash
|
|
npx @trigger.dev/cli dev
|
|
```
|
|
|
|
Head back to your Supabase Dashboard -> Auth, and create a new user (keep "Auto Confirm User?" checked)
|
|
|
|

|
|
|
|
Then navigate over to your Trigger.dev project dashboard and you should see the job running.
|
|
|
|

|
|
|
|
## What's next?
|
|
|
|
Checkout our fully-functioning [Supabase Onboarding Email example](https://github.com/triggerdotdev/examples/tree/main/supabase-onboarding-emails) to learn how to build an email drip campaign in 62 lines of code.
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Write your first Job" icon="hexagon-plus" href="/documentation/guides/create-a-job">
|
|
A Guide for how to create your first real Job
|
|
</Card>
|
|
<Card
|
|
title="What is Trigger.dev"
|
|
icon="wand-magic-sparkles"
|
|
href="/documentation/concepts/what-is-triggerdotdev"
|
|
>
|
|
Learn more about how Trigger.dev works and how it can help you.
|
|
</Card>
|
|
<Card title="Supabase Integration" icon="grid-2" href="/integrations/apis/supabase/introduction">
|
|
Read more about the Supabase Integration and how it works.
|
|
</Card>
|
|
<Card title="Get help" icon="hire-a-helper" href="/documentation/get-help">
|
|
Struggling getting setup or have a question? We're here to help.
|
|
</Card>
|
|
</CardGroup>
|