Files
James Ritchie 65fa8300ad Support for more frameworks (#446)
* 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>
2023-09-08 17:26:08 +01:00

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.
![create a new project](/images/supabase-create-new-project.png)
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>
![management starter](/images/supabase-user-management-starter.png)
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:
![find your api keys](/images/supabase-api-keys.png)
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:
![configure](/images/supabase-configure.png)
Authorize access to your Supabase project and then you'll be ready to run the Job.
![oauth](/images/supabase-oauth.png)
## 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)
![create user](images/supabase-create-new-user.png)
Then navigate over to your Trigger.dev project dashboard and you should see the job running.
![job running](images/supabase-job-running.png)
## 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>