Skip to content

Commit 9d1398f

Browse files
samejrsamejr
committed
Much better Remix guide, including Edge functions
1 parent 764f03a commit 9d1398f

File tree

4 files changed

+233
-0
lines changed

4 files changed

+233
-0
lines changed

‎docs/guides/frameworks/remix.mdx

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import CliDevStep from '/snippets/step-cli-dev.mdx';
1111
import CliRunTestStep from '/snippets/step-run-test.mdx';
1212
import CliViewRunStep from '/snippets/step-view-run.mdx';
1313
import UsefulNextSteps from '/snippets/useful-next-steps.mdx';
14+
import TriggerTaskRemix from "/snippets/trigger-tasks-remix.mdx";
15+
import AddEnvironmentVariables from "/snippets/add-environment-variables.mdx";
16+
import DeployingYourTask from "/snippets/deplopying-your-task.mdx";
1417

1518
<Prerequisites framework="Remix" />
1619

@@ -23,4 +26,139 @@ import UsefulNextSteps from '/snippets/useful-next-steps.mdx';
2326
<CliViewRunStep />
2427
</Steps>
2528

29+
## Set your secret key locally
30+
31+
Set your `TRIGGER_SECRET_KEY` environment variable in your `.env` file. This key is used to authenticate with Trigger.dev, so you can trigger runs from your Remix app. Visit the API Keys page in the dashboard and select the DEV secret key.
32+
33+
![How to find your secret key](/images/api-keys.png)
34+
35+
For more information on authenticating with Trigger.dev, see the [API keys page](/apikeys).
36+
37+
## Triggering your task in Remix
38+
39+
<Steps>
40+
41+
<Step title="Create an API route">
42+
43+
Create a new file called `api.trigger.ts` (or `api.trigger.js`) in the `app/routes` directory like this: `app/routes/api.trigger.ts`.
44+
45+
</Step>
46+
47+
<Step title="Add your task">
48+
49+
Add this code to your `api.trigger.ts` file which imports your task:
50+
51+
```ts
52+
import type { helloWorldTask } from "../../src/trigger/example";
53+
import { tasks } from "@trigger.dev/sdk/v3";
54+
55+
export async function loader() {
56+
const handle = await tasks.trigger<typeof helloWorldTask>(
57+
"hello-world",
58+
"James"
59+
);
60+
61+
return new Response(JSON.stringify(handle), {
62+
headers: { "Content-Type": "application/json" },
63+
});
64+
}
65+
```
66+
67+
</Step>
68+
69+
<Step title="Trigger your task">
70+
71+
<TriggerTaskRemix/>
72+
73+
</Step>
74+
75+
</Steps>
76+
77+
<AddEnvironmentVariables/>
78+
79+
<DeployingYourTask/>
80+
81+
## Deploying Remix to Vercel Edge Functions
82+
83+
There are a few extra steps to follow to deploy your Remix app to Vercel Edge Functions.
84+
85+
<Steps>
86+
87+
<Step title="Update the Vercel configuration">
88+
89+
Create or update the `vercel.json` file with the following:
90+
91+
```json vercel.json
92+
{
93+
"buildCommand": "npm run vercel-build",
94+
"devCommand": "npm run dev",
95+
"framework": "remix",
96+
"installCommand": "npm install",
97+
"outputDirectory": "build/client"
98+
}
99+
```
100+
101+
</Step>
102+
103+
<Step title="Update `package.json` scripts">
104+
105+
Update your `package.json` to include the following scripts:
106+
107+
```json package.json
108+
"scripts": {
109+
"build": "remix vite:build",
110+
"dev": "remix vite:dev",
111+
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
112+
"start": "remix-serve ./build/server/index.js",
113+
"typecheck": "tsc",
114+
"vercel-build": "remix vite:build && cp -r ./public ./build/client"
115+
},
116+
```
117+
118+
</Step>
119+
120+
<Step title="Deploy to Vercel">
121+
122+
Push your code to a Git repository and create a new project in the Vercel dashboard. Select your repository and follow the prompts to complete the deployment.
123+
124+
</Step>
125+
126+
127+
<Step title="Add your Vercel environment variables">
128+
129+
In the Vercel project settings, add your Trigger.dev secret key:
130+
131+
```bash
132+
TRIGGER_SECRET_KEY=your-secret-key
133+
```
134+
135+
You can find this key in the Trigger.dev dashboard under API Keys and select the environment key you want to use.
136+
137+
![How to find your secret key](/images/api-keys.png)
138+
139+
</Step>
140+
141+
<Step title="Deploy your project">
142+
143+
Once you've added the environment variable, deploy your project to Vercel.
144+
145+
<Note>Ensure you have also deployed your Trigger.dev task. See [deploy your task step](/guides/frameworks/remix#deploying-your-task-to-trigger-dev).</Note>
146+
147+
</Step>
148+
149+
<Step title="Test your task in production">
150+
151+
After deployment, visit your Vercel deployment URL followed by `/api/trigger` (e.g., `https://your-app.vercel.app/api/trigger`) to test the Trigger.dev task in production.
152+
153+
</Step>
154+
155+
</Steps>
156+
157+
### Additional notes
158+
159+
The `vercel-build` script in `package.json` is specific to Remix projects on Vercel, ensuring that static assets are correctly copied to the build output.
160+
161+
The `runtime: "edge"` configuration in the API route allows for better performance on Vercel's Edge Network.
162+
163+
26164
<UsefulNextSteps />

‎docs/snippets/add-environment-variables.mdx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## Add your environment variables (optional)
2+
3+
If you have any environment variables in your tasks, be sure to add them in the dashboard so deployed code runs successfully. In Node.js, these environment variables are accessed in your code using `process.env.MY_ENV_VAR`.
4+
5+
In the sidebar select the "Environment Variables" page, then press the "New environment variable"
6+
button. ![Environment variables page](/images/environment-variables-page.jpg)
7+
8+
You can add values for your local dev environment, staging and prod. ![Environment variables
9+
page](/images/environment-variables-panel.jpg)
10+
11+
You can also add environment variables in code by following the steps on the [Environment Variables page](/deploy-environment-variables#in-your-code).

‎docs/snippets/deplopying-your-task.mdx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
## Deploying your task to Trigger.dev
2+
3+
For this guide, we'll manually deploy your task by running the [CLI deploy command](/cli-deploy) below. Other ways to deploy are listed in the next section.
4+
5+
<CodeGroup>
6+
7+
```bash npm
8+
npx trigger.dev@latest deploy
9+
```
10+
11+
```bash pnpm
12+
pnpm dlx trigger.dev@latest deploy
13+
```
14+
15+
```bash yarn
16+
yarn dlx trigger.dev@latest deploy
17+
```
18+
19+
</CodeGroup>
20+
21+
### Other ways to deploy
22+
23+
<Tabs>
24+
25+
<Tab title="GitHub Actions">
26+
27+
Use GitHub Actions to automatically deploy your tasks whenever new code is pushed and when the `trigger` directory has changes in it. Follow [this guide](/github-actions) to set up GitHub Actions.
28+
29+
</Tab>
30+
31+
<Tab title="Vercel Integration">
32+
33+
We're working on adding an official [Vercel integration](/vercel-integration) which you can follow the progress of [here](https://feedback.trigger.dev/p/vercel-integration-3).
34+
35+
</Tab>
36+
37+
</Tabs>

‎docs/snippets/trigger-tasks-remix.mdx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
Run your Remix app:
2+
3+
<CodeGroup>
4+
5+
```bash npm
6+
npm run dev
7+
```
8+
9+
```bash pnpm
10+
pnpm run dev
11+
```
12+
13+
```bash yarn
14+
yarn dev
15+
```
16+
17+
</CodeGroup>
18+
19+
Run the dev server from Step 2. of the [Initial Setup](/guides/frameworks/remix#initial-setup) section above if it's not already running:
20+
21+
<CodeGroup>
22+
23+
```bash npm
24+
npx trigger.dev@latest dev
25+
```
26+
27+
```bash pnpm
28+
pnpm dlx trigger.dev@latest dev
29+
```
30+
31+
```bash yarn
32+
yarn dlx trigger.dev@latest dev
33+
```
34+
35+
</CodeGroup>
36+
37+
Now visit the URL in your browser to trigger the task. Ensure the port number is the same as the one you're running your Remix app on. For example, if you're running your Remix app on port 3000, visit:
38+
39+
```bash
40+
http://localhost:3000/api/trigger
41+
```
42+
43+
You should see the CLI log the task run with a link to view the logs in the dashboard.
44+
45+
![Trigger.dev CLI showing a successful run](/images/trigger-cli-run-success.png)
46+
47+
Visit the [Trigger.dev dashboard](https://cloud.trigger.dev) to see your run.

0 commit comments

Comments
 (0)