migrate to vite

.dockerignore

@@ -9,10 +9,8 @@ Dockerfile
 node_modules
 /.cache
 /build
-/public/build
 .env
-/public/generated
 /local
 *.local.*
 *.db
-coverage
+coverage

.eslintignore

@@ -1,9 +1,7 @@
 node_modules
 
 build
-public/build
-public/generated
 
 # Intentional ignore
 *.ignored/
-*.ignored.*
+*.ignored.*

.gitignore

@@ -5,14 +5,11 @@ node_modules
 
 /.cache
 /build
-/public/build
 .env
 
-/public/generated
-
 /local
 *.local.*
 
 *.db
 
-coverage
+coverage

.prettierignore

@@ -1,13 +1,10 @@
 node_modules
 
 /build
-/public/build
-/public/generated
-/server-build
 .env
 
 pnpm-lock.yaml
 
 coverage
 
-drizzle/meta
+drizzle/meta

app/root.tsx

@@ -1,5 +1,4 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
-import appStylesheet from "#app/styles/app.css";
+import appStylesheet from "#app/styles/app.css?url";
 import { json } from "@remix-run/node";
 import type {
   MetaFunction,
@@ -8,7 +7,6 @@ import type {
 } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -33,7 +31,6 @@ import { csrf } from "./utils/csrf.server.ts";
 import { AuthenticityTokenProvider } from "remix-utils/csrf/react";
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
   { rel: "stylesheet", href: appStylesheet },
   { rel: "manifest", href: "/site.webmanifest" },
   ...faviconLinks,
@@ -126,13 +123,12 @@ function Document({
         />
         <Scripts nonce={nonce} />
         <ScrollRestoration nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
 }
 
-export function App() {
+function App() {
   const data = useLoaderData<typeof loader>();
   const nonce = useNonce();
   const env = data.env;

app/utils/blog.server.ts

@@ -11,10 +11,10 @@ import {
 import matter from "gray-matter";
 import { fileURLToPath } from "url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url); // build/server/index.js
+const __dirname = dirname(__filename); // build/server/
 
-const rootPath = resolve(__dirname, "../");
+const rootPath = resolve(__dirname, "../../");
 const contentDirPath = resolve(rootPath, "./content");
 const blogDirPath = resolve(contentDirPath, "./blog");
 

app/utils/compile-mdx.server.ts

@@ -10,11 +10,11 @@ import { cachified } from "cachified";
 import { lruCache } from "./cache.server.ts";
 import { fileURLToPath } from "url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = fileURLToPath(import.meta.url); // build/server/index.js
+const __dirname = dirname(__filename); // build/server/
 
-const root = resolve(__dirname, "../");
-const publicDir = resolve(root, "./public");
+const rootPath = resolve(__dirname, "../../");
+const assetsDirPath = resolve(rootPath, "./build/client/assets/");
 
 export interface BundleMdx {
   source: string;
@@ -50,8 +50,8 @@ export const compileMdx = async ({ source, files }: BundleMdx) => {
         ".jpeg": "file",
         ".gif": "file",
       };
-      options.outdir = resolve(publicDir, "./generated/assets");
-      options.publicPath = "/generated/assets";
+      options.outdir = resolve(assetsDirPath, "./blog/");
+      options.publicPath = "/assets/blog/";
       options.write = true;
 
       return options;

package.json

@@ -3,8 +3,8 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev --manual -c \"node server.js\"",
+    "dev": "node ./server.js",
+    "build": "remix vite:build",
     "start": "cross-env NODE_ENV=production node ./server.js",
     "typecheck": "tsc",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
@@ -103,6 +103,7 @@
     "tailwindcss-animate": "1.0.7",
     "tsx": "4.7.1",
     "typescript": "5.3.3",
+    "vite": "5.1.5",
     "vite-tsconfig-paths": "4.3.1",
     "vitest": "1.3.1"
   },