From 343a6ca275f3ce6e708fb93e94ccb26b459a1592 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:36:26 -0700
Subject: [PATCH 01/11] start vite server, need to figure out why tsx loops

---
 app/root.tsx    |   2 +-
 package.json    |  18 ++++----
 server.ts       | 111 ++++++++++++------------------------------------
 vite.config.mjs |  21 +++++++++
 4 files changed, 59 insertions(+), 93 deletions(-)
 create mode 100644 vite.config.mjs

diff --git a/app/root.tsx b/app/root.tsx
index 8a8de7c..629f525 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -8,7 +8,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import styles from "./tailwind.css";
+import styles from "./tailwind.css?url";
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
diff --git a/package.json b/package.json
index c34bc96..02dba99 100644
--- a/package.json
+++ b/package.json
@@ -7,15 +7,15 @@
     "build:remix": "remix build",
     "build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=./",
     "dev": "remix dev -c \"npm run dev:server\" --manual",
-    "dev:server": "tsx watch --clear-screen=false --ignore 'app/**' --ignore 'build/**' --ignore 'node_modules/**' --inspect ./server.ts",
+    "dev:server": "tsx --inspect ./server.ts",
     "start": "cross-env NODE_ENV=production node  server.js",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "*",
-    "@remix-run/express": "*",
-    "@remix-run/node": "*",
-    "@remix-run/react": "*",
+    "@remix-run/css-bundle": "2.2.0-pre.2",
+    "@remix-run/express": "2.2.0-pre.2",
+    "@remix-run/node": "2.2.0-pre.2",
+    "@remix-run/react": "2.2.0-pre.2",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
@@ -26,8 +26,8 @@
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "*",
+    "@remix-run/dev": "2.2.0-pre.2",
+    "@remix-run/eslint-config": "2.2.0-pre.2",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/morgan": "^1.9.4",
@@ -42,7 +42,9 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
     "tsx": "^3.14.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.5.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
     "node": ">=18"
diff --git a/server.ts b/server.ts
index 6dc49db..1d8d21d 100644
--- a/server.ts
+++ b/server.ts
@@ -1,113 +1,56 @@
-import * as fs from "node:fs";
 import express from "express";
 import compression from "compression";
 import morgan from "morgan";
 import { createRequestHandler, type RequestHandler } from "@remix-run/express";
 import { broadcastDevReady, installGlobals } from "@remix-run/node";
 import sourceMapSupport from "source-map-support";
+import {
+  unstable_createViteServer,
+  unstable_loadViteServerBuild,
+} from "@remix-run/dev";
 
 // patch in Remix runtime globals
 installGlobals();
 sourceMapSupport.install();
 
-/**
- * @typedef {import('@remix-run/node').ServerBuild} ServerBuild
- */
-const BUILD_PATH = "./build/index.js";
-const WATCH_PATH = "./build/version.txt";
-
-/**
- * Initial build
- * @type {ServerBuild}
- */
-let build = await import(BUILD_PATH);
-
-// We'll make chokidar a dev dependency so it doesn't get bundled in production.
-const chokidar =
-  process.env.NODE_ENV === "development" ? await import("chokidar") : null;
-
 const app = express();
 
+// handle asset requests
+let vite =
+  process.env.NODE_ENV === "production"
+    ? undefined
+    : await unstable_createViteServer();
+
+// handle asset requests
+if (vite) {
+  app.use(vite.middlewares);
+} else {
+  app.use(
+    "/build",
+    express.static("public/build", { immutable: true, maxAge: "1y" })
+  );
+}
+
 app.use(compression());
 
 // http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
 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" })
-);
-
 // Everything else (like favicon.ico) is cached for an hour. You may want to be
 // more aggressive with this caching.
 app.use(express.static("public", { maxAge: "1h" }));
 
 app.use(morgan("tiny"));
 
-// Check if the server is running in development mode and use the devBuild to reflect realtime changes in the codebase.
+// handle SSR requests
 app.all(
   "*",
-  process.env.NODE_ENV === "development"
-    ? createDevRequestHandler()
-    : createRequestHandler({
-        build,
-        mode: process.env.NODE_ENV,
-      })
+  createRequestHandler({
+    build: vite
+      ? () => unstable_loadViteServerBuild(vite)
+      : await import("./build/index.js"),
+  })
 );
 
 const port = process.env.PORT || 3000;
-
-app.listen(port, async () => {
-  console.log(`Express server listening on port ${port}`);
-
-  // send "ready" message to dev server
-  if (process.env.NODE_ENV === "development") {
-    await broadcastDevReady(build);
-  }
-});
-
-// Create a request handler that watches for changes to the server build during development.
-function createDevRequestHandler(): RequestHandler {
-  async function handleServerUpdate() {
-    // 1. re-import the server build
-    build = await reimportServer();
-
-    // Add debugger to assist in v2 dev debugging
-    if (build?.assets === undefined) {
-      console.log(build.assets);
-      debugger;
-    }
-
-    // 2. tell dev server that this app server is now up-to-date and ready
-    await broadcastDevReady(build);
-  }
-
-  chokidar
-    ?.watch(WATCH_PATH, { ignoreInitial: true })
-    .on("add", handleServerUpdate)
-    .on("change", handleServerUpdate);
-
-  // wrap request handler to make sure its recreated with the latest build for every request
-  return async (req, res, next) => {
-    try {
-      return createRequestHandler({
-        build,
-        mode: "development",
-      })(req, res, next);
-    } catch (error) {
-      next(error);
-    }
-  };
-}
-
-// ESM import cache busting
-/**
- * @type {() => Promise<ServerBuild>}
- */
-async function reimportServer() {
-  const stat = fs.statSync(BUILD_PATH);
-
-  // use a timestamp query parameter to bust the import cache
-  return import(BUILD_PATH + "?t=" + stat.mtimeMs);
-}
+console.log(`Express server listening on http://localhost:${port}`);
diff --git a/vite.config.mjs b/vite.config.mjs
new file mode 100644
index 0000000..3a9564e
--- /dev/null
+++ b/vite.config.mjs
@@ -0,0 +1,21 @@
+import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ["react", "react-dom/client"],
+  },
+  plugins: [
+    remix({
+      ignoredRouteFiles: ["**/.*"],
+      tailwind: true,
+      postcss: true,
+      // appDirectory: "app",
+      // assetsBuildDirectory: "public/build",
+      // publicPath: "/build/",
+      // serverBuildPath: "build/index.js",
+    }),
+    tsconfigPaths(),
+  ],
+});

From c8922cd07c009cef610c8fe84786d55955db41f7 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:46:19 -0700
Subject: [PATCH 02/11] fixes

---
 package.json |  5 +----
 server.ts    | 12 +++++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 02dba99..53fcad5 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
     "build": "run-p build:*",
     "build:remix": "remix build",
     "build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=./",
-    "dev": "remix dev -c \"npm run dev:server\" --manual",
-    "dev:server": "tsx --inspect ./server.ts",
+    "dev": "tsx --inspect ./server.ts",
     "start": "cross-env NODE_ENV=production node  server.js",
     "typecheck": "tsc"
   },
@@ -35,8 +34,6 @@
     "@types/react-dom": "^18.0.11",
     "@types/source-map-support": "^0.5.6",
     "autoprefixer": "^10.4.16",
-    "chokidar": "^3.5.3",
-    "esbuild": "^0.19.4",
     "eslint": "^8.38.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
diff --git a/server.ts b/server.ts
index 1d8d21d..8b3f661 100644
--- a/server.ts
+++ b/server.ts
@@ -1,13 +1,14 @@
 import express from "express";
 import compression from "compression";
 import morgan from "morgan";
-import { createRequestHandler, type RequestHandler } from "@remix-run/express";
-import { broadcastDevReady, installGlobals } from "@remix-run/node";
 import sourceMapSupport from "source-map-support";
+
 import {
   unstable_createViteServer,
   unstable_loadViteServerBuild,
 } from "@remix-run/dev";
+import { createRequestHandler } from "@remix-run/express";
+import { installGlobals } from "@remix-run/node";
 
 // patch in Remix runtime globals
 installGlobals();
@@ -21,7 +22,6 @@ let vite =
     ? undefined
     : await unstable_createViteServer();
 
-// handle asset requests
 if (vite) {
   app.use(vite.middlewares);
 } else {
@@ -52,5 +52,7 @@ app.all(
   })
 );
 
-const port = process.env.PORT || 3000;
-console.log(`Express server listening on http://localhost:${port}`);
+const port = 3000;
+app.listen(port, () =>
+  console.log("Express server listening on http://localhost:" + port)
+);

From 4edbbccbe178f0505c3994ac137fef3377abe033 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:58:03 -0700
Subject: [PATCH 03/11] Delete remix.config.js

---
 remix.config.js | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 remix.config.js

diff --git a/remix.config.js b/remix.config.js
deleted file mode 100644
index f116c82..0000000
--- a/remix.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-export default {
-  ignoredRouteFiles: ["**/.*"],
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
-  // publicPath: "/build/",
-  serverModuleFormat: "esm",
-  tailwind: true,
-  postcss: true,
-};

From f197b48f97c36f9a887a1f6dc688aa43ad16b37c Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 10:31:59 -0700
Subject: [PATCH 04/11] Update package.json

---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 53fcad5..f9570a9 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,10 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "2.2.0-pre.2",
-    "@remix-run/express": "2.2.0-pre.2",
-    "@remix-run/node": "2.2.0-pre.2",
-    "@remix-run/react": "2.2.0-pre.2",
+    "@remix-run/css-bundle": "^2.2.0",
+    "@remix-run/express": "^2.2.0",
+    "@remix-run/node": "^2.2.0",
+    "@remix-run/react": "^2.2.0",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.18.2",
@@ -25,8 +25,8 @@
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.2.0-pre.2",
-    "@remix-run/eslint-config": "2.2.0-pre.2",
+    "@remix-run/dev": "^2.2.0",
+    "@remix-run/eslint-config": "^2.2.0",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/morgan": "^1.9.4",

From 697d0c7e97a354a9c70e68229dbe9998d3b93704 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:49:20 -0700
Subject: [PATCH 05/11] use ts-node

---
 package.json  | 5 +++--
 tsconfig.json | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f9570a9..d67ed4c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "build": "run-p build:*",
     "build:remix": "remix build",
     "build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=./",
-    "dev": "tsx --inspect ./server.ts",
+    "dev": "node --loader ts-node/esm --watch-path ./server.ts --watch ./server.ts",
     "start": "cross-env NODE_ENV=production node  server.js",
     "typecheck": "tsc"
   },
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@remix-run/dev": "^2.2.0",
     "@remix-run/eslint-config": "^2.2.0",
+    "@swc/core": "1.3.82",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/morgan": "^1.9.4",
@@ -38,7 +39,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "tsx": "^3.14.0",
+    "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
     "vite": "^4.5.0",
     "vite-tsconfig-paths": "^4.2.1"
diff --git a/tsconfig.json b/tsconfig.json
index 80b321d..f9c7449 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,5 +22,8 @@
 
     // Remix takes care of building everything in `remix build`.
     "noEmit": true
+  },
+  "ts-node": {
+    "swc": true
   }
 }

From 484eb5342b37c480e92de2c4a017713bd5935991 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:50:20 -0700
Subject: [PATCH 06/11] add types

---
 remix.env.d.ts => env.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename remix.env.d.ts => env.d.ts (50%)

diff --git a/remix.env.d.ts b/env.d.ts
similarity index 50%
rename from remix.env.d.ts
rename to env.d.ts
index dcf8c45..78ed234 100644
--- a/remix.env.d.ts
+++ b/env.d.ts
@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
 /// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />

From f03298de32a8029490bde98b710e0095e8b77314 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:12:40 -0700
Subject: [PATCH 07/11] Update tsconfig.json

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index f9c7449..11afc05 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,

From e2663b24715007ec58ace72fefee6893c8f87e08 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:45:55 -0700
Subject: [PATCH 08/11] Update package.json

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d67ed4c..eae2348 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,10 @@
   "type": "module",
   "scripts": {
     "build": "run-p build:*",
-    "build:remix": "remix build",
+    "build:remix": "vite build && vite build --ssr",
     "build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=./",
     "dev": "node --loader ts-node/esm --watch-path ./server.ts --watch ./server.ts",
-    "start": "cross-env NODE_ENV=production node  server.js",
+    "start": "cross-env NODE_ENV=production node server.js",
     "typecheck": "tsc"
   },
   "dependencies": {

From e5d103cacfa22c242b69b7112b853ee54434abed Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:25:03 -0700
Subject: [PATCH 09/11] remove cssbundle

---
 app/root.tsx | 6 +-----
 package.json | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index 629f525..d97b642 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,4 +1,3 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
@@ -10,10 +9,7 @@ import {
 } from "@remix-run/react";
 import styles from "./tailwind.css?url";
 
-export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-  { rel: "stylesheet", href: styles },
-];
+export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
 export default function App() {
   return (
diff --git a/package.json b/package.json
index eae2348..298670b 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.2.0",
     "@remix-run/express": "^2.2.0",
     "@remix-run/node": "^2.2.0",
     "@remix-run/react": "^2.2.0",

From dbbb840113d7a664052d25c9cdb93da21b1bc998 Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:45:33 -0700
Subject: [PATCH 10/11] tailwind

---
 app/root.tsx      | 4 ++--
 postcss.config.js | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index d97b642..ec00294 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,9 +7,9 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-import styles from "./tailwind.css?url";
 
-export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
+//css should be imported as a side effect for vite
+import "./tailwind.css";
 
 export default function App() {
   return (
diff --git a/postcss.config.js b/postcss.config.js
index 7738160..2aa7205 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

From 28fbf09920ea7a3292a6d31640572973f14f013b Mon Sep 17 00:00:00 2001
From: xHomu <84349818+xHomu@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:58:28 -0700
Subject: [PATCH 11/11] Update root.tsx

---
 app/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/root.tsx b/app/root.tsx
index ec00294..c9dbd86 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -23,8 +23,8 @@ export default function App() {
       <body>
         <Outlet />
         <ScrollRestoration />
-        <Scripts />
         <LiveReload />
+        <Scripts />
       </body>
     </html>
   );