NestJS framework suport (from @H4ad)

.changeset/fair-waves-hug.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/nestjs": patch
+---
+
+First release of NestJS adaptor

apps/webapp/app/components/code/InstallPackages.tsx

@@ -0,0 +1,44 @@
+import {
+  ClientTabs,
+  ClientTabsList,
+  ClientTabsTrigger,
+  ClientTabsContent,
+} from "../primitives/ClientTabs";
+import { ClipboardField } from "../primitives/ClipboardField";
+
+type InstallPackagesProps = {
+  packages: string[];
+};
+
+export function InstallPackages({ packages }: InstallPackagesProps) {
+  return (
+    <ClientTabs defaultValue="npm">
+      <ClientTabsList>
+        <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+        <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+        <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+      </ClientTabsList>
+      <ClientTabsContent value={"npm"}>
+        <ClipboardField
+          variant="primary/medium"
+          className="mb-4"
+          value={`npm install ${packages.join(" ")}`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"pnpm"}>
+        <ClipboardField
+          variant="primary/medium"
+          className="mb-4"
+          value={`pnpm install ${packages.join(" ")}`}
+        />
+      </ClientTabsContent>
+      <ClientTabsContent value={"yarn"}>
+        <ClipboardField
+          variant="primary/medium"
+          className="mb-4"
+          value={`yarn add ${packages.join(" ")}`}
+        />
+      </ClientTabsContent>
+    </ClientTabs>
+  );
+}

apps/webapp/app/components/code/codeMirrorSetup.ts

@@ -28,7 +28,6 @@ export function getEditorSetup(showLineNumbers = true, showHighlights = true): A
         {
           key: "Mod-Enter",
           run: () => {
-            console.log("Mod-Enter");
             return true;
           },
           preventDefault: false,

apps/webapp/app/components/frameworks/FrameworkSelector.tsx

@@ -72,7 +72,7 @@ export function FrameworkSelector() {
           <FrameworkLink to={projectSetupFastifyPath(organization, project)}>
             <FastifyLogo className="w-36" />
           </FrameworkLink>
-          <FrameworkLink to={projectSetupNestjsPath(organization, project)}>
+          <FrameworkLink to={projectSetupNestjsPath(organization, project)} supported>
             <NestjsLogo className="w-36" />
           </FrameworkLink>
         </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx

@@ -1,21 +1,220 @@
-import { NestjsLogo } from "~/assets/logos/NestjsLogo";
-import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
+import { ChatBubbleLeftRightIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
+import invariant from "tiny-invariant";
+import { Feedback } from "~/components/Feedback";
+import { PageGradient } from "~/components/PageGradient";
+import { StepContentContainer } from "~/components/StepContentContainer";
+import { InlineCode } from "~/components/code/InlineCode";
+import { InstallPackages } from "~/components/code/InstallPackages";
 import { BreadcrumbLink } from "~/components/navigation/NavBar";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Header1 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { StepNumber } from "~/components/primitives/StepNumber";
+import { useAppOrigin } from "~/hooks/useAppOrigin";
+import { useDevEnvironment } from "~/hooks/useEnvironments";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
 import { Handle } from "~/utils/handle";
-import { trimTrailingSlash } from "~/utils/pathBuilder";
+import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { CodeBlock } from "../../components/code/CodeBlock";
+import { TriggerDevStep } from "~/components/SetupCommands";
 
 export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Nest.js" />,
+  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="NestJS" />,
 };
 
-export default function Page() {
+const AppModuleCode = `
+import { Module } from '@nestjs/common';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { TriggerDevModule } from '@trigger.dev/nestjs';
+
+@Module({
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+    }),
+    TriggerDevModule.registerAsync({
+      inject: [ConfigService],
+      useFactory: (config: ConfigService) => ({
+        id: 'my-nest-app',
+        apiKey: config.getOrThrow('TRIGGER_API_KEY'),
+        apiUrl: config.getOrThrow('TRIGGER_API_URL'),
+        verbose: false,
+        ioLogLocalEnabled: true,
+      }),
+    }),
+  ],
+})
+export class AppModule {}
+`;
+
+const JobControllerCode = `
+import { Controller, Get } from '@nestjs/common';
+import { InjectTriggerDevClient } from '@trigger.dev/nestjs';
+import { eventTrigger, TriggerClient } from '@trigger.dev/sdk';
+
+@Controller()
+export class JobController {
+  constructor(
+    @InjectTriggerDevClient() private readonly client: TriggerClient,
+  ) {
+    this.client.defineJob({
+      id: 'test-job',
+      name: 'Test Job One',
+      version: '0.0.1',
+      trigger: eventTrigger({
+        name: 'test.event',
+      }),
+      run: async (payload, io, ctx) => {
+        await io.logger.info('Hello world!', { payload });
+
+        return {
+          message: 'Hello world!',
+        };
+      },
+    });
+  }
+
+  @Get()
+  getHello(): string {
+    return \`Running Trigger.dev with client-id \${this.client.id}\`;
+  }
+}`;
+
+const AppModuleWithControllerCode = `
+import { Module } from '@nestjs/common';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { TriggerDevModule } from '@trigger.dev/nestjs';
+import { JobController } from './job.controller';
+
+@Module({
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+    }),
+    TriggerDevModule.registerAsync({
+      inject: [ConfigService],
+      useFactory: (config: ConfigService) => ({
+        id: 'my-nest-app',
+        apiKey: config.getOrThrow('TRIGGER_API_KEY'),
+        apiUrl: config.getOrThrow('TRIGGER_API_URL'),
+        verbose: false,
+        ioLogLocalEnabled: true,
+      }),
+    }),
+  ],
+  controllers: [
+    //...existingControllers,
+    JobController
+  ],
+})
+export class AppModule {}
+`;
+
+const packageJsonCode = `"trigger.dev": {
+  "endpointId": "my-nest-app"
+}`;
+
+export default function SetupNestJS() {
+  const organization = useOrganization();
+  const project = useProject();
+  useProjectSetupComplete();
+  const devEnvironment = useDevEnvironment();
+  const appOrigin = useAppOrigin();
+
+  invariant(devEnvironment, "devEnvironment is required");
+
   return (
-    <FrameworkComingSoon
-      frameworkName="Nest.js"
-      githubIssueUrl="https://github.com/triggerdotdev/trigger.dev/issues/449"
-      githubIssueNumber={449}
-    >
-      <NestjsLogo className="w-56" />
-    </FrameworkComingSoon>
+    <PageGradient>
+      <div className="mx-auto max-w-3xl">
+        <div className="flex items-center justify-between">
+          <Header1 spacing className="text-bright">
+            Get setup in 2 minutes
+          </Header1>
+          <div className="flex items-center gap-2">
+            <LinkButton
+              to={projectSetupPath(organization, project)}
+              variant="tertiary/small"
+              LeadingIcon={Squares2X2Icon}
+            >
+              Choose a different framework
+            </LinkButton>
+            <Feedback
+              button={
+                <Button variant="tertiary/small" LeadingIcon={ChatBubbleLeftRightIcon}>
+                  I'm stuck!
+                </Button>
+              }
+              defaultValue="help"
+            />
+          </div>
+        </div>
+        <>
+          <StepNumber stepNumber="1" title="Add the dependencies" />
+          <StepContentContainer>
+            <InstallPackages
+              packages={["@trigger.dev/sdk", "@trigger.dev/nestjs", "@nestjs/config"]}
+            />
+          </StepContentContainer>
+          <StepNumber stepNumber="2" title="Add the environment variables" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Inside your <InlineCode>.env</InlineCode> file, create the following env variables:
+            </Paragraph>
+            <CodeBlock
+              fileName=".env"
+              showChrome
+              code={`TRIGGER_API_KEY=${devEnvironment.apiKey}\nTRIGGER_API_URL=${appOrigin}`}
+            />
+          </StepContentContainer>
+          <StepNumber stepNumber="3" title="Add the TriggerDevModule" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Now, go to your <InlineCode>app.module.ts</InlineCode> and add the{" "}
+              <InlineCode>TriggerDevModule</InlineCode>:
+            </Paragraph>
+            <CodeBlock fileName="app.module.ts" showChrome code={AppModuleCode} />
+          </StepContentContainer>
+          <StepNumber stepNumber="4" title="Add the first job" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Create a <InlineCode>controller</InlineCode> called{" "}
+              <InlineCode>job.controller.ts</InlineCode> and add the following code:
+            </Paragraph>
+            <CodeBlock fileName="src/job.controller.ts" showChrome code={JobControllerCode} />
+          </StepContentContainer>
+          <StepNumber stepNumber="5" title="Update your app.module.ts" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Now, add the new <InlineCode>controller</InlineCode> to your{" "}
+              <InlineCode>app.module.ts</InlineCode>:
+            </Paragraph>
+            <CodeBlock fileName="app.module.ts" showChrome code={AppModuleWithControllerCode} />
+          </StepContentContainer>
+          <StepNumber stepNumber="6" title="Update your package.json" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Now, add this to the top-level of your <InlineCode>package.json</InlineCode>:
+            </Paragraph>
+            <CodeBlock fileName="package.json" showChrome code={packageJsonCode} />
+          </StepContentContainer>
+          <StepNumber stepNumber="7" title="Run your app" />
+          <StepContentContainer className="flex flex-col gap-2">
+            <Paragraph>
+              Finally, run your project with <InlineCode>npm run start</InlineCode>:
+            </Paragraph>
+          </StepContentContainer>
+          <StepNumber stepNumber="8" title="Run the CLI 'dev' command" />
+          <StepContentContainer>
+            <TriggerDevStep />
+          </StepContentContainer>
+          <StepNumber stepNumber="9" title="Wait for Jobs" displaySpinner />
+          <StepContentContainer>
+            <Paragraph>This page will automatically refresh.</Paragraph>
+          </StepContentContainer>
+        </>
+      </div>
+    </PageGradient>
   );
 }

docs/_snippets/frameworks/card-astro.mdx

@@ -0,0 +1,64 @@
+<Card
+  icon={
+    <svg
+      width="150"
+      height="49"
+      viewBox="-38 0 226 49"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_5336_22429)">
+        <mask id="mask0_5336_22429" maskUnits="userSpaceOnUse" x="0" y="0" width="184" height="49">
+          <path d="M184 0H0V48.4533H184V0Z" fill="white" />
+        </mask>
+        <g mask="url(#mask0_5336_22429)">
+          <path
+            d="M12.4424 40.9986C10.2625 39.0108 9.62608 34.8341 10.5343 31.8083C12.1092 33.716 14.2912 34.3203 16.5514 34.6615C20.0406 35.1879 23.4674 34.991 26.7087 33.4002C27.0795 33.218 27.4221 32.9759 27.8273 32.7306C28.1315 33.6107 28.2106 34.4993 28.1044 35.4037C27.8461 37.6063 26.7472 39.3077 24.9995 40.5974C24.3006 41.1133 23.5611 41.5744 22.8393 42.0609C20.6218 43.5559 20.0219 45.3089 20.8551 47.8589C20.8749 47.921 20.8926 47.9831 20.9374 48.1347C19.8053 47.6293 18.9783 46.8934 18.3481 45.9258C17.6825 44.9046 17.3659 43.7749 17.3492 42.5525C17.3409 41.9577 17.3409 41.3576 17.2607 40.7711C17.0649 39.3413 16.3921 38.7013 15.1245 38.6644C13.8236 38.6265 12.7945 39.4287 12.5216 40.6921C12.5008 40.789 12.4706 40.8849 12.4404 40.9975L12.4424 40.9986Z"
+            fill="url(#paint0_linear_5336_22429)"
+          />
+          <path
+            d="M0 31.3041C0 31.3041 6.45527 28.1673 12.9286 28.1673L17.8093 13.1001C17.992 12.3714 18.5256 11.8762 19.1278 11.8762C19.7302 11.8762 20.2637 12.3714 20.4464 13.1001L25.3271 28.1673C32.9938 28.1673 38.2557 31.3041 38.2557 31.3041C38.2557 31.3041 27.2909 1.50808 27.2694 1.44829C26.9547 0.567361 26.4234 0 25.7072 0H12.5496C11.8333 0 11.3235 0.567361 10.9874 1.44829C10.9637 1.50695 0 31.3041 0 31.3041Z"
+            fill="white"
+          />
+          <path
+            d="M68.0598 26.9653C68.0598 29.6056 64.7674 31.1825 60.2089 31.1825C57.2422 31.1825 56.1929 30.4491 56.1929 28.9089C56.1929 27.2954 57.4954 26.5253 60.4622 26.5253C63.1396 26.5253 65.4188 26.5619 68.0598 26.892V26.9653ZM68.096 23.7016C66.4682 23.3349 64.0081 23.1149 61.0773 23.1149C52.5388 23.1149 48.5228 25.1318 48.5228 29.8257C48.5228 34.7029 51.2725 36.5731 57.6402 36.5731C63.031 36.5731 66.6853 35.2163 68.0236 31.8792H68.2407C68.2045 32.6859 68.1683 33.4927 68.1683 34.1161C68.1683 35.8396 68.4578 35.9864 69.8691 35.9864H76.5262C76.1644 34.9596 75.9472 32.0626 75.9472 29.5689C75.9472 26.892 76.0558 24.8751 76.0558 22.1615C76.0558 16.6241 72.7272 13.1037 62.3073 13.1037C57.821 13.1037 52.8282 13.8738 49.0293 15.0106C49.3911 16.5141 49.8977 19.5578 50.1509 21.538C53.4433 19.9979 58.1105 19.3378 61.7283 19.3378C66.7215 19.3378 68.096 20.4745 68.096 22.7848V23.7016Z"
+            fill="white"
+          />
+          <path
+            d="M86.3622 28.5055C85.4576 28.6155 84.2278 28.6155 82.9613 28.6155C81.6224 28.6155 80.3927 28.5788 79.5604 28.4688C79.5604 28.7622 79.5242 29.0922 79.5242 29.3856C79.5242 33.9695 82.5271 36.6464 93.0917 36.6464C103.041 36.6464 106.261 34.0062 106.261 29.3489C106.261 24.9484 104.127 22.7848 94.6833 22.3081C87.3393 21.9781 86.6879 21.1713 86.6879 20.2545C86.6879 19.1911 87.6288 18.641 92.5489 18.641C97.6506 18.641 99.0251 19.3378 99.0251 20.8046V21.1346C99.7489 21.098 101.052 21.0613 102.39 21.0613C103.656 21.0613 105.031 21.098 105.827 21.1713C105.827 20.8413 105.863 20.5479 105.863 20.2912C105.863 14.9006 101.377 13.1404 92.6937 13.1404C82.9251 13.1404 79.6327 15.524 79.6327 20.1812C79.6327 24.3617 82.2738 26.9653 91.6443 27.3687C98.5547 27.5887 99.3146 28.3588 99.3146 29.4223C99.3146 30.559 98.1928 31.0725 93.345 31.0725C87.7735 31.0725 86.3622 30.3024 86.3622 28.7255V28.5055Z"
+            fill="white"
+          />
+          <path
+            d="M118.203 9.17995C115.562 11.6369 110.822 14.0939 108.181 14.7539C108.217 16.1107 108.217 18.6044 108.217 19.9612L110.641 19.9979C110.605 22.6015 110.569 25.7552 110.569 27.8454C110.569 32.7226 113.137 36.3897 121.133 36.3897C124.498 36.3897 126.741 36.023 129.527 35.4363C129.237 33.6394 128.912 30.8891 128.804 28.7988C127.139 29.3489 125.041 29.6423 122.725 29.6423C119.505 29.6423 118.203 28.7622 118.203 26.2319C118.203 24.0316 118.203 21.9781 118.239 20.0712C122.364 20.1078 126.488 20.1812 128.912 20.2545C128.876 18.3477 128.948 15.5973 129.057 13.7638C125.547 13.8371 121.604 13.8738 118.348 13.8738C118.384 12.2603 118.42 10.7201 118.456 9.17995H118.203Z"
+            fill="white"
+          />
+          <path
+            d="M139.812 18.861C139.848 16.9541 139.884 15.3406 139.92 13.7638H132.648C132.757 16.9175 132.757 20.1445 132.757 24.8751C132.757 29.6056 132.72 32.8693 132.648 35.9864H140.969C140.824 33.7861 140.788 30.0823 140.788 26.9286C140.788 21.9414 142.815 20.5112 147.409 20.5112C149.544 20.5112 151.063 20.768 152.402 21.2446C152.438 19.3745 152.8 15.744 153.017 14.1305C151.642 13.7271 150.123 13.4705 148.278 13.4705C144.334 13.4338 141.44 15.0473 140.101 18.8977L139.812 18.861Z"
+            fill="white"
+          />
+          <path
+            d="M176.038 24.7284C176.038 28.7255 173.143 30.5957 168.584 30.5957C164.062 30.5957 161.167 28.8355 161.167 24.7284C161.167 20.6213 164.098 19.0811 168.584 19.0811C173.107 19.0811 176.038 20.7313 176.038 24.7284ZM183.599 24.5451C183.599 16.5875 177.376 13.0304 168.584 13.0304C159.757 13.0304 153.75 16.5875 153.75 24.5451C153.75 32.4659 159.359 36.7198 168.548 36.7198C177.81 36.7198 183.599 32.4659 183.599 24.5451Z"
+            fill="white"
+          />
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_5336_22429"
+          x1="10.1338"
+          y1="48.1347"
+          x2="31.1641"
+          y2="38.1736"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D83333" />
+          <stop offset="1" stopColor="#F041FF" />
+        </linearGradient>
+        <clipPath id="clip0_5336_22429">
+          <rect width="184" height="48.4533" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  }
+  href="/documentation/quickstarts/astro"
+/>