⚡️ vite (#419)

remix.env.d.ts → env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "7.4.1",
+    "version": "7.5.0",
     "description": "🏠 my home on the web",
     "type": "module",
     "keywords": [
@@ -32,10 +32,10 @@
         "url": "https://github.com/bradgarropy/bradgarropy.com"
     },
     "scripts": {
-        "start": "remix dev",
+        "start": "remix vite:dev",
         "prestart": "tsx src/scripts/copyTheme.ts",
-        "build": "remix build",
-        "prebuild": "tsx src/scripts/copyTheme.ts && tsx src/scripts/generateRobots.ts && tsx src/scripts/generateSitemap.ts && tsx src/scripts/generateFeeds.ts",
+        "build": "remix vite:build",
+        "postbuild": "tsx src/scripts/copyTheme.ts && tsx src/scripts/generateRobots.ts && tsx src/scripts/generateSitemap.ts && tsx src/scripts/generateFeeds.ts",
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
         "format": "prettier --check .",
@@ -52,12 +52,13 @@
         "@bradgarropy/http": "^2.0.0",
         "@bradgarropy/rehype-image-links": "^1.1.0",
         "@isaacs/ttlcache": "^1.4.1",
-        "@octokit/graphql": "^7.0.2",
+        "@octokit/graphql": "^8.0.1",
         "@remark-embedder/core": "^3.0.1",
         "@remix-run/node": "^2.5.1",
         "@remix-run/react": "^2.5.1",
+        "@vercel/remix": "^2.8.0",
         "classnames": "^2.3.1",
-        "date-fns": "^2.27.0",
+        "date-fns": "^3.3.1",
         "feed": "^4.2.2",
         "fuse.js": "^7.0.0",
         "gray-matter": "^4.0.3",
@@ -107,9 +108,9 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "eslint-plugin-simple-import-sort": "^12.0.0",
         "jest": "^29.7.0",
-        "jsdom": "^23.0.1",
+        "jsdom": "^24.0.0",
         "plop": "^4.0.1",
         "plop-helper-bradgarropy": "^1.0.0",
         "plop-helper-date": "^1.0.0",
@@ -120,6 +121,7 @@
         "tailwindcss": "^3.3.0",
         "tsx": "^4.6.0",
         "typescript": "^5.0.2",
+        "vite": "^5.1.4",
         "vite-tsconfig-paths": "^4.2.1",
         "vitest": "^1.0.2"
     },

postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+    plugins: {
+        tailwindcss: {},
+    },
+}
+
+export default config

src/root.tsx

@@ -3,7 +3,6 @@ import {json} from "@remix-run/node"
 import type {MetaFunction} from "@remix-run/react"
 import {
     Links,
-    LiveReload,
     Meta,
     Outlet,
     Scripts,
@@ -15,7 +14,7 @@ import classnames from "classnames"
 import GoogleAnalytics from "~/components/GoogleAnalytics"
 import {AppProvider} from "~/context/App"
 import {ThemeProvider} from "~/context/Theme"
-import styles from "~/styles/tailwind.css"
+import styles from "~/styles/tailwind.css?url"
 import {createImageUrl} from "~/utils/cloudinary"
 import {getMeta} from "~/utils/meta"
 import {getTheme} from "~/utils/session.server"
@@ -90,7 +89,6 @@ const App = () => {
 
                 <ScrollRestoration />
                 <Scripts />
-                <LiveReload />
             </body>
         </html>
     )

src/scripts/copyTheme.ts

@@ -1,8 +1,8 @@
 import {copyFileSync, mkdirSync} from "node:fs"
 
-mkdirSync("build/shiki/themes", {recursive: true})
+mkdirSync("build/client/shiki/themes", {recursive: true})
 
 copyFileSync(
     "node_modules/shades-of-purple/themes/shades-of-purple-color-theme.json",
-    "build/shiki/themes/shades-of-purple.json",
+    "build/client/shiki/themes/shades-of-purple.json",
 )

src/utils/markdown.server.ts

@@ -42,7 +42,7 @@ const getMarkdownBySlug = async (slug: string): Promise<Markdown> => {
 const transformMarkdown = async (markdown: string): Promise<string> => {
     const themePath = path.join(
         process.cwd(),
-        "build/shiki/themes/shades-of-purple.json",
+        "build/client/shiki/themes/shades-of-purple.json",
     )
 
     const theme = fs.readFileSync(themePath, "utf8")

tsconfig.json

@@ -27,6 +27,6 @@
         "strict": true,
         "target": "ESNext"
     },
-    "include": ["remix.env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx"],
+    "include": ["env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx"],
     "exclude": ["node_modules"]
 }

vite.config.ts

@@ -0,0 +1,24 @@
+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: [
+        tsconfigPaths(),
+        remix({
+            appDirectory: "src",
+            ignoredRouteFiles: ["**/.*"],
+            future: {},
+            presets: [vercelPreset()],
+            serverModuleFormat: "esm",
+        }),
+    ],
+    server: {
+        open: true,
+        port: 3000,
+    },
+})