Files
triggerdotdev--trigger.dev/docs/documentation/quickstart.mdx
T
2023-08-02 15:09:35 +01:00

237 lines
5.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: "Quick Start"
description: "Start creating Jobs in 5 minutes"
---
This quick start guide will get you up and running with Trigger.dev.
<Accordion title="Don't have a Next.js project yet to add Trigger.dev to? No problem, you can complete the Quick Start using a blank Next.js project:">
Create a blank project by running the `create-next-app` command in your terminal:
```bash
npx create-next-app@latest
```
Trigger.dev works with either the Pages or App Router configuration.
</Accordion>
## Create a Trigger.dev account
You can either
- Use the [Trigger.dev Cloud](https://cloud.trigger.dev) (we're currently in private beta).
- Or [self-host](/documentation/guides/self-hosting) the service.
### Create your first project
Once you've created an account, follow the steps to:
1. Complete your account details.
2. Create your first Organization and Project.
### Getting an API key
1. Go to the "Environments & API Keys" page in your project.
![Go to the Environments & API Keys page ](/images/environments-link.png)
2. Copy the `DEV` API key.
![API Keys](/images/api-keys.png)
## Run the CLI `init` command
The easiest way to get started it to use the CLI. It will add Trigger.dev to your existing Next.js project, setup a route and give you an example file.
In a terminal window run:
<CodeGroup>
```bash npm
npx @trigger.dev/cli@latest init
```
```bash pnpm
pnpm dlx @trigger.dev/cli@latest init
```
```bash yarn
yarn dlx @trigger.dev/cli@latest init
```
</CodeGroup>
It will ask you a few questions
1. Are you using the [Trigger.dev Cloud](https://trigger.dev) or [self-hosting](/documentation/guides/self-hosting)? You're probably using the cloud.
2. Enter your development API key. Enter the key you copied earlier.
3. Enter a unique ID for your endpoint (you can just use the default by hitting enter)
## Run your Next.js site
Make sure your Next.js site is running locally, we will connect to it to register your Jobs.
<Warning>You must leave this running for the rest of the steps.</Warning>
<CodeGroup>
```bash npm
npm run dev
```
```bash pnpm
pnpm run dev
```
```bash yarn
yarn run dev
```
</CodeGroup>
## Run the CLI `dev` command
The CLI `dev` command allows the Trigger.dev service to send messages to your Next.js site. This is required for registering Jobs, triggering them and running tasks. To achieve this it creates a tunnel (using [ngrok](https://ngrok.com/)) so Trigger.dev can send messages to your machine.
You should leave the `dev` command running when you're developing.
In a **new terminal window or tab** run:
<CodeGroup>
```bash npm
npx @trigger.dev/cli@latest dev
```
```bash pnpm
pnpm dlx @trigger.dev/cli@latest dev
```
```bash yarn
yarn dlx @trigger.dev/cli@latest dev
```
</CodeGroup>
<br />
<Note>
You can optionally pass the port if you're not running on 3000 by adding
`--port 3001` to the end
</Note>
<AccordionGroup>
<Accordion title="Experiencing an error? This could be due to middleware.">
Instructions of how to resolve any issues due to middleware [here](https://trigger.dev/docs/documentation/guides/platforms/nextjs#middleware)
</Accordion>
<Accordion title="Advanced: Run your Next.js server together with the CLI">
You can modify your `package.json` to run both the Next.js server and the CLI `dev` command together.
1. Install the `concurrently` package:
<CodeGroup>
```bash npm
npm install concurrently --save-dev
```
```bash pnpm
pnpm install concurrently --save-dev
```
```bash yarn
yarn add concurrently --dev
```
</CodeGroup>
2. Modify your `package.json` file's `dev` script.
```json package.json
...
"scripts": {
"dev": "concurrently --kill-others npm:dev:*",
"dev:next": "next dev",
"dev:trigger": "npx @trigger.dev/cli dev",
...
}
...
```
</Accordion>
</AccordionGroup>
## Your first job
The CLI init command created a simple Job for you. There will be a new file either `api/trigger/route.ts` or `pages/api/trigger.ts`.
In there is this Job:
```typescript
//Job definition uses the client
new Job(client, {
// 1. Metadata
id: "example-job",
name: "Example Job",
version: "0.0.1",
// 2. Trigger
trigger: eventTrigger({
name: "example.event",
}),
// 3. Run function
run: async (payload, io, ctx) => {
// do something
await io.logger.info("Hello world!", { payload });
return {
message: "Hello world!",
};
},
});
```
If you navigate to your Trigger.dev project you will see this Job in the "Jobs" section:
![Your first Job](/images/first-job.png)
## Triggering the Job
There are two way to trigger this Job.
1. Use the "Test" functionality in the dashboard.
2. Use the Trigger.dev API (either via our SDK or a web request)
### "Testing" from the dashboard
Click into the Job and then open the "Test" tab. You should see this page:
![Test Job](/images/test-job.png)
This Job doesn't have a payload schema (meaning it takes an empty object), so you can simple click the "Run test" button.
Congratulations, you should get redirected so you can see your first Run!
## What's next?
<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="Examples" icon="slot-machine" href="/examples">
One of the quickest ways to learn how Trigger.dev works is to view some
example Jobs.
</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>