Preview branches docs (#2130)

* Draft preview branches docs

* More wip on docs

* Explain what the GH action does

* Added manual deploy/archive instructions

* Added dashboard section to the docs

* More wip on the preview branch docs

* Added preview/branch to the CLI deploy docs

* Add preview branch note to triggering docs

* Added preview branch notes to the API keys docs

* Added preview stuff to the Context docs

* CLI preview archive command

* Add a better explanation and details about env vars

* Fix for weird reference to the dashboard
This commit is contained in:
Matt Aitken
2025-06-02 15:31:48 +01:00
committed by GitHub
parent 01e7ef3d04
commit d6dd2c9210
13 changed files with 330 additions and 9 deletions
+8
View File
@@ -11,18 +11,25 @@ Each environment has its own secret key. You can find the value on the API keys
![How to find your secret key](/images/api-keys.png)
<Note>
For preview branches, you need to also set the `TRIGGER_PREVIEW_BRANCH` environment variable as
well. You can find the value on the API keys page when you're on the preview branch.
</Note>
### Automatically Configuring the SDK
To automatically configure the SDK with your secret key, you can set the `TRIGGER_SECRET_KEY` environment variable. The SDK will automatically use this value when calling API methods (like `trigger`).
```bash .env
TRIGGER_SECRET_KEY="tr_dev_…"
TRIGGER_PREVIEW_BRANCH="my-branch" # Only needed for preview branches
```
You can do the same if you are self-hosting and need to change the default URL by using `TRIGGER_API_URL`.
```bash .env
TRIGGER_API_URL="https://trigger.example.com"
TRIGGER_PREVIEW_BRANCH="my-branch" # Only needed for preview branches
```
The default URL is `https://api.trigger.dev`.
@@ -37,6 +44,7 @@ import { myTask } from "./trigger/myTasks";
configure({
secretKey: "tr_dev_1234", // WARNING: Never actually hardcode your secret key like this
previewBranch: "my-branch", // Only needed for preview branches
baseURL: "https://mytrigger.example.com", // Optional
});
+62
View File
@@ -0,0 +1,62 @@
---
title: "CLI preview archive command"
sidebarTitle: "preview archive"
description: "The `trigger.dev preview archive` command can be used to archive a preview branch."
---
import UpgradeToV4Note from "/snippets/upgrade-to-v4-note.mdx";
import ProjectPathArg from "/snippets/cli-args-project-path.mdx";
import CommonOptions from "/snippets/cli-options-common.mdx";
import ProjectRefOption from "/snippets/cli-options-project-ref.mdx";
import EnvFileOption from "/snippets/cli-options-env-file.mdx";
import ConfigFileOption from "/snippets/cli-options-config-file.mdx";
import SkipUpdateCheckOption from "/snippets/cli-options-skip-update-check.mdx";
import BranchOption from "/snippets/cli-options-branch.mdx";
<UpgradeToV4Note />
Run the command like this:
<CodeGroup>
```bash npm
npx trigger.dev@v4-beta preview archive
```
```bash pnpm
pnpm dlx trigger.dev@v4-beta preview archive
```
```bash yarn
yarn dlx trigger.dev@v4-beta preview archive
```
</CodeGroup>
It will archive the preview branch, automatically detecting the branch name from git. You can manually specify the branch using the `--branch` option.
## Arguments
```
npx trigger.dev@v4-beta preview archive [path]
```
<ProjectPathArg />
## Options
<BranchOption />
<ConfigFileOption />
<ProjectRefOption />
<EnvFileOption />
<SkipUpdateCheckOption />
### Common options
These options are available on most commands.
<CommonOptions />
+45 -7
View File
@@ -3,10 +3,11 @@ title: "Context"
description: "Get the context of a task run."
---
Context (`ctx`) is a way to get information about a run.
Context (`ctx`) is a way to get information about a run.
<Note>
The context object does not change whilst your code is executing. This means values like `ctx.run.durationMs` will be fixed at the moment the `run()` function is called.
The context object does not change whilst your code is executing. This means values like
`ctx.run.durationMs` will be fixed at the moment the `run()` function is called.
</Note>
<RequestExample>
@@ -17,7 +18,6 @@ import { task } from "@trigger.dev/sdk/v3";
export const parentTask = task({
id: "parent-task",
run: async (payload: { message: string }, { ctx }) => {
if (ctx.environment.type === "DEVELOPMENT") {
return;
}
@@ -32,7 +32,8 @@ export const parentTask = task({
<ResponseField name="task" type="object">
<Expandable title="properties" defaultOpen={true}>
<ResponseField name="exportName" type="string">
The exported function name of the task e.g. `myTask` if you defined it like this: `export const myTask = task(...)`.
The exported function name of the task e.g. `myTask` if you defined it like this: `export
const myTask = task(...)`.
</ResponseField>
<ResponseField name="id" type="string">
The ID of the task.
@@ -93,13 +94,16 @@ export const parentTask = task({
The [maximum number of attempts](/triggering#maxattempts) allowed for this task run.
</ResponseField>
<ResponseField name="durationMs" type="number">
The duration of the task run in milliseconds when the `run()` function is called. For live values use the [usage SDK functions](/run-usage).
The duration of the task run in milliseconds when the `run()` function is called. For live
values use the [usage SDK functions](/run-usage).
</ResponseField>
<ResponseField name="costInCents" type="number">
The cost of the task run in cents when the `run()` function is called. For live values use the [usage SDK functions](/run-usage).
The cost of the task run in cents when the `run()` function is called. For live values use the
[usage SDK functions](/run-usage).
</ResponseField>
<ResponseField name="baseCostInCents" type="number">
The base cost of the task run in cents when the `run()` function is called. For live values use the [usage SDK functions](/run-usage).
The base cost of the task run in cents when the `run()` function is called. For live values
use the [usage SDK functions](/run-usage).
</ResponseField>
<ResponseField name="version" type="string" optional>
The [version](/versioning) of the task run.
@@ -132,6 +136,40 @@ export const parentTask = task({
<ResponseField name="type" type="string">
The type of the environment (PRODUCTION, STAGING, DEVELOPMENT, or PREVIEW).
</ResponseField>
<ResponseField name="branchName" type="string" optional>
If the environment is `PREVIEW` then this will be the branch name.
</ResponseField>
<ResponseField name="git" type="object">
<Expandable title="properties">
<ResponseField name="commitAuthorName" type="string" optional>
The name of the commit author.
</ResponseField>
<ResponseField name="commitMessage" type="string" optional>
The message of the commit.
</ResponseField>
<ResponseField name="commitRef" type="string" optional>
The ref of the commit.
</ResponseField>
<ResponseField name="commitSha" type="string" optional>
The SHA of the commit.
</ResponseField>
<ResponseField name="dirty" type="boolean" optional>
Whether the commit is dirty, i.e. there are uncommitted changes.
</ResponseField>
<ResponseField name="remoteUrl" type="string" optional>
The remote URL of the repository.
</ResponseField>
<ResponseField name="pullRequestNumber" type="number" optional>
The number of the pull request.
</ResponseField>
<ResponseField name="pullRequestTitle" type="string" optional>
The title of the pull request.
</ResponseField>
<ResponseField name="pullRequestState" type="string" optional>
The state of the pull request (open, closed, or merged).
</ResponseField>
</Expandable>
</ResponseField>
</Expandable>
</ResponseField>
Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

+203
View File
@@ -0,0 +1,203 @@
---
title: "Preview branches"
description: "Create isolated environments for each branch of your code, allowing you to test changes before merging to production. You can create preview branches manually or automatically from your git branches."
---
import UpgradeToV4Note from "/snippets/upgrade-to-v4-note.mdx";
<UpgradeToV4Note />
## How to use preview branches
The preview environment is special you create branches from it. The branches you create live under the preview environment and have all the features you're used to from other environments (like staging or production). That means you can trigger runs, have schedules, test them, use Realtime, etc.
![Preview environment and branches](/deployment/preview-environment-branches.png)
We recommend you automatically create a preview branch for each git branch when a Pull Request is opened and then archive it automatically when the PR is merged/closed.
The process to use preview branches looks like this:
1. Create a preview branch
2. Deploy to the preview branch (1+ times)
3. Trigger runs using your Preview API key (`TRIGGER_SECRET_KEY`) and the branch name (`TRIGGER_PREVIEW_BRANCH`).
4. Archive the preview branch when the branch is done.
There are two main ways to do this:
1. Automatically: using GitHub Actions (recommended).
2. Manually: in the dashboard and/or using the CLI.
### Limits on active preview branches
We restrict the number of active preview branches (per project). You can archive a preview branch at any time (automatically or manually) to unlock another slot or you can upgrade your plan.
Once archived you can still view the dashboard for the branch but you can't trigger or execute runs (or other write operations).
This limit exists because each branch has an independent concurrency limit. For the Cloud product these are the limits:
| Plan | Active preview branches |
| ----- | ----------------------- |
| Free | 0 |
| Hobby | 5 |
| Pro | 20 (then paid for more) |
For full details see our [pricing page](https://trigger.dev/pricing).
## Triggering runs and using the SDK
Before we talk about how to deploy to preview branches, one important thing to understand is that you must set the `TRIGGER_PREVIEW_BRANCH` environment variable as well as the `TRIGGER_SECRET_KEY` environment variable.
When deploying to somewhere that supports `process.env` (like Node.js runtimes) you can just set the environment variables:
```bash
TRIGGER_SECRET_KEY="tr_preview_1234567890"
TRIGGER_PREVIEW_BRANCH="your-branch-name"
```
If you're deploying somewhere that doesn't support `process.env` (like some edge runtimes) you can manually configure the SDK:
```ts
import { configure } from "@trigger.dev/sdk";
import { myTask } from "./trigger/myTasks";
configure({
secretKey: "tr_preview_1234567890", // WARNING: Never actually hardcode your secret key like this
previewBranch: "your-branch-name",
});
async function triggerTask() {
await myTask.trigger({ userId: "1234" }); // Trigger a run in your-branch-name
}
```
## Preview branches with GitHub Actions (recommended)
This GitHub Action will:
1. Automatically create a preview branch for your Pull Request (if the branch doesn't already exist).
2. Deploy the preview branch.
3. Archive the preview branch when the Pull Request is merged/closed.
```yml .github/workflows/trigger-preview-branches.yml
name: Deploy to Trigger.dev (preview branches)
on:
pull_request:
types: [opened, synchronize, reopened, closed]
jobs:
deploy-preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Use Node.js 20.x
uses: actions/setup-node@v4
with:
node-version: "20.x"
- name: Install dependencies
run: npm install
- name: Deploy preview branch
run: npx trigger.dev@v4-beta deploy --env preview
env:
TRIGGER_ACCESS_TOKEN: ${{ secrets.TRIGGER_ACCESS_TOKEN }}
```
For this workflow to work, you need to set the following secrets in your GitHub repository:
- `TRIGGER_ACCESS_TOKEN`: A Trigger.dev personal access token (they start with `tr_pat_`). [Learn how to create one and set it in GitHub](/github-actions#creating-a-personal-access-token).
Notice that the deploy command has `--env preview` at the end. We automatically detect the preview branch from the GitHub actions env var.
You can manually specify the branch using `--branch <branch-name>` in the deploy command, but this isn't required.
## Preview branches with the CLI (manual)
### Deploying a preview branch
Creating and deploying a preview branch manually is easy:
```bash
npx trigger.dev@v4-beta deploy --env preview
```
This will create and deploy a preview branch, automatically detecting the git branch. If for some reason the auto-detection doesn't work it will let you know and tell you do this:
```bash
npx trigger.dev@v4-beta deploy --env preview --branch your-branch-name
```
### Archiving a preview branch
You can manually archive a preview branch with the CLI:
```bash
npx trigger.dev@v4-beta preview archive
```
Again we will try auto-detect the current branch. But you can specify the branch name with `--branch <branch-name>`.
## Creating and archiving preview branches from the dashboard
From the "Preview branches" page you can create a branch:
![Preview branches page](/deployment/preview-branches.png)
![Create preview branch](/deployment/preview-branches-new.png)
You can also archive a branch:
![Archive preview branch](/deployment/preview-branches-archive.png)
## Environment variables
You can set environment variables for "Preview" and they will get applied to all branches (existing and new). You can also set environment variables for a specific branch. If they are set for both then the branch-specific variables will take precedence.
![Environment variables](/deployment/preview-environment-variables.png)
These can be set manually in the dashboard, or automatically at deploy time using the [syncEnvVars()](/config/extensions/syncEnvVars) or [syncVercelEnvVars()](/config/extensions/syncEnvVars#syncvercelenvvars) build extensions.
### Sync environment variables
Full instructions are in the [syncEnvVars()](/config/extensions/syncEnvVars) documentation.
```ts trigger.config.ts
import { defineConfig } from "@trigger.dev/sdk";
// You will need to install the @trigger.dev/build package
import { syncEnvVars } from "@trigger.dev/build/extensions/core";
export default defineConfig({
//... other config
build: {
// This will automatically detect and sync environment variables
extensions: [
syncEnvVars(async (ctx) => {
// You can fetch env variables from a 3rd party service like Infisical, Hashicorp Vault, etc.
// The ctx.branch will be set if it's a preview deployment.
return await fetchEnvVars(ctx.environment, ctx.branch);
}),
],
},
});
```
### Sync Vercel environment variables
You need to set the `VERCEL_ACCESS_TOKEN`, `VERCEL_PROJECT_ID` and `VERCEL_TEAM_ID` environment variables. You can find these in the Vercel dashboard. Full instructions are in the [syncVercelEnvVars()](/config/extensions/syncEnvVars#syncvercelenvvars) documentation.
The extension will automatically detect a preview branch deploy from Vercel and sync the appropriate environment variables.
```ts trigger.config.ts
import { defineConfig } from "@trigger.dev/sdk";
// You will need to install the @trigger.dev/build package
import { syncVercelEnvVars } from "@trigger.dev/build/extensions/core";
export default defineConfig({
//... other config
build: {
// This will automatically detect and sync environment variables
extensions: [syncVercelEnvVars()],
},
});
```
Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

+2
View File
@@ -100,6 +100,7 @@
"deployment/overview",
"deploy-environment-variables",
"github-actions",
"deployment/preview-branches",
"deployment/atomic-deployment",
{
"group": "Deployment integrations",
@@ -144,6 +145,7 @@
"cli-dev-commands",
"cli-deploy-commands",
"cli-promote-commands",
"cli-preview-archive",
"cli-whoami-commands",
"cli-logout-commands",
"cli-list-profiles-commands",
+5 -1
View File
@@ -4,6 +4,7 @@ import ProjectRefOption from "/snippets/cli-options-project-ref.mdx";
import EnvFileOption from "/snippets/cli-options-env-file.mdx";
import ConfigFileOption from "/snippets/cli-options-config-file.mdx";
import SkipUpdateCheckOption from "/snippets/cli-options-skip-update-check.mdx";
import BranchOption from "/snippets/cli-options-branch.mdx";
Run the command like this:
@@ -56,9 +57,12 @@ npx trigger.dev@latest deploy [path]
<SkipUpdateCheckOption />
<ParamField body="Environment" type="--env | -e">
Defaults to `prod` but you can specify `staging`.
Defaults to `prod` but you can specify `staging` or `preview`. If you specify `preview` we will
try and automatically detect the branch name from git.
</ParamField>
<BranchOption />
<ParamField body="Dry run" type="--dry-run">
Create a deployable build but don't deploy it. Prints out the build path so you can inspect it.
</ParamField>
+4
View File
@@ -0,0 +1,4 @@
<ParamField body="Preview branch" type="--branch | -b">
When using `--env preview` the branch is automatically detected from git. But you can manually
specify it by using this option, e.g. `--branch my-branch` or `-b my-branch`.
</ParamField>
+1 -1
View File
@@ -28,7 +28,7 @@ Trigger tasks **from inside a another task**:
## Triggering from your backend
When you trigger a task from your backend code, you need to set the `TRIGGER_SECRET_KEY` environment variable. You can find the value on the API keys page in the Trigger.dev dashboard. [More info on API keys](/apikeys).
When you trigger a task from your backend code, you need to set the `TRIGGER_SECRET_KEY` environment variable. If you're [using a preview branch](/deployment/preview-branches), you also need to set the `TRIGGER_PREVIEW_BRANCH` environment variable. You can find the value on the API keys page in the Trigger.dev dashboard. [More info on API keys](/apikeys).
<Note>
If you are using Next.js Server Actions [you'll need to be careful with