Changes for Vite (still broken)

apps/web/app/components/assets/Bottle.tsx

@@ -1,15 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
-const SvgBottle = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlSpace="preserve"
-    fill="currentColor"
-    viewBox="0 0 512 512"
-    {...props}
-  >
-    <path d="M191.215 151.743V88.816h21.943v-49.11H97.174v49.11h21.943v62.927c-37.727 14.75-62.691 51.005-62.691 91.947V512h197.479V243.69c-.001-40.943-24.963-77.197-62.69-91.947m-78.369-78.6V55.38h84.637v17.763zm125.385 296.751H149.94v15.673h88.291v18.808h-53.809v15.673h53.809v76.278H72.1V243.69c0-36.066 23.021-67.807 57.284-78.983l5.406-1.764V88.816h40.751v74.127l5.406 1.764c34.263 11.176 57.283 42.917 57.283 78.983zM119.116 0v25.078h15.674v-9.405h40.751v9.405h15.674V0z" />
-    <path d="M222.563 261.224v-15.673H117.026v208.98h105.537v-15.674h-89.864V261.224zM289.435 311.016V512h166.139V311.016zM439.9 496.327H305.109v-13.991H439.9zm0-109.814v80.149H305.109v-80.149zm0-15.673H305.109v-44.15H439.9z" />
-    <path d="M321.818 394.083h11.878v11.878h-11.878zM419.223 395.672h11.878v11.878h-11.878zM370.127 405.48l8.399-8.399 8.399 8.399-8.4 8.399zM409.547 442.074l8.398-8.399 8.4 8.4-8.4 8.398zM313.9 452.995l8.398-8.398 8.4 8.398-8.4 8.4zM334.492 421.804h11.878v11.878h-11.878zM380.426 446.349h11.878v11.878h-11.878z" />
-  </svg>
-);
-export default SvgBottle;
+const SvgBottle = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" fill="currentColor" viewBox="0 0 512 512" {...props}><path d="M191.215 151.743V88.816h21.943v-49.11H97.174v49.11h21.943v62.927c-37.727 14.75-62.691 51.005-62.691 91.947V512h197.479V243.69c-.001-40.943-24.963-77.197-62.69-91.947m-78.369-78.6V55.38h84.637v17.763zm125.385 296.751H149.94v15.673h88.291v18.808h-53.809v15.673h53.809v76.278H72.1V243.69c0-36.066 23.021-67.807 57.284-78.983l5.406-1.764V88.816h40.751v74.127l5.406 1.764c34.263 11.176 57.283 42.917 57.283 78.983zM119.116 0v25.078h15.674v-9.405h40.751v9.405h15.674V0z" /><path d="M222.563 261.224v-15.673H117.026v208.98h105.537v-15.674h-89.864V261.224zM289.435 311.016V512h166.139V311.016zM439.9 496.327H305.109v-13.991H439.9zm0-109.814v80.149H305.109v-80.149zm0-15.673H305.109v-44.15H439.9z" /><path d="M321.818 394.083h11.878v11.878h-11.878zM419.223 395.672h11.878v11.878h-11.878zM370.127 405.48l8.399-8.399 8.399 8.399-8.4 8.399zM409.547 442.074l8.398-8.399 8.4 8.4-8.4 8.398zM313.9 452.995l8.398-8.398 8.4 8.398-8.4 8.4zM334.492 421.804h11.878v11.878h-11.878zM380.426 446.349h11.878v11.878h-11.878z" /></svg>;
+export default SvgBottle;

apps/web/app/components/assets/Entity.tsx

@@ -1,14 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
-const SvgEntity = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={800}
-    height={800}
-    fill="currentColor"
-    viewBox="0 0 50 50"
-    {...props}
-  >
-    <path d="M8 2v4H4v42h42V14H30V6h-4V2Zm2 2h14v4h4v38h-9v-7h-4v7H6V8h4Zm0 6v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-12 5v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm8 1h14v30H30Zm2 2v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 3v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 1v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-8 4v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 1v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 3v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 3v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 1v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-8 4v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 1v5h2v-5Zm12 0v5h2v-5Zm10 3v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Z" />
-  </svg>
-);
-export default SvgEntity;
+const SvgEntity = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={800} height={800} fill="currentColor" viewBox="0 0 50 50" {...props}><path d="M8 2v4H4v42h42V14H30V6h-4V2Zm2 2h14v4h4v38h-9v-7h-4v7H6V8h4Zm0 6v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-12 5v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm8 1h14v30H30Zm2 2v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 3v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 1v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-8 4v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 1v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 3v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 3v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm4 0v4h2v-4Zm10 1v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-8 4v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Zm-30 1v5h2v-5Zm12 0v5h2v-5Zm10 3v2h2v-2Zm4 0v2h2v-2Zm4 0v2h2v-2Z" /></svg>;
+export default SvgEntity;

apps/web/app/root.tsx

@@ -38,7 +38,7 @@ import { logError } from "./lib/log";
 import { trpc } from "./lib/trpc";
 
 import "@fontsource/raleway/index.css";
-import "~/styles/index.css";
+import "@peated/web/styles/index.css";
 
 function initMobileControls() {
   if (typeof document === "undefined") return;

apps/web/remix.env.d.ts → apps/web/env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/express" />
+/// <reference types="@remix-run/node" />
 /// <reference types="vite/client" />
 
 import type { AppRouter } from "@peated/server/trpc/router";

apps/web/index.html

@@ -12,7 +12,7 @@
     <meta name="msapplication-TileColor" content="#fbbf24" />
     <meta name="theme-color" content="#fbbf24" />
     <meta name="description" content="Is it Peated?" />
-    <link rel="stylesheet" href="/src/styles/index.css" />
+    <link rel="stylesheet" href="/app/styles/index.css" />
     <title>Peated</title>
   </head>
   <body>

apps/web/package.json

@@ -1,20 +1,20 @@
 {
   "private": true,
   "name": "@peated/web",
+  "sideEffects": false,
+  "type": "module",
   "scripts": {
     "assets": "npx @svgr/cli --out-dir app/components/assets -- app/assets",
     "assets:watch": "npm-watch assets",
-    "build": "npm run build:remix && npm run build:server && npm run build:assets && npm run build:sitemap",
-    "build:remix": "cross-env NODE_ENV=production vite build --sourcemap && vite build --ssr --sourcemap && npm run sentry:upload-sourcemaps && find ./public/build -type f -name '*.map' -delete && find ./build -type f -name '*.map' -delete",
-    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle --sourcemap",
+    "build": "npm run build:remix && npm run build:assets && npm run build:sitemap",
+    "build:remix": "cross-env NODE_ENV=production remix vite:build && npm run sentry:upload-sourcemaps && find ./public/build -type f -name '*.map' -delete && find ./build -type f -name '*.map' -delete",
     "build:assets": "npm run assets",
     "build:sitemap": "remix-sitemap",
     "dev": "concurrently \"npm:dev:*\"",
-    "dev:remix": "cross-env NODE_ENV=development vite dev",
-    "dev:server": "cross-env NODE_ENV=development nodemon --exec 'esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle && node --require dotenv/config ./build/server.js' --watch ./server.ts",
+    "dev:remix": "pnpm run build:remix && cross-env NODE_ENV=development node ./build/server/index.js",
     "dev:assets": "npm run assets && npm run assets:watch",
     "sentry:upload-sourcemaps": "if test \"$NODE_ENV\" = \"production\"; then node ./node_modules/@sentry/remix/scripts/sentry-upload-sourcemaps.js --release $SENTRY_RELEASE; fi",
-    "start": "cross-env NODE_ENV=production node ./build/server.js",
+    "start": "cross-env NODE_ENV=production node ./build/server/index.js",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -27,8 +27,6 @@
     "@peated/server": "workspace:*",
     "@peated/tsconfig": "workspace:*",
     "@react-oauth/google": "^0.11.1",
-    "@remix-run/dev": "^2.7.2",
-    "@remix-run/eslint-config": "^2.7.2",
     "@remix-run/express": "^2.7.2",
     "@remix-run/node": "^2.7.2",
     "@remix-run/react": "^2.7.2",
@@ -93,11 +91,14 @@
     "typescript": "^5.3.3",
     "use-dehydrated-state": "^0.1.0",
     "usehooks-ts": "^2.9.1",
-    "vite": "^4.5.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@spotlightjs/spotlight": "^1.2.13"
+    "@remix-run/dev": "^2.7.2",
+    "@remix-run/eslint-config": "^2.7.2",
+    "@spotlightjs/spotlight": "^1.2.13",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "volta": {
     "extends": "../../package.json"
@@ -110,8 +111,5 @@
       "extensions": "svg",
       "quiet": false
     }
-  },
-  "devDependencies": {
-    "vite-tsconfig-paths": "^4.2.1"
   }
 }

apps/web/server.ts

@@ -9,7 +9,9 @@ import {
   getUser,
   logout,
 } from "@peated/web/services/session.server";
+
 import { createRequestHandler } from "@remix-run/express";
+import { installGlobals } from "@remix-run/node";
 import { type AppLoadContext } from "@remix-run/server-runtime";
 import * as Sentry from "@sentry/remix";
 import { wrapExpressCreateRequestHandler } from "@sentry/remix";
@@ -20,6 +22,8 @@ import express from "express";
 import morgan from "morgan";
 import path from "path";
 
+installGlobals();
+
 Sentry.init({
   dsn: config.SENTRY_DSN,
   release: config.VERSION,
@@ -34,6 +38,15 @@ Sentry.init({
 
 Sentry.setTag("service", "@peated/web");
 
+const viteDevServer =
+  process.env.NODE_ENV === "production"
+    ? undefined
+    : await import("vite").then((vite) =>
+        vite.createServer({
+          server: { middlewareMode: true },
+        })
+      );
+
 const app = express();
 const metricsApp = express();
 
@@ -83,10 +96,14 @@ app.use(compression());
 app.disable("x-powered-by");
 
 // Remix fingerprints its assets so we can cache forever.
-app.use(
-  "/build",
-  express.static("public/build", { immutable: true, maxAge: "1y" }),
-);
+if (viteDevServer) {
+  app.use(viteDevServer.middlewares);
+} else {
+  app.use(
+    "/build",
+    express.static("public/build", { immutable: true, maxAge: "1y" }),
+  );
+}
 
 // Everything else (like favicon.ico) is cached for an hour. You may want to be
 // more aggressive with this caching.
@@ -158,7 +175,12 @@ const createSentryRequestHandler =
 app.all(
   "*",
   MODE === "production"
-    ? createSentryRequestHandler({ build: require(BUILD_DIR), getLoadContext })
+    ? createSentryRequestHandler({
+      build: viteDevServer
+        ? () => viteDevServer.ssrLoadModule("virtual:remix/server-build")
+        : await import(BUILD_DIR),
+        getLoadContext,
+    })
     : (...args) => {
         purgeRequireCache();
         const requestHandler = createSentryRequestHandler({

apps/web/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@peated/tsconfig/tsconfig.json",
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "*.mts"],
   "compilerOptions": {
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
     "baseUrl": ".",

apps/web/vite.config.ts

@@ -1,19 +1,28 @@
-// module.exports = {
-//     ignoredRouteFiles: ["**/.*"],
-//     appDirectory: "app",
-//     assetsBuildDirectory: "public/build",
-//     serverBuildPath: "build/index.js",
-//     serverDependenciesToBundle: [/^@peated\/.*/],
-//     serverModuleFormat: "cjs",
-//     publicPath: "/build/",
-//     postcss: true,
-//     tailwind: true,
-//   };
-
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [remix(), tsconfigPaths()],
+  plugins: [
+    remix({
+      // ignoredRouteFiles: ["**/.*"],
+      // appDirectory: "app",
+      // assetsBuildDirectory: "public/build",
+      // serverBuildPath: "build/index.js",
+      // serverModuleFormat: "cjs",
+      // publicPath: "/build/",
+    }),
+    tsconfigPaths(),
+  ],
+  server: {
+    fs: {
+      // Restrict files that could be served by Vite's dev server.  Accessing
+      // files outside this directory list that aren't imported from an allowed
+      // file will result in a 403.  Both directories and files can be provided.
+      // If you're comfortable with Vite's dev server making any file within the
+      // project root available, you can remove this option.  See more:
+      // https://vitejs.dev/config/server-options.html#server-fs-allow
+      allow: ["app"],
+    },
+  },
 });