chore: make vite work

docs/app/root.tsx

@@ -1,24 +1,23 @@
-import type { MetaFunction, LinksFunction } from "@remix-run/node";
+import type { MetaFunction, LinksFunction } from '@vercel/remix'
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
-import { Analytics } from "@vercel/analytics/react";
-import styles from "./styles.css";
+} from '@remix-run/react'
+import { Analytics } from '@vercel/analytics/react'
+import styles from './styles.css'
 
 export const meta: MetaFunction = () => [
   {
-    charset: "utf-8",
-    title: "Blog | Kitchen Sink",
-    viewport: "width=device-width,initial-scale=1",
+    charset: 'utf-8',
+    title: 'Blog | Kitchen Sink',
+    viewport: 'width=device-width,initial-scale=1',
   },
-];
+]
 
-export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
+export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }]
 
 export default function App(): JSX.Element {
   return (
@@ -31,9 +30,8 @@ export default function App(): JSX.Element {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
         <Analytics />
       </body>
     </html>
-  );
+  )
 }

docs/package.json

@@ -6,26 +6,30 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "dev": "remix dev",
-    "build": "remix build",
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
     "lint": "TIMING=1 eslint \"app/**/*.ts*\" \"scripts/**/*.ts*\"",
+    "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@remix-run/node": "^2.8.0",
-    "@remix-run/react": "^2.8.0",
-    "@remix-run/serve": "^2.8.0",
-    "@remix-run/server-runtime": "^2.8.0",
+    "@remix-run/node": "^2.9.2",
+    "@remix-run/react": "^2.9.2",
+    "@remix-run/serve": "^2.9.2",
+    "@remix-run/server-runtime": "^2.9.2",
     "@vercel/analytics": "^1.2.2",
     "@vercel/remix-entry-server": "^0.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.8.0",
+    "@remix-run/dev": "^2.9.2",
     "@types/react": "^18.2.62",
     "@types/react-dom": "^18.2.19",
-    "typescript": "^5.3.3"
+    "@vercel/remix": "^2.9.2-patch.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
     "node": ">=18"

docs/vite.config.ts

@@ -0,0 +1,18 @@
+import { vitePlugin as remix } from '@remix-run/dev'
+import { installGlobals } from '@remix-run/node'
+import { vercelPreset } from '@vercel/remix/vite'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+installGlobals()
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ignoredRouteFiles: ['**/.*'],
+      presets: [vercelPreset()],
+      serverModuleFormat: 'cjs',
+    }),
+    tsconfigPaths(),
+  ],
+})