diff --git a/.changeset/eighty-crews-switch.md b/.changeset/eighty-crews-switch.md new file mode 100644 index 00000000000..577762db622 --- /dev/null +++ b/.changeset/eighty-crews-switch.md @@ -0,0 +1,5 @@ +--- +"@trigger.dev/cli": patch +--- + +If Nextjs project detection fails, point people at the installation docs diff --git a/.changeset/healthy-carpets-fold.md b/.changeset/healthy-carpets-fold.md new file mode 100644 index 00000000000..a45e41cbf02 --- /dev/null +++ b/.changeset/healthy-carpets-fold.md @@ -0,0 +1,5 @@ +--- +"@trigger.dev/nextjs": patch +--- + +Added a readme.md diff --git a/README.md b/README.md index 177f10ca940..5f6d3622d5f 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Trigger.dev logo -### The background jobs framework for Next.js +### The open source background jobs framework [Discord](https://discord.gg/JtBAxBr2m3) | [Website](https://trigger.dev) | [Issues](https://github.com/triggerdotdev/trigger.dev/issues) | [Docs](https://trigger.dev/docs) @@ -36,7 +36,7 @@ We only receive Triggers and the data you choose to send to us. You can even com ## Don't worry about deployment -Just use our SDK to write Jobs in your Next.js codebase. There's nothing extra to deploy and no CI to configure, your Jobs just connect to our cloud. Or you can always self-host. +Just use our SDK to write Jobs in your codebase. There's nothing extra to deploy and no CI to configure, your Jobs just connect to our cloud. Or you can always self-host. ## Full visibility of every job run diff --git a/apps/webapp/app/assets/images/gradient-background.png b/apps/webapp/app/assets/images/gradient-background.png index 65c861c0dfb..9f40d248366 100644 Binary files a/apps/webapp/app/assets/images/gradient-background.png and b/apps/webapp/app/assets/images/gradient-background.png differ diff --git a/apps/webapp/app/assets/logos/AstroLogo.tsx b/apps/webapp/app/assets/logos/AstroLogo.tsx new file mode 100644 index 00000000000..fb51a8f422b --- /dev/null +++ b/apps/webapp/app/assets/logos/AstroLogo.tsx @@ -0,0 +1,57 @@ +export function AstroLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/ExpressLogo.tsx b/apps/webapp/app/assets/logos/ExpressLogo.tsx new file mode 100644 index 00000000000..974e93a718a --- /dev/null +++ b/apps/webapp/app/assets/logos/ExpressLogo.tsx @@ -0,0 +1,15 @@ +export function ExpressLogo({ className }: { className?: string }) { + return ( + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/FastifyLogo.tsx b/apps/webapp/app/assets/logos/FastifyLogo.tsx new file mode 100644 index 00000000000..928df8d6a64 --- /dev/null +++ b/apps/webapp/app/assets/logos/FastifyLogo.tsx @@ -0,0 +1,45 @@ +export function FastifyLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/NestjsLogo.tsx b/apps/webapp/app/assets/logos/NestjsLogo.tsx new file mode 100644 index 00000000000..d908241d092 --- /dev/null +++ b/apps/webapp/app/assets/logos/NestjsLogo.tsx @@ -0,0 +1,16 @@ +export function NestjsLogo({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/NextjsLogo.tsx b/apps/webapp/app/assets/logos/NextjsLogo.tsx new file mode 100644 index 00000000000..9e5fa09cc0d --- /dev/null +++ b/apps/webapp/app/assets/logos/NextjsLogo.tsx @@ -0,0 +1,47 @@ +export function NextjsLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/NuxtLogo.tsx b/apps/webapp/app/assets/logos/NuxtLogo.tsx new file mode 100644 index 00000000000..e4fe0295bc0 --- /dev/null +++ b/apps/webapp/app/assets/logos/NuxtLogo.tsx @@ -0,0 +1,21 @@ +export function NuxtLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/RedwoodLogo.tsx b/apps/webapp/app/assets/logos/RedwoodLogo.tsx new file mode 100644 index 00000000000..6dd0e386ee5 --- /dev/null +++ b/apps/webapp/app/assets/logos/RedwoodLogo.tsx @@ -0,0 +1,42 @@ +export function RedwoodLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/RemixLogo.tsx b/apps/webapp/app/assets/logos/RemixLogo.tsx new file mode 100644 index 00000000000..be9a10fdaec --- /dev/null +++ b/apps/webapp/app/assets/logos/RemixLogo.tsx @@ -0,0 +1,199 @@ +export function RemixLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/assets/logos/SveltekitLogo.tsx b/apps/webapp/app/assets/logos/SveltekitLogo.tsx new file mode 100644 index 00000000000..70875e2c58c --- /dev/null +++ b/apps/webapp/app/assets/logos/SveltekitLogo.tsx @@ -0,0 +1,29 @@ +export function SvelteKitLogo({ className }: { className?: string }) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/apps/webapp/app/components/PageGradient.tsx b/apps/webapp/app/components/PageGradient.tsx new file mode 100644 index 00000000000..4bfed9f24c8 --- /dev/null +++ b/apps/webapp/app/components/PageGradient.tsx @@ -0,0 +1,12 @@ +import gradientBackground from "~/assets/images/gradient-background.png"; + +export function PageGradient({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} diff --git a/apps/webapp/app/components/SetupCommands.tsx b/apps/webapp/app/components/SetupCommands.tsx new file mode 100644 index 00000000000..2f501ea9a1c --- /dev/null +++ b/apps/webapp/app/components/SetupCommands.tsx @@ -0,0 +1,118 @@ +import { InlineCode } from "./code/InlineCode"; +import { + ClientTabs, + ClientTabsContent, + ClientTabsList, + ClientTabsTrigger, +} from "./primitives/ClientTabs"; +import { ClipboardField } from "./primitives/ClipboardField"; +import { Paragraph } from "./primitives/Paragraph"; + +export function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) { + return ( + + + npm + pnpm + yarn + + + + + + + + + + + + ); +} + +export function RunDevCommand() { + return ( + + + npm + pnpm + yarn + + + + + + + + + + + + ); +} + +export function TriggerDevCommand() { + return ( + + + npm + pnpm + yarn + + + + + + + + + + + + ); +} + +export function TriggerDevStep() { + return ( + <> + + In a separate terminal window or tab run: + + + + If you’re not running on port 3000 you can specify the port by adding{" "} + --port 3001 to the end. + + + You should leave the dev command running when + you're developing. + + + ); +} diff --git a/apps/webapp/app/components/SetupNuxt.tsx b/apps/webapp/app/components/SetupNuxt.tsx new file mode 100644 index 00000000000..0de7f22f8e7 --- /dev/null +++ b/apps/webapp/app/components/SetupNuxt.tsx @@ -0,0 +1,11 @@ +import { FrameworkComingSoon } from "./frameworks/FrameworkComingSoon"; + +export function SetupNuxt() { + return ( + + ); +} diff --git a/apps/webapp/app/components/StepContentContainer.tsx b/apps/webapp/app/components/StepContentContainer.tsx new file mode 100644 index 00000000000..e5df1206570 --- /dev/null +++ b/apps/webapp/app/components/StepContentContainer.tsx @@ -0,0 +1,3 @@ +export function StepContentContainer({ children }: { children: React.ReactNode }) { + return
{children}
; +} diff --git a/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx b/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx new file mode 100644 index 00000000000..c17848a11d9 --- /dev/null +++ b/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx @@ -0,0 +1,67 @@ +import { Squares2X2Icon } from "@heroicons/react/20/solid"; +import { GitHubDarkIcon } from "@trigger.dev/companyicons"; +import { useOrganization } from "~/hooks/useOrganizations"; +import { useProject } from "~/hooks/useProject"; +import { projectSetupPath } from "~/utils/pathBuilder"; +import { PageGradient } from "../PageGradient"; +import { LinkButton } from "../primitives/Buttons"; +import { Header1 } from "../primitives/Headers"; +import { Paragraph } from "../primitives/Paragraph"; +import { NamedIcon } from "../primitives/NamedIcon"; +export type FrameworkComingSoonProps = { + frameworkName: string; + githubIssueUrl: string; + githubIssueNumber: number; + children: React.ReactNode; +}; + +export function FrameworkComingSoon({ + frameworkName, + githubIssueUrl, + githubIssueNumber, + children, +}: FrameworkComingSoonProps) { + const organization = useOrganization(); + const project = useProject(); + + return ( + +
+
{children}
+
+ {frameworkName} is coming soon! + + Choose a different framework + +
+ + We're working hard to bring support for {frameworkName} in Trigger.dev. Follow along with + the GitHub issue or contribute and help us bring it to Trigger.dev faster. + + + triggerdotdev/trigger.dev +

+ #{githubIssueNumber}Framework: + support for {frameworkName} +

+
+ + View on GitHub + +
+
+
+
+ ); +} diff --git a/apps/webapp/app/components/frameworks/FrameworkSelector.tsx b/apps/webapp/app/components/frameworks/FrameworkSelector.tsx new file mode 100644 index 00000000000..fdf7298a74c --- /dev/null +++ b/apps/webapp/app/components/frameworks/FrameworkSelector.tsx @@ -0,0 +1,103 @@ +import { ChatBubbleLeftRightIcon } from "@heroicons/react/20/solid"; +import { Link } from "@remix-run/react"; +import { AstroLogo } from "~/assets/logos/AstroLogo"; +import { ExpressLogo } from "~/assets/logos/ExpressLogo"; +import { FastifyLogo } from "~/assets/logos/FastifyLogo"; +import { NestjsLogo } from "~/assets/logos/NestjsLogo"; +import { NextjsLogo } from "~/assets/logos/NextjsLogo"; +import { NuxtLogo } from "~/assets/logos/NuxtLogo"; +import { RedwoodLogo } from "~/assets/logos/RedwoodLogo"; +import { RemixLogo } from "~/assets/logos/RemixLogo"; +import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo"; +import { useOrganization } from "~/hooks/useOrganizations"; +import { useProject } from "~/hooks/useProject"; +import { cn } from "~/utils/cn"; +import { + projectSetupAstroPath, + projectSetupExpressPath, + projectSetupFastifyPath, + projectSetupNestjsPath, + projectSetupNextjsPath, + projectSetupNuxtPath, + projectSetupRedwoodPath, + projectSetupRemixPath, + projectSetupSvelteKitPath, +} from "~/utils/pathBuilder"; +import { Feedback } from "../Feedback"; +import { PageGradient } from "../PageGradient"; +import { Button } from "../primitives/Buttons"; +import { Header1 } from "../primitives/Headers"; + +export function FrameworkSelector() { + const organization = useOrganization(); + const project = useProject(); + + return ( + +
+
+ Choose a framework to get started… + + Request a framework + + } + defaultValue="feature" + /> +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ ); +} + +type FrameworkLinkProps = { + children: React.ReactNode; + to: string; + supported?: boolean; +}; + +function FrameworkLink({ children, to, supported = false }: FrameworkLinkProps) { + return ( + + {children} + + ); +} diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx index 5c5af307467..9b7adb3e486 100644 --- a/apps/webapp/app/components/helpContent/HelpContentText.tsx +++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx @@ -1,268 +1,26 @@ -import { ChatBubbleLeftRightIcon } from "@heroicons/react/20/solid"; -import { Link, useRevalidator } from "@remix-run/react"; -import { useEffect, useState } from "react"; -import { useEventSource } from "remix-utils"; -import invariant from "tiny-invariant"; -import gradientBackground from "~/assets/images/gradient-background.png"; +import { Link } from "@remix-run/react"; import { Paragraph } from "~/components/primitives/Paragraph"; import { StepNumber } from "~/components/primitives/StepNumber"; -import { useAppOrigin } from "~/hooks/useAppOrigin"; -import { useDevEnvironment } from "~/hooks/useEnvironments"; import { useJob } from "~/hooks/useJob"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; import { IntegrationIcon } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route"; -import { jobTestPath, projectStreamingPath } from "~/utils/pathBuilder"; -import { Feedback } from "../Feedback"; +import { jobTestPath } from "~/utils/pathBuilder"; import { CodeBlock } from "../code/CodeBlock"; import { InlineCode } from "../code/InlineCode"; import { EnvironmentLabel } from "../environments/EnvironmentLabel"; import { HelpPanelProps } from "../integrations/ApiKeyHelp"; import { HelpInstall } from "../integrations/HelpInstall"; import { HelpSamples } from "../integrations/HelpSamples"; -import { Button, LinkButton } from "../primitives/Buttons"; +import { LinkButton } from "../primitives/Buttons"; import { Callout, variantClasses } from "../primitives/Callout"; -import { - ClientTabs, - ClientTabsContent, - ClientTabsList, - ClientTabsTrigger, -} from "../primitives/ClientTabs"; -import { ClipboardField } from "../primitives/ClipboardField"; -import { Header1, Header2 } from "../primitives/Headers"; -import { NamedIcon } from "../primitives/NamedIcon"; -import { RadioGroup, RadioGroupItem } from "../primitives/RadioButton"; +import { Header2 } from "../primitives/Headers"; import { TextLink } from "../primitives/TextLink"; import integrationButton from "./integration-button.png"; import selectEnvironment from "./select-environment.png"; import selectExample from "./select-example.png"; - -type SelectionChoices = "use-existing-project" | "create-new-next-app"; - -export function HowToSetupYourProject() { - const project = useProject(); - const devEnvironment = useDevEnvironment(); - const appOrigin = useAppOrigin(); - - const [selectedValue, setSelectedValue] = useState(null); - - invariant(devEnvironment, "devEnvironment is required"); - - const revalidator = useRevalidator(); - const events = useEventSource(projectStreamingPath(project.id), { - event: "message", - }); - - useEffect(() => { - if (events !== null) { - // This uses https://www.npmjs.com/package/canvas-confetti - if ("confetti" in window && typeof window.confetti !== "undefined") { - const duration = 3.5 * 1000; - const animationEnd = Date.now() + duration; - const defaults = { - startVelocity: 30, - spread: 360, - ticks: 60, - zIndex: 0, - colors: [ - "#E7FF52", - "#41FF54", - "rgb(245 158 11)", - "rgb(22 163 74)", - "rgb(37 99 235)", - "rgb(67 56 202)", - "rgb(219 39 119)", - "rgb(225 29 72)", - "rgb(217 70 239)", - ], - }; - function randomInRange(min: number, max: number): number { - return Math.random() * (max - min) + min; - } - // @ts-ignore - const interval = setInterval(function () { - const timeLeft = animationEnd - Date.now(); - - if (timeLeft <= 0) { - return clearInterval(interval); - } - - const particleCount = 50 * (timeLeft / duration); - // since particles fall down, start a bit higher than random - // @ts-ignore - window.confetti( - Object.assign({}, defaults, { - particleCount, - origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 }, - }) - ); - // @ts-ignore - window.confetti( - Object.assign({}, defaults, { - particleCount, - origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 }, - }) - ); - }, 250); - } - - revalidator.revalidate(); - } - // WARNING Don't put the revalidator in the useEffect deps array or bad things will happen - }, [events]); // eslint-disable-line react-hooks/exhaustive-deps - - return ( -
-
-
- - Get setup in {selectedValue === "create-new-next-app" ? "5" : "2"} minutes - - - I'm stuck! - - } - defaultValue="help" - /> -
- setSelectedValue(value as SelectionChoices)} - > - } - /> - } - /> - - {selectedValue && ( - <> - {selectedValue === "create-new-next-app" ? ( - <> - - - - - npm - pnpm - yarn - - - - - - - - - - - - - - Trigger.dev works with either the Pages or App Router configuration. - - - - - - You have now created a new Next.js project. Let’s cd{" "} - into it using the project name you just provided: - - - - - - - - You’ll notice a new folder in your project called 'jobs'. We’ve added a very - simple example Job in examples.ts{" "} - to help you get started. - - - - - - - - - - - - - This page will automatically refresh. - - - ) : ( - <> - - - - - - You’ll notice a new folder in your project called 'jobs'. We’ve added a very - simple example Job in examples.ts{" "} - to help you get started. - - - - - - - - - - - - - This page will automatically refresh. - - - )} - - )} -
-
- ); -} +import { StepContentContainer } from "../StepContentContainer"; +import { TriggerDevCommand } from "../SetupCommands"; export function HowToRunYourJob() { const organization = useOrganization(); @@ -271,20 +29,6 @@ export function HowToRunYourJob() { return ( <> - - - Scheduled Triggers do not trigger Jobs in the DEV Environment. When - developing locally you should use the{" "} - - Test feature - {" "} - to trigger any scheduled Jobs. - - - There are two ways to run your Job: @@ -318,6 +62,19 @@ export function HowToRunYourJob() { How to run a Job + + + Scheduled Triggers do not trigger Jobs in the DEV Environment. When + developing locally you should use the{" "} + + Test feature + {" "} + to trigger any scheduled Jobs. + + ); } @@ -553,116 +310,3 @@ export function HowToUseApiKeysAndEndpoints() { ); } - -function StepContentContainer({ children }: { children: React.ReactNode }) { - return
{children}
; -} - -function InitCommand({ appOrigin, apiKey }: { appOrigin: string; apiKey: string }) { - return ( - - - npm - pnpm - yarn - - - - - - - - - - - - ); -} - -function NextDevCommand() { - return ( - - - npm - pnpm - yarn - - - - - - - - - - - - ); -} - -function TriggerDevCommand() { - return ( - - - npm - pnpm - yarn - - - - - - - - - - - - ); -} - -function TriggerDevStep() { - return ( - <> - - In a separate terminal window or tab run: - - - - If you’re not running on port 3000 you can specify the port by adding{" "} - --port 3001 to the end. - - - You should leave the dev command running when - you're developing. - - - ); -} diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx index 000f62bffc2..d1099ead192 100644 --- a/apps/webapp/app/components/layout/AppLayout.tsx +++ b/apps/webapp/app/components/layout/AppLayout.tsx @@ -40,8 +40,14 @@ export function BackgroundGradient({ } /** This container should be placed around the content on a page */ -export function PageContainer({ children }: { children: React.ReactNode }) { - return
{children}
; +export function PageContainer({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) { + return
{children}
; } export function PageBody({ diff --git a/apps/webapp/app/components/navigation/ProjectSideMenu.tsx b/apps/webapp/app/components/navigation/ProjectSideMenu.tsx index c147329f7e2..34d1751db81 100644 --- a/apps/webapp/app/components/navigation/ProjectSideMenu.tsx +++ b/apps/webapp/app/components/navigation/ProjectSideMenu.tsx @@ -11,6 +11,7 @@ import { organizationTeamPath, projectEnvironmentsPath, projectIntegrationsPath, + projectSetupPath, projectPath, projectTriggersPath, } from "~/utils/pathBuilder"; @@ -57,8 +58,9 @@ export function ProjectSideMenu() { animate={isCollapsed ? "collapsed" : "expanded"} variants={menuVariants} initial={isCollapsed ? "collapsed" : "expanded"} + transition={{ type: "spring", duration: 0.5 }} className={cn( - "flex h-full flex-col justify-between overflow-hidden border-r border-uiBorder p-1 transition duration-300 ease-in-out" + "flex h-full flex-col justify-between overflow-hidden border-r border-uiBorder p-1 transition" )} >
@@ -109,6 +111,13 @@ export function ProjectSideMenu() { isCollapsed={isCollapsed} data-action="usage & billing" /> + , - textColor: "text-blue-200", - linkClassName: "transition hover:bg-blue-400/40", + className: "border-slate-700 bg-slate-800", + icon: , + textColor: "text-bright", + linkClassName: "transition hover:bg-slate-750", }, warning: { className: "border-yellow-400/20 bg-yellow-400/30", diff --git a/apps/webapp/app/components/primitives/NamedIcon.tsx b/apps/webapp/app/components/primitives/NamedIcon.tsx index 817877f8011..6cbe7d8c46d 100644 --- a/apps/webapp/app/components/primitives/NamedIcon.tsx +++ b/apps/webapp/app/components/primitives/NamedIcon.tsx @@ -21,6 +21,7 @@ import { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, + ClipboardDocumentCheckIcon, ClockIcon, CloudIcon, CodeBracketSquareIcon, @@ -36,10 +37,12 @@ import { HeartIcon, KeyIcon, LightBulbIcon, + ListBulletIcon, MagnifyingGlassIcon, PlusIcon, PlusSmallIcon, QrCodeIcon, + Square2StackIcon, SquaresPlusIcon, StarIcon, TrashIcon, @@ -120,6 +123,9 @@ const icons = { job: (className: string) => , key: (className: string) => , lightbulb: (className: string) => , + "clipboard-checked": (className: string) => ( + + ), log: (className: string) => ( ), @@ -140,6 +146,7 @@ const icons = { settings: (className: string) => , spinner: (className: string) => , "spinner-white": (className: string) => , + squares: (className: string) => , star: (className: string) => , stop: (className: string) => , team: (className: string) => , diff --git a/apps/webapp/app/hooks/useProjectSetupComplete.ts b/apps/webapp/app/hooks/useProjectSetupComplete.ts new file mode 100644 index 00000000000..7f0e64ab9b3 --- /dev/null +++ b/apps/webapp/app/hooks/useProjectSetupComplete.ts @@ -0,0 +1,73 @@ +import { useEffect } from "react"; +import { useEventSource } from "remix-utils"; +import { projectPath, projectStreamingPath } from "~/utils/pathBuilder"; +import { useProject } from "./useProject"; +import { useOrganization } from "./useOrganizations"; +import { useNavigate } from "@remix-run/react"; + +export function useProjectSetupComplete() { + const project = useProject(); + const organization = useOrganization(); + const navigate = useNavigate(); + const events = useEventSource(projectStreamingPath(project.id), { + event: "message", + }); + + useEffect(() => { + if (events !== null) { + // This uses https://www.npmjs.com/package/canvas-confetti + if ("confetti" in window && typeof window.confetti !== "undefined") { + const duration = 3.5 * 1000; + const animationEnd = Date.now() + duration; + const defaults = { + startVelocity: 30, + spread: 360, + ticks: 60, + zIndex: 0, + colors: [ + "#E7FF52", + "#41FF54", + "rgb(245 158 11)", + "rgb(22 163 74)", + "rgb(37 99 235)", + "rgb(67 56 202)", + "rgb(219 39 119)", + "rgb(225 29 72)", + "rgb(217 70 239)", + ], + }; + function randomInRange(min: number, max: number): number { + return Math.random() * (max - min) + min; + } + // @ts-ignore + const interval = setInterval(function () { + const timeLeft = animationEnd - Date.now(); + + if (timeLeft <= 0) { + return clearInterval(interval); + } + + const particleCount = 60 * (timeLeft / duration); + // since particles fall down, start a bit higher than random + // @ts-ignore + window.confetti( + Object.assign({}, defaults, { + particleCount, + origin: { x: randomInRange(0.1, 0.4), y: Math.random() - 0.2 }, + }) + ); + // @ts-ignore + window.confetti( + Object.assign({}, defaults, { + particleCount, + origin: { x: randomInRange(0.6, 0.9), y: Math.random() - 0.2 }, + }) + ); + }, 250); + } + + navigate(projectPath(organization, project)); + } + // WARNING Don't put the revalidator in the useEffect deps array or bad things will happen + }, [events]); // eslint-disable-line react-hooks/exhaustive-deps +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx index f62347a0bea..d48861d176a 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx @@ -1,9 +1,7 @@ import { ArrowUpIcon } from "@heroicons/react/24/solid"; -import { LoaderArgs, SerializeFrom } from "@remix-run/server-runtime"; -import useWindowSize from "react-use/lib/useWindowSize"; +import { LoaderArgs } from "@remix-run/server-runtime"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; -import { ExternalScriptsFunction } from "remix-utils"; -import { HowToSetupYourProject } from "~/components/helpContent/HelpContentText"; +import { FrameworkSelector } from "~/components/frameworks/FrameworkSelector"; import { JobsTable } from "~/components/jobs/JobsTable"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; import { BreadcrumbLink } from "~/components/navigation/NavBar"; @@ -58,39 +56,35 @@ export const loader = async ({ request, params }: LoaderArgs) => { export const handle: Handle = { breadcrumb: (match) => , expandSidebar: true, - scripts: (match) => [ - { - src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js", - crossOrigin: "anonymous", - }, - ], }; export default function Page() { const organization = useOrganization(); const project = useProject(); const { jobs } = useTypedLoaderData(); - const { filterText, setFilterText, filteredItems } = useFilterJobs(jobs); + const hasJobs = jobs.length > 0; return ( - - - - - - - - - - - + + {hasJobs && ( + + + + + + + + + + + )} {(open) => (
- {jobs.length > 0 ? ( + {hasJobs ? ( <> {jobs.some((j) => j.hasIntegrationsRequiringAction) && ( ) : ( - + )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup._index/route.tsx new file mode 100644 index 00000000000..e63c3830990 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup._index/route.tsx @@ -0,0 +1,14 @@ +import { FrameworkSelector } from "~/components/frameworks/FrameworkSelector"; +import { Handle } from "~/utils/handle"; + +export const handle: Handle = { + expandSidebar: true, +}; + +export default function Page() { + return ( + <> + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx new file mode 100644 index 00000000000..8aa0e123133 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx @@ -0,0 +1,21 @@ +import { AstroLogo } from "~/assets/logos/AstroLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx new file mode 100644 index 00000000000..f500087cd6a --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx @@ -0,0 +1,21 @@ +import { ExpressLogo } from "~/assets/logos/ExpressLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx new file mode 100644 index 00000000000..a9eaa746910 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx @@ -0,0 +1,21 @@ +import { FastifyLogo } from "~/assets/logos/FastifyLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx new file mode 100644 index 00000000000..255f31340d7 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx @@ -0,0 +1,21 @@ +import { NestjsLogo } from "~/assets/logos/NestjsLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx new file mode 100644 index 00000000000..df31e166953 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx @@ -0,0 +1,213 @@ +import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid"; +import { useState } from "react"; +import invariant from "tiny-invariant"; +import { Feedback } from "~/components/Feedback"; +import { PageGradient } from "~/components/PageGradient"; +import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands"; +import { StepContentContainer } from "~/components/StepContentContainer"; +import { InlineCode } from "~/components/code/InlineCode"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Button, LinkButton } from "~/components/primitives/Buttons"; +import { + ClientTabs, + ClientTabsContent, + ClientTabsList, + ClientTabsTrigger, +} from "~/components/primitives/ClientTabs"; +import { ClipboardField } from "~/components/primitives/ClipboardField"; +import { Header1 } from "~/components/primitives/Headers"; +import { NamedIcon } from "~/components/primitives/NamedIcon"; +import { Paragraph } from "~/components/primitives/Paragraph"; +import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton"; +import { StepNumber } from "~/components/primitives/StepNumber"; +import { useAppOrigin } from "~/hooks/useAppOrigin"; +import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete"; +import { useDevEnvironment } from "~/hooks/useEnvironments"; +import { useOrganization } from "~/hooks/useOrganizations"; +import { useProject } from "~/hooks/useProject"; +import { Handle } from "~/utils/handle"; +import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder"; +import { Callout } from "~/components/primitives/Callout"; + +type SelectionChoices = "use-existing-project" | "create-new-next-app"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function SetupNextjs() { + const organization = useOrganization(); + const project = useProject(); + useProjectSetupComplete(); + const devEnvironment = useDevEnvironment(); + const appOrigin = useAppOrigin(); + const [selectedValue, setSelectedValue] = useState(null); + + invariant(devEnvironment, "devEnvironment is required"); + + return ( + +
+
+ + Get setup in {selectedValue === "create-new-next-app" ? "5" : "2"} minutes + +
+ + Choose a different framework + + + I'm stuck! + + } + defaultValue="help" + /> +
+
+ setSelectedValue(value as SelectionChoices)} + > + } + /> + } + /> + + {selectedValue && ( + <> + + Trigger.dev has full support for serverless. We will be adding support for + long-running servers soon. + + {selectedValue === "create-new-next-app" ? ( + <> + + + + + npm + pnpm + yarn + + + + + + + + + + + + + + Trigger.dev works with either the Pages or App Router configuration. + + + + + + You have now created a new Next.js project. Let’s cd{" "} + into it using the project name you just provided: + + + + + + + + You’ll notice a new folder in your project called 'jobs'. We’ve added a very + simple example Job in examples.ts{" "} + to help you get started. + + + + + + + + + + + + + This page will automatically refresh. + + + ) : ( + <> + + + + + + You’ll notice a new folder in your project called 'jobs'. We’ve added a very + simple example Job in examples.ts{" "} + to help you get started. + + + + + + + + + + + + + This page will automatically refresh. + + + )} + + )} +
+
+ ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx new file mode 100644 index 00000000000..7ab0c20a977 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx @@ -0,0 +1,21 @@ +import { NuxtLogo } from "~/assets/logos/NuxtLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx new file mode 100644 index 00000000000..8fea7be7778 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx @@ -0,0 +1,21 @@ +import { RedwoodLogo } from "~/assets/logos/RedwoodLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx new file mode 100644 index 00000000000..18b0a2e0bea --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx @@ -0,0 +1,21 @@ +import { RemixLogo } from "~/assets/logos/RemixLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => , +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx new file mode 100644 index 00000000000..8083db44b13 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx @@ -0,0 +1,23 @@ +import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo"; +import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => ( + + ), +}; + +export default function Page() { + return ( + + + + ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx new file mode 100644 index 00000000000..5bee4308479 --- /dev/null +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx @@ -0,0 +1,18 @@ +import { Outlet } from "@remix-run/react"; +import { BreadcrumbLink } from "~/components/navigation/NavBar"; +import { Handle } from "~/utils/handle"; +import { trimTrailingSlash } from "~/utils/pathBuilder"; + +export const handle: Handle = { + breadcrumb: (match) => ( + + ), +}; + +export default function Page() { + return ( +
+ +
+ ); +} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx index 6bde673e96a..4a697ff3fbe 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx @@ -53,6 +53,12 @@ export const loader = async ({ request, params }: LoaderArgs) => { export const handle: Handle = { breadcrumb: (_match, matches) => , + scripts: (match) => [ + { + src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js", + crossOrigin: "anonymous", + }, + ], }; export default function Project() { diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts index 6c51c66340e..ccd5388f5c0 100644 --- a/apps/webapp/app/utils/pathBuilder.ts +++ b/apps/webapp/app/utils/pathBuilder.ts @@ -115,6 +115,46 @@ export function projectPath(organization: OrgForPath, project: ProjectForPath) { return `/orgs/${organizationParam(organization)}/projects/${projectParam(project)}`; } +export function projectSetupPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup`; +} + +export function projectSetupNextjsPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/nextjs`; +} + +export function projectSetupRemixPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/remix`; +} + +export function projectSetupExpressPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/express`; +} + +export function projectSetupRedwoodPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/redwood`; +} + +export function projectSetupNuxtPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/nuxt`; +} + +export function projectSetupSvelteKitPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/sveltekit`; +} + +export function projectSetupFastifyPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/fastify`; +} + +export function projectSetupAstroPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/astro`; +} + +export function projectSetupNestjsPath(organization: OrgForPath, project: ProjectForPath) { + return `${projectPath(organization, project)}/setup/nestjs`; +} + export function projectJobsPath(organization: OrgForPath, project: ProjectForPath) { return projectPath(organization, project); } diff --git a/docs/_snippets/integration-getting-started.mdx b/docs/_snippets/integration-getting-started.mdx index 3623adff8a7..64f0f894da7 100644 --- a/docs/_snippets/integration-getting-started.mdx +++ b/docs/_snippets/integration-getting-started.mdx @@ -1,3 +1,3 @@ ## Getting started -If you have not yet set up Trigger.dev in your Next.js project, go to the [quick start guide](/documentation/quickstart). +If you have not yet set up Trigger.dev in your project, go to the [quick start guide](/documentation/quickstart). diff --git a/docs/_snippets/manual-setup-astro.mdx b/docs/_snippets/manual-setup-astro.mdx new file mode 100644 index 00000000000..81805791f16 --- /dev/null +++ b/docs/_snippets/manual-setup-astro.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Astro framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-express.mdx b/docs/_snippets/manual-setup-express.mdx new file mode 100644 index 00000000000..9ea095ca7fc --- /dev/null +++ b/docs/_snippets/manual-setup-express.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Express framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-fastify.mdx b/docs/_snippets/manual-setup-fastify.mdx new file mode 100644 index 00000000000..d8711a764ce --- /dev/null +++ b/docs/_snippets/manual-setup-fastify.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Fastify framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-nuxt.mdx b/docs/_snippets/manual-setup-nuxt.mdx new file mode 100644 index 00000000000..1248f47b501 --- /dev/null +++ b/docs/_snippets/manual-setup-nuxt.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Nuxt framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-redwood.mdx b/docs/_snippets/manual-setup-redwood.mdx new file mode 100644 index 00000000000..5b3745b5c79 --- /dev/null +++ b/docs/_snippets/manual-setup-redwood.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Redwood framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-remix.mdx b/docs/_snippets/manual-setup-remix.mdx new file mode 100644 index 00000000000..bdc77551746 --- /dev/null +++ b/docs/_snippets/manual-setup-remix.mdx @@ -0,0 +1 @@ +We're in the process of building support for the Remix framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/_snippets/manual-setup-sveltekit.mdx b/docs/_snippets/manual-setup-sveltekit.mdx new file mode 100644 index 00000000000..8e299631de5 --- /dev/null +++ b/docs/_snippets/manual-setup-sveltekit.mdx @@ -0,0 +1 @@ +We're in the process of building support for the SvelteKit framework. You can follow along with progress or contribute via [this GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues). diff --git a/docs/documentation/changelog.mdx b/docs/documentation/changelog.mdx index 21f8b0d3b23..aac1282e222 100644 --- a/docs/documentation/changelog.mdx +++ b/docs/documentation/changelog.mdx @@ -1,15 +1,4 @@ --- title: "Changelog" -description: "We release features and fixes weekly! See some of the changes we have made." +url: "https://github.com/triggerdotdev/trigger.dev/releases" --- - -## June 28 2023 Release - -The first release of Trigger.dev v2, a major overhaul. - -- Works well on serverless and long-running servers -- Adaptors for Next.js -- Simpler architecture utilizing Postgres -- Integrations are now just Node.js packages -- New UI -- Easy self-hosting diff --git a/docs/documentation/concepts/what-is-triggerdotdev.mdx b/docs/documentation/concepts/what-is-triggerdotdev.mdx index 93fd1f44be0..a456f017b69 100644 --- a/docs/documentation/concepts/what-is-triggerdotdev.mdx +++ b/docs/documentation/concepts/what-is-triggerdotdev.mdx @@ -71,7 +71,7 @@ client.defineJob({ }); ``` -This code lives in a file inside your Next.js repo. +This code lives in a file inside your project repo. It is listening for the [issueEvent](/integrations/apis/github/triggers) GitHub webhook, and when it receives one, we will take care of calling the `run` function supplied to the `Job` constructor with the webhook payload. This gives you the following advantages over traditional webhooks: diff --git a/docs/documentation/faq.mdx b/docs/documentation/faq.mdx index e698ed10409..0357f2c9257 100644 --- a/docs/documentation/faq.mdx +++ b/docs/documentation/faq.mdx @@ -8,23 +8,15 @@ description: "This section is aimed at collecting common questions from users to - Only what you choose to send. The main body of your Job code runs on your - infrastructure. For example when you do a database query, that never touches - us. We receive data that triggers the start of a Job, any data you pass to one - of our API Integrations, and any data you choose to log using our logging - function. We store this to display on the Runs page of your dashboard. + Only what you choose to send. The main body of your Job code runs on your infrastructure. For + example when you do a database query, that never touches us. We receive data that triggers the + start of a Job, any data you pass to one of our API Integrations, and any data you choose to log + using our logging function. We store this to display on the Runs page of your dashboard. - - No, you'll be able to use Trigger.dev with a variety of other frameworks, - serverless or otherwise, such as Node.js, Remix, and Express, in addition to - Next.js. - - - - Trigger.dev is a code-first tool that lets you create Jobs directly in your - code, rather than using a UI builder like Zapier. This means you can stay in - your own IDE and keep your internal data secure. + + You can use Trigger.dev with a variety of frameworks. You can check out [the full list + here](/documentation/quickstarts/introduction). @@ -32,52 +24,47 @@ description: "This section is aimed at collecting common questions from users to - Yes. There’s no limit to the complexity of Jobs you can create. Jobs are - created in code so you can write conditional, looping, branching or time - delayed logic. + Yes. There’s no limit to the complexity of Jobs you can create. Jobs are created in code so you + can write conditional, looping, branching or time delayed logic. - A run is a single execution of a Job. This can be in either development, - staging or production. [View full details](/documentation/concepts/runs). + A run is a single execution of a Job. This can be in either development, staging or production. + [View full details](/documentation/concepts/runs). - Yes. You create Jobs directly in your own code so it’s version controlled with - everything else. + Yes. You create Jobs directly in your own code so it’s version controlled with everything else. - A simple Job doing a couple of API calls from different services will take - about 5 minutes to create. + A simple Job doing a couple of API calls from different services will take about 5 minutes to + create. - View [our Integrations page](/integrations) to see the Integrations we - currently support. If we don't have an Integration you need, you can request - it or create it yourself. + View [our Integrations page](/integrations) to see the Integrations we currently support. If we + don't have an Integration you need, you can request it or create it yourself. - Yes, Trigger.dev is open source. We are strong supporters of open source - software, and our first product, [jsonhero.io](https://jsonhero.io), has a - thriving open source community. Trigger.dev follows in that tradition. + Yes, Trigger.dev is open source. We are strong supporters of open source software, and our first + product, [jsonhero.io](https://jsonhero.io), has a thriving open source community. Trigger.dev + follows in that tradition. - - No. Trigger.dev is designed for developers who want to create Jobs directly in - code, without using a UI builder like Zapier. This allows developers to stay - in their familiar development environment and customise their Jobs with code. + + No. Trigger.dev is designed for developers who want to create Jobs directly in code, without using + a UI builder like Zapier. This allows developers to stay in their familiar development environment + and customise their Jobs with code. - Developers will need to create Jobs. However, anyone on the team can monitor - running Jobs in the Trigger.dev dashboard. + Developers will need to create Jobs. However, anyone on the team can monitor running Jobs in the + Trigger.dev dashboard. - Hop in our [Discord](https://discord.gg/nkqV9xBYWy) and ask any question you have in there! - -You could also open a [GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues/new). - + Hop in our [Discord](https://discord.gg/nkqV9xBYWy) and ask any question you have in there! You + could also open a [GitHub issue](https://github.com/triggerdotdev/trigger.dev/issues/new). diff --git a/docs/documentation/guides/cli.mdx b/docs/documentation/guides/cli.mdx index 235b51d693b..ebd40eb9e62 100644 --- a/docs/documentation/guides/cli.mdx +++ b/docs/documentation/guides/cli.mdx @@ -9,7 +9,7 @@ If you're setting up your project for the first time, we recommend using the CLI ## init Command -The `init` command incorporates Trigger.dev into your Next.js project. It performs the following functions: +The `init` command incorporates Trigger.dev into your project. It performs the following functions: - Adds Trigger.dev to the project. - Creates a new route. @@ -74,13 +74,13 @@ yarn dlx @trigger.dev/cli@latest init ## dev Command -Once you're running your Next.js project locally, you can then execute the `dev` CLI command to run Trigger.dev locally. You should run this command every time you want to use Trigger.dev locally. +Once you're running your project locally, you can then execute the `dev` CLI command to run Trigger.dev locally. You should run this command every time you want to use Trigger.dev locally. ![Your first Job](/images/cli-dev.gif) - Make sure your Next.js site is running locally before continuing. You must also leave this `dev` - terminal command running while you develop. + Make sure your site is running locally before continuing. You must also leave this `dev` terminal + command running while you develop. In a **new terminal window or tab** run: @@ -107,7 +107,7 @@ yarn dlx @trigger.dev/cli@latest dev You can optionally pass the hostname if you're not running on localhost by adding - `--hostname `. Example, in case your Next.js is running on 0.0.0.0: `--hostname 0.0.0.0`. + `--hostname `. For example, in case your app is running on 0.0.0.0: `--hostname 0.0.0.0`. ## update Command diff --git a/docs/documentation/guides/create-a-job.mdx b/docs/documentation/guides/create-a-job.mdx index ce99681744c..c89c05dfd1b 100644 --- a/docs/documentation/guides/create-a-job.mdx +++ b/docs/documentation/guides/create-a-job.mdx @@ -33,8 +33,8 @@ The `id` and `name` are important because they are used to create and identify y This Job must be imported in the `trigger` file in order to be registered when the CLI dev command - is run. This can be found in either the `app/api/trigger/route.ts` file if you're using the - Next.js App Router, or `pages/api/trigger.ts` if you're using the Next.js Pages Router. + is run. If you're using Next.js, this can be found in either the `app/api/trigger/route.ts` file + for projects using the App Router, or `pages/api/trigger.ts` if you're using the Pages Router. ### 2. Choose a Trigger diff --git a/docs/documentation/guides/manual/astro.mdx b/docs/documentation/guides/manual/astro.mdx new file mode 100644 index 00000000000..2035d855adc --- /dev/null +++ b/docs/documentation/guides/manual/astro.mdx @@ -0,0 +1,7 @@ +--- +title: "Astro" +sidebarTitle: "Astro" +description: "How to manually setup Trigger.dev in your Astro project" +--- + + diff --git a/docs/documentation/guides/manual/express.mdx b/docs/documentation/guides/manual/express.mdx new file mode 100644 index 00000000000..ca163c63db6 --- /dev/null +++ b/docs/documentation/guides/manual/express.mdx @@ -0,0 +1,7 @@ +--- +title: "Express" +sidebarTitle: "Express" +description: "How to manually setup Trigger.dev in your Express project" +--- + + diff --git a/docs/documentation/guides/manual/fastify.mdx b/docs/documentation/guides/manual/fastify.mdx new file mode 100644 index 00000000000..29ab2606c92 --- /dev/null +++ b/docs/documentation/guides/manual/fastify.mdx @@ -0,0 +1,7 @@ +--- +title: "Fastify" +sidebarTitle: "Fastify" +description: "How to manually setup Trigger.dev in your Fastify project" +--- + + diff --git a/docs/documentation/guides/manual.mdx b/docs/documentation/guides/manual/nextjs.mdx similarity index 75% rename from docs/documentation/guides/manual.mdx rename to docs/documentation/guides/manual/nextjs.mdx index 9a81e944275..56285d2f8eb 100644 --- a/docs/documentation/guides/manual.mdx +++ b/docs/documentation/guides/manual/nextjs.mdx @@ -1,6 +1,7 @@ --- -title: Using Manual Setup -description: How to Manually Initialize Trigger.dev in your Next.js project +title: "Next.js" +sidebarTitle: "Next.js" +description: "How to manually setup Trigger.dev in your Next.js project" --- @@ -15,6 +16,7 @@ Trigger.dev works with either the Pages or App Router configuration. ## Installing Required Packages + To begin, install the necessary packages in your Next.js project directory. You can choose one of the following package managers: @@ -42,6 +44,7 @@ yarn add @trigger.dev/sdk @trigger-dev/nextjs Ensure that you execute this command within a Next.js project. ## Obtaining the Development API Key + To locate your development API key, login to the [Trigger.dev dashboard](https://cloud.trigger.dev) and select the Project you want to connect to. Then click on the Environments & API Keys tab in the left menu. @@ -49,6 +52,7 @@ You can copy your development API Key from the field at the top of this page. (Your development key will start with `tr_dev_`). ## Adding Environment Variables + Create a `.env.local` file at the root of your project and include your Trigger API key and URL like this: ```bash @@ -65,7 +69,7 @@ Replace `ENTER_YOUR_DEVELOPMENT_API_KEY_HERE` with the actual API key obtained f To set up the Trigger Client for your project, follow these steps: 1. **Create Configuration File:** - + In your project directory, create a configuration file named `trigger.ts` or `trigger.js`, depending on whether your project uses TypeScript (`.ts`) or JavaScript (`.js`). 2. **Choose Directory:** @@ -78,41 +82,41 @@ To set up the Trigger Client for your project, follow these steps: ```typescript // trigger.ts (for TypeScript) or trigger.js (for JavaScript) - + import { TriggerClient } from "@trigger.dev/sdk"; - + export const client = new TriggerClient({ id: "my-app", apiKey: process.env.TRIGGER_API_KEY, apiUrl: process.env.TRIGGER_API_URL, }); - ``` - Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier. + Replace **"my-app"** with an appropriate identifier for your project. The **apiKey** and **apiUrl** are obtained from the environment variables you set earlier. 4. **File Location:** - Depending on your project structure, save the configuration file in the appropriate location: - - If your project uses a **src** directory, save the file within the **src** directory. - - If your project does not use a **src** directory, save the file in the project root. + Depending on your project structure, save the configuration file in the appropriate location: - **Example Directory Structure with src:** + - If your project uses a **src** directory, save the file within the **src** directory. + - If your project does not use a **src** directory, save the file in the project root. - ``` - project-root/ - ├── src/ - ├── trigger.ts - ├── other files... - ``` + **Example Directory Structure with src:** - **Example Directory Structure without src:** + ``` + project-root/ + ├── src/ + ├── trigger.ts + ├── other files... + ``` - ``` - project-root/ - ├── trigger.ts - ├── other files... - ``` + **Example Directory Structure without src:** + + ``` + project-root/ + ├── trigger.ts + ├── other files... + ``` By following these steps, you'll configure the Trigger Client to work with your project, regardless of whether you have a separate **src** directory and whether you're using TypeScript or JavaScript files. @@ -147,14 +151,21 @@ To establish an API route for interacting with Trigger.dev, follow these steps b export { config }; export default handler; ``` + -In the code blocks, replace "@/trigger" with the appropriate path to your Trigger Client configuration file, and adjust the path to the Jobs folder accordingly. Make sure to provide the correct paths if your project isn't utilizing the Next.js alias feature. + + In the code blocks, replace "@/trigger" with the appropriate path to your Trigger Client + configuration file, and adjust the path to the Jobs folder accordingly. Make sure to provide the + correct paths if your project isn't utilizing the Next.js alias feature. + ## Creating the Example Job + 1. Create a folder named `Jobs` alongside your `app` or `pages` directory 2. Inside the `Jobs` folder, add two files named `example.(ts/js)` and `index.(ts/js)`. + ```typescript example.(ts/js) @@ -182,12 +193,13 @@ client.defineJob({ ```typescript index.ts/index.(ts/js) // import all your job files here -export * from "./examples" +export * from "./examples"; ``` ## Additonal Job Definitions + You can define more job definitions by creating additional files in the `Jobs` folder and exporting them in `index` file. For example, in `index.(ts/js)`, you can export other job files like this: @@ -195,7 +207,7 @@ For example, in `index.(ts/js)`, you can export other job files like this: ```typescript // import all your job files here -export * from "./examples" +export * from "./examples"; export * from "./other-job-file"; ``` @@ -210,6 +222,7 @@ Inside the `package.json` file, add the following configuration under the root o ``` Your `package.json` file might look something like this: + ```json { "name": "my-app", @@ -227,13 +240,13 @@ Replace **"my-app"** with the appropriate identifier you used during the step fo ## Next Steps -Start your Next.js project locally locally, and then execute the `dev` CLI command to run Trigger.dev locally. You should run this command every time you want to use Trigger.dev locally. +Start your Next.js project locally, and then execute the `dev` CLI command to run Trigger.dev locally. You should run this command every time you want to use Trigger.dev locally. ![Your first Job](/images/cli-dev.gif) - Make sure your Next.js site is running locally before continuing. You must - also leave this `dev` terminal command running while you develop. + Make sure your Next.js site is running locally before continuing. You must also leave this `dev` + terminal command running while you develop. In a **new terminal window or tab** run: @@ -263,4 +276,10 @@ yarn dlx @trigger.dev/cli@latest dev `--hostname `. Example, in case your Next.js is running on 0.0.0.0: `--hostname 0.0.0.0`. -If your existing Next.js project utilizes middleware and you encounter any issues, such as potential conflicts with Trigger.dev, it's recommended to refer to the troubleshooting guide at [Middleware](/documentation/guides/platforms/nextjs#middleware) for assistance. This guide can help you address any concerns related to middleware conflicts and ensure the smooth functioning of your project with Trigger.dev. + + If your existing Next.js project utilizes middleware and you encounter any issues, such as + potential conflicts with Trigger.dev, it's recommended to refer to the troubleshooting guide at + [Middleware](/documentation/guides/platforms/nextjs#middleware) for assistance. This guide can + help you address any concerns related to middleware conflicts and ensure the smooth functioning of + your project with Trigger.dev. + diff --git a/docs/documentation/guides/manual/nuxt.mdx b/docs/documentation/guides/manual/nuxt.mdx new file mode 100644 index 00000000000..10851dc2d92 --- /dev/null +++ b/docs/documentation/guides/manual/nuxt.mdx @@ -0,0 +1,7 @@ +--- +title: "Nuxt" +sidebarTitle: "Nuxt" +description: "How to manually setup Trigger.dev in your Nuxt project" +--- + + diff --git a/docs/documentation/guides/manual/redwood.mdx b/docs/documentation/guides/manual/redwood.mdx new file mode 100644 index 00000000000..4b13206bf4d --- /dev/null +++ b/docs/documentation/guides/manual/redwood.mdx @@ -0,0 +1,7 @@ +--- +title: "Redwood" +sidebarTitle: "Redwood" +description: "How to manually setup Trigger.dev in your Redwood project" +--- + + diff --git a/docs/documentation/guides/manual/remix.mdx b/docs/documentation/guides/manual/remix.mdx new file mode 100644 index 00000000000..f2b27d6d63e --- /dev/null +++ b/docs/documentation/guides/manual/remix.mdx @@ -0,0 +1,7 @@ +--- +title: "Remix" +sidebarTitle: "Remix" +description: "How to manually setup Trigger.dev in your Remix project" +--- + + diff --git a/docs/documentation/guides/manual/sveltekit.mdx b/docs/documentation/guides/manual/sveltekit.mdx new file mode 100644 index 00000000000..307581eb11a --- /dev/null +++ b/docs/documentation/guides/manual/sveltekit.mdx @@ -0,0 +1,7 @@ +--- +title: "SvelteKit" +sidebarTitle: "SvelteKit" +description: "How to manually setup Trigger.dev in your SvelteKit project" +--- + + diff --git a/docs/documentation/guides/platforms/astro.mdx b/docs/documentation/guides/platforms/astro.mdx new file mode 100644 index 00000000000..201dcc2c2b6 --- /dev/null +++ b/docs/documentation/guides/platforms/astro.mdx @@ -0,0 +1,7 @@ +--- +title: "Astro" +sidebarTitle: "Astro" +description: "How to get setup and deploy Jobs for your Astro project" +--- + + diff --git a/docs/documentation/guides/platforms/express.mdx b/docs/documentation/guides/platforms/express.mdx index 4136ddb62ee..6d4cd0b244e 100644 --- a/docs/documentation/guides/platforms/express.mdx +++ b/docs/documentation/guides/platforms/express.mdx @@ -1,6 +1,6 @@ --- title: "Express" -description: "How to get setup and deploy your Express project" +description: "How to get setup and deploy Jobs for your Express project" --- -Support for Express is coming very soon + diff --git a/docs/documentation/guides/platforms/fastify.mdx b/docs/documentation/guides/platforms/fastify.mdx new file mode 100644 index 00000000000..12c6a780f19 --- /dev/null +++ b/docs/documentation/guides/platforms/fastify.mdx @@ -0,0 +1,6 @@ +--- +title: "Fastify" +description: "How to get setup and deploy Jobs for your Fastify project" +--- + + diff --git a/docs/documentation/guides/platforms/nuxt.mdx b/docs/documentation/guides/platforms/nuxt.mdx new file mode 100644 index 00000000000..037b7cc7b10 --- /dev/null +++ b/docs/documentation/guides/platforms/nuxt.mdx @@ -0,0 +1,6 @@ +--- +title: "Nuxt" +description: "How to get setup and deploy Jobs for your Nuxt project" +--- + + diff --git a/docs/documentation/guides/platforms/redwood.mdx b/docs/documentation/guides/platforms/redwood.mdx new file mode 100644 index 00000000000..8bb2ff3ab41 --- /dev/null +++ b/docs/documentation/guides/platforms/redwood.mdx @@ -0,0 +1,6 @@ +--- +title: "Redwood" +description: "How to get setup and deploy Jobs for your Redwood project" +--- + + diff --git a/docs/documentation/guides/platforms/remix.mdx b/docs/documentation/guides/platforms/remix.mdx new file mode 100644 index 00000000000..a113fa59c76 --- /dev/null +++ b/docs/documentation/guides/platforms/remix.mdx @@ -0,0 +1,6 @@ +--- +title: "Remix" +description: "How to get setup and deploy Jobs for your Remix project" +--- + + diff --git a/docs/documentation/guides/platforms/sveltekit.mdx b/docs/documentation/guides/platforms/sveltekit.mdx new file mode 100644 index 00000000000..e3316418f15 --- /dev/null +++ b/docs/documentation/guides/platforms/sveltekit.mdx @@ -0,0 +1,6 @@ +--- +title: "SvelteKit" +description: "How to get setup and deploy Jobs for your SvelteKit project" +--- + + diff --git a/docs/documentation/introduction.mdx b/docs/documentation/introduction.mdx index cea23131a9d..0a962b24782 100644 --- a/docs/documentation/introduction.mdx +++ b/docs/documentation/introduction.mdx @@ -3,7 +3,7 @@ title: Introduction description: "Welcome to the Trigger.dev documentation." --- -Trigger.dev is an open source framework for creating long-running Jobs directly in your Next.js app with API Integrations, webhooks, scheduling and delays. You can reliably run Jobs that wouldn't normally work in serverless environments (like Vercel) because of timeouts. +Trigger.dev is an open source framework for creating long-running Jobs directly in your app with API Integrations, webhooks, scheduling and delays. You can reliably run Jobs that wouldn't normally work in serverless environments (like Vercel) because of timeouts. You can use [Trigger.dev Cloud](https://cloud.trigger.dev) or [Self-host Trigger.dev](/documentation/guides/self-hosting) on your own infrastructure. @@ -13,11 +13,11 @@ You can use [Trigger.dev Cloud](https://cloud.trigger.dev) or [Self-host Trigger - + Get started in 5 minutes. - Go from zero to a working Job in your Next.js app in 10 minutes. + Go from zero to a working Job in your app in 10 minutes. diff --git a/docs/documentation/quickstarts/express.mdx b/docs/documentation/quickstarts/express.mdx new file mode 100644 index 00000000000..83648bf4957 --- /dev/null +++ b/docs/documentation/quickstarts/express.mdx @@ -0,0 +1,7 @@ +--- +title: "Express Quick Start" +sidebarTitle: "Express" +description: "Start creating Jobs in 5 minutes in your Express project." +--- + + diff --git a/docs/documentation/quickstarts/fastify.mdx b/docs/documentation/quickstarts/fastify.mdx new file mode 100644 index 00000000000..8ffbbcc958e --- /dev/null +++ b/docs/documentation/quickstarts/fastify.mdx @@ -0,0 +1,7 @@ +--- +title: "Fastify Quick Start" +sidebarTitle: "Fastify" +description: "Start creating Jobs in 5 minutes in your Fastify project." +--- + + diff --git a/docs/documentation/quickstarts/introduction.mdx b/docs/documentation/quickstarts/introduction.mdx new file mode 100644 index 00000000000..22306c0b11d --- /dev/null +++ b/docs/documentation/quickstarts/introduction.mdx @@ -0,0 +1,271 @@ +--- +title: "Introduction" +sidebarTitle: "Introduction" +--- + + + Trigger.dev lets you create long-running jobs in serverless environments. Support for long-running + servers is [coming soon](https://github.com/triggerdotdev/trigger.dev/discussions/430). + + +## Select a framework to get started… + + + + + + + + + + + + + + + + + + +} + href="/documentation/quickstarts/nextjs" + +> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +} href="/documentation/quickstarts/remix"> + + + + + + + + + + + +} href="/documentation/quickstarts/express"> + + + + + + + + + + + + + + + + + + + + +} href="/documentation/quickstarts/redwood"> + + + + + + + + + + + + + + + + + + + + + + + + + + +} href="/documentation/quickstarts/astro"> + + + + + + + + + + + + +} href="/documentation/quickstarts/nuxt"> + + + + + + + + + + + + + + +} href="/documentation/quickstarts/sveltkit"> + + + + + + + + + + + + + + + + + + +} href="/documentation/quickstarts/fastify"/> + + + +## Or quickly setup Trigger.dev with… + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + href="/documentation/quickstarts/supabase" + +> + + diff --git a/docs/documentation/quickstarts/nuxt.mdx b/docs/documentation/quickstarts/nuxt.mdx new file mode 100644 index 00000000000..c93cbf5861f --- /dev/null +++ b/docs/documentation/quickstarts/nuxt.mdx @@ -0,0 +1,7 @@ +--- +title: "Nuxt Quick Start" +sidebarTitle: "Nuxt" +description: "Start creating Jobs in 5 minutes in your Nuxt project." +--- + + diff --git a/docs/documentation/quickstarts/redwood.mdx b/docs/documentation/quickstarts/redwood.mdx new file mode 100644 index 00000000000..831faf277d7 --- /dev/null +++ b/docs/documentation/quickstarts/redwood.mdx @@ -0,0 +1,7 @@ +--- +title: "Redwood Quick Start" +sidebarTitle: "Redwood" +description: "Start creating Jobs in 5 minutes in your Redwood project." +--- + + diff --git a/docs/documentation/quickstarts/remix.mdx b/docs/documentation/quickstarts/remix.mdx new file mode 100644 index 00000000000..a3a2bb174f8 --- /dev/null +++ b/docs/documentation/quickstarts/remix.mdx @@ -0,0 +1,7 @@ +--- +title: "Remix Quick Start" +sidebarTitle: "Remix" +description: "Start creating Jobs in 5 minutes in your Remix project." +--- + + diff --git a/docs/documentation/quickstarts/supabase.mdx b/docs/documentation/quickstarts/supabase.mdx index 1e0aeba2c40..63a27093aa2 100644 --- a/docs/documentation/quickstarts/supabase.mdx +++ b/docs/documentation/quickstarts/supabase.mdx @@ -1,6 +1,6 @@ --- title: "Supabase Quick Start" -sidebarTitle: "Supabase.com" +sidebarTitle: "Supabase" description: "Integrate Supabase with Trigger.dev in minutes." --- diff --git a/docs/documentation/quickstarts/sveltekit.mdx b/docs/documentation/quickstarts/sveltekit.mdx new file mode 100644 index 00000000000..9a4a9295623 --- /dev/null +++ b/docs/documentation/quickstarts/sveltekit.mdx @@ -0,0 +1,7 @@ +--- +title: "SvelteKit Quick Start" +sidebarTitle: "SvelteKit" +description: "Start creating Jobs in 5 minutes in your SvelteKit project." +--- + + diff --git a/docs/documentation/roadmap.mdx b/docs/documentation/roadmap.mdx index b9ea1a8b686..e27743cb964 100644 --- a/docs/documentation/roadmap.mdx +++ b/docs/documentation/roadmap.mdx @@ -1,15 +1,4 @@ --- title: "Roadmap" -description: "Coming changes to Trigger.dev" +url: "https://trigger.dev#roadmap" --- - -## Next up - -Features and Integrations we'll be working on next. - -#### Features - -- Trigger.dev Connect: authenticate your users so you can quickly add Integrations to your app. -- Vercel Integration -- Error alerts: get notified when your Jobs fail or don't start. -- Filtering Runs (e.g. by status) diff --git a/docs/mint.json b/docs/mint.json index a26056a83af..f877bcf3d65 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -53,7 +53,11 @@ "redirects": [ { "source": "/documentation/quickstart", - "destination": "/documentation/quickstarts/nextjs" + "destination": "/documentation/quickstarts/introduction" + }, + { + "source": "/documentation/guides/manual", + "destination": "/documentation/guides/manual/nextjs" } ], "navigation": [ @@ -63,7 +67,23 @@ "documentation/introduction", { "group": "Quick Starts", - "pages": ["documentation/quickstarts/nextjs", "documentation/quickstarts/supabase"] + "pages": [ + "documentation/quickstarts/introduction", + { + "group": "Frameworks", + "pages": [ + "documentation/quickstarts/nextjs", + "documentation/quickstarts/express", + "documentation/quickstarts/remix", + "documentation/quickstarts/redwood", + "documentation/quickstarts/astro", + "documentation/quickstarts/nuxt", + "documentation/quickstarts/sveltekit", + "documentation/quickstarts/fastify" + ] + }, + "documentation/quickstarts/supabase" + ] }, "documentation/guides/create-a-job", "documentation/guides/video-walkthrough" @@ -108,11 +128,30 @@ "group": "Platforms", "pages": [ "documentation/guides/platforms/nextjs", - "documentation/guides/platforms/express" + "documentation/guides/platforms/express", + "documentation/guides/platforms/remix", + "documentation/guides/platforms/redwood", + "documentation/guides/platforms/astro", + "documentation/guides/platforms/nuxt", + "documentation/guides/platforms/sveltekit", + "documentation/guides/platforms/fastify" ] }, "documentation/guides/cli", - "documentation/guides/manual", + { + "group": "Manual setup", + "pages": [ + "documentation/guides/manual/nextjs", + "documentation/guides/manual/express", + "documentation/guides/manual/remix", + "documentation/guides/manual/redwood", + "documentation/guides/manual/astro", + "documentation/guides/manual/nuxt", + "documentation/guides/manual/sveltekit", + "documentation/guides/manual/fastify" + ] + }, + "documentation/guides/running-jobs", "documentation/guides/jobs/managing", { @@ -125,7 +164,7 @@ ] }, { - "group": "Using integrations", + "group": "Using Integrations", "pages": [ "documentation/guides/using-integrations", "documentation/guides/using-integrations-apikeys", diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index da47724a3b4..5ca61ad30f2 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -48,7 +48,9 @@ export const initCommand = async (options: InitCommandOptions) => { const isNextJsProject = await detectNextJsProject(resolvedPath); if (!isNextJsProject) { - logger.error("You must run this command in a Next.js project."); + logger.error( + "We currently only support automatic setup for Next.js projects (we didn't detect one). View our manual installation guides for all frameworks: https://trigger.dev/docs/documentation/quickstarts/introduction" + ); telemetryClient.init.failed("not_nextjs_project", options); return; } else { diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md new file mode 100644 index 00000000000..3ea176ccb3c --- /dev/null +++ b/packages/nextjs/README.md @@ -0,0 +1,9 @@ +# Next.js and Trigger.dev + +Trigger.dev has full support for the Next.js framework, including both the Pages and App router. + +For information about the using Trigger.dev in your Next.js app, check out these useful docs links: + +- [Quick start guide for getting setup with Trigger.dev in a Next.js project](https://trigger.dev/docs/documentation/quickstarts/nextjs) +- [Manually setup Next.js with Trigger.dev](https://trigger.dev/docs/documentation/guides/manual/nextjs) +- [Using Trigger.dev with Next.js, handling middleware and more](https://trigger.dev/docs/documentation/guides/platforms/nextjs)