chore(webapp): migrate from Remix compiler to Vite (#4188)

Replaces Remix compiler with the Vite plugin. The Express server
(cluster, socket.io, ws) and the Docker image contract are unchanged.

Author: kathiekiwi

.changeset/vite-ignore-optional-imports.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Suppress a build-time warning that could appear in Vite-based projects when the optional `@ai-sdk/otel` package is not installed.

apps/webapp/app/components/StaleAssetRecovery.tsx

@@ -1,7 +1,7 @@
-// Recovers from a rolling deploy rotating the content-hashed /build assets out from
+// Recovers from a rolling deploy rotating the content-hashed /assets files out from
 // under a page. Each image serves only its own build and hard-404s unknown hashes, so
 // a client can request a hash the serving replica doesn't have and get missing styles
-// or a failed asset load. On such a /build load failure we do a bounded full document
+// or a failed asset load. On such an asset load failure we do a bounded full document
 // reload: the fresh document (and, under sticky routing, all of its assets) lands on a
 // single live build, so the asset resolves. Bounded via sessionStorage so it can never
 // loop; when the budget is spent it stops rather than reloading forever.
@@ -39,7 +39,7 @@ export function staleAssetRecoveryScript() {
   }
 
   function recover() {
-    // One recovery per page: a broken load fails several /build assets at once and each
+    // One recovery per page: a broken load fails several hashed assets at once and each
     // fires its own error event before location.reload() commits — without this guard a
     // single incident would burn the entire reload budget.
     if (recovering) return;
@@ -62,7 +62,9 @@ export function staleAssetRecoveryScript() {
           : el.tagName === "SCRIPT"
             ? (el as HTMLScriptElement).src
             : null;
-      if (url && url.indexOf("/build/") !== -1) recover();
+      // Match the pathname, not the full URL — a query string or third-party
+      // URL containing /assets/ must not burn the reload budget.
+      if (url && new URL(url, location.href).pathname.indexOf("/assets/") !== -1) recover();
     },
     true
   );

apps/webapp/app/components/primitives/Avatar.tsx

@@ -10,7 +10,6 @@ import {
 } from "@heroicons/react/20/solid";
 import type { Prisma } from "@trigger.dev/database";
 import { z } from "zod";
-import { logger } from "~/services/logger.server";
 import { cn } from "~/utils/cn";
 
 export const AvatarType = z.enum(["icon", "letters", "image"]);
@@ -45,7 +44,7 @@ export function parseAvatar(json: Prisma.JsonValue, defaultAvatar: Avatar): Avat
   const parsed = AvatarData.safeParse(json);
 
   if (!parsed.success) {
-    logger.error("Invalid org avatar", { json, error: parsed.error });
+    console.error("Invalid org avatar", { json, error: parsed.error });
     return defaultAvatar;
   }
 

apps/webapp/app/presenters/v3/UsagePresenter.server.ts

@@ -1,5 +1,8 @@
 import type { DataPoint } from "regression";
-import { linear } from "regression";
+// Default-import: regression is CJS and its named exports aren't statically
+// analyzable under ESM interop.
+import regression from "regression";
+const { linear } = regression;
 import type { PrismaClientOrTransaction } from "~/db.server";
 import { env } from "~/env.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";

apps/webapp/app/root.tsx

@@ -1,11 +1,14 @@
 import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExternalScripts } from "remix-utils/external-scripts";
 import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
-import tailwindStylesheetUrl from "~/tailwind.css";
+// Fonts imported here so Vite rebases the urls and emits the woff2 assets
+import "non.geist";
+import "non.geist/mono";
+import tailwindStylesheetUrl from "~/tailwind.css?url";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
 import { StaleAssetRecovery } from "./components/StaleAssetRecovery";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
@@ -145,7 +148,6 @@ export default function App() {
           <ScrollRestoration />
           <ExternalScripts />
           <Scripts />
-          <LiveReload />
         </body>
       </html>
     </>

apps/webapp/app/routes/api.v1.errors.$errorId.ignore.ts

@@ -9,7 +9,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: IgnoreErrorRequestBody,
@@ -56,3 +56,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.errors.$errorId.resolve.ts

@@ -9,7 +9,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: ResolveErrorRequestBody,
@@ -48,3 +48,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.errors.$errorId.unresolve.ts

@@ -8,7 +8,7 @@ const ParamsSchema = z.object({
   errorId: z.string(),
 });
 
-export const { action, loader } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     method: "POST",
@@ -40,3 +40,6 @@ export const { action, loader } = createActionApiRoute(
     return json(updated);
   }
 );
+
+export const action = route.action;
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.idempotencyKeys.$key.reset.ts

@@ -13,7 +13,7 @@ const BodySchema = z.object({
   taskIdentifier: z.string().min(1, "Task identifier is required"),
 });
 
-export const { action } = createActionApiRoute(
+const route = createActionApiRoute(
   {
     params: ParamsSchema,
     body: BodySchema,
@@ -50,3 +50,7 @@ export const { action } = createActionApiRoute(
     }
   }
 );
+
+export const action = route.action;
+// The builder's loader handles CORS OPTIONS preflight
+export const loader = route.loader;

apps/webapp/app/routes/api.v1.orgs.$orgParam.projects.ts

@@ -10,7 +10,8 @@ import {
   createLoaderPATApiRoute,
 } from "~/services/routeBuilders/apiBuilder.server";
 import { ServiceValidationError } from "~/v3/services/common.server";
-import { isCuid } from "cuid";
+import cuid from "cuid";
+const { isCuid } = cuid;
 
 const ParamsSchema = z.object({
   orgParam: z.string(),