feat: render application at build time

Replace server-side rendering with build-time rendering for the entire
application.

- Eliminates the need for a server to be running
- Renders all components at build time, including those that require
  client-side hydration
- Simplifies the development process by automatically handling
  components that require client-side hydration

package.json

@@ -4,12 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "node server",
-    "build": "npm run build:client && npm run build:server",
-    "build:client": "vite build --outDir dist/client",
-    "build:server": "vite build --outDir dist/server --ssr src/entry-server.jsx",
-    "serve": "NODE_ENV=production node server",
-    "start": "vite preview",
+    "dev": "vite",
+    "build": "vite build",
+    "generate": "vite build --outDir dist/static && npm run build:server && node prerender",
+    "start": "vite build && vite preview",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
     "test": "vitest"
   },
@@ -43,6 +41,8 @@
     "postcss": "^8.4.38",
     "react-router-dom": "^6.24.1",
     "tailwindcss": "^3.4.3",
+    "vike": "^0.4.179",
+    "vike-react": "^0.4.17",
     "vite": "^5.2.12",
     "vite-plugin-ssr": "^0.4.142",
     "vite-plugin-style-import": "^2.0.0",

src/layouts/Head.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import iconUrl from '../../public/icon.svg'
+
+export default function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta
+        name="description"
+        content="Update your comma device to the latest software"
+      />
+      <link rel="icon" type="image/svg+xml" href={iconUrl} />
+      <script
+        defer
+        data-domain="flash.comma.ai"
+        src="https://plausible.io/js/script.outbound-links.js"
+      ></script>
+    </>
+  );
+}

src/layouts/Layout.jsx

@@ -0,0 +1,9 @@
+import '../index.css'
+
+import React from 'react'
+
+export default function Layout({ children }) {
+  return (
+    <React.StrictMode>{children}</React.StrictMode>
+  )
+}

src/pages/+config.js

@@ -0,0 +1,11 @@
+import vikeReact from 'vike-react/config'
+import Head from '../layouts/Head'
+import Layout from '../layouts/Layout'
+
+export default {
+  Head,
+  Layout,
+  title: "flash.comma.ai",
+  extends: vikeReact,
+}
+

src/app/App.jsx → src/pages/index/+Page.jsx

@@ -1,15 +1,14 @@
-import { Suspense, lazy } from 'react'
+import Flash from '../../components/Flash'
 
-import comma from '../assets/comma.svg'
-import fastbootPorts from '../assets/fastboot-ports.svg'
-import zadigCreateNewDevice from '../assets/zadig_create_new_device.png'
-import zadigForm from '../assets/zadig_form.png'
+import comma from '../../assets/comma.svg'
+import fastbootPorts from '../../assets/fastboot-ports.svg'
+import zadigCreateNewDevice from '../../assets/zadig_create_new_device.png'
+import zadigForm from '../../assets/zadig_form.png'
 
-const Flash = lazy(() => import('./Flash.client'));
 
 export default function App() {
-  const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
-  console.info(`flash.comma.ai version: ${version}`);
+  const version = import.meta?.env?.VITE_PUBLIC_GIT_SHA ?? 'dev'
+  console.info(`flash.comma.ai version: ${version}`)
   return (
     <div className="flex flex-col lg:flex-row flex-wrap">
       <main className="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
@@ -149,9 +148,7 @@ export default function App() {
       </main>
 
       <div className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
-        <Suspense>
-          <Flash />
-        </Suspense>
+        <Flash />
       </div>
 
       <div className="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">

src/utils/fastboot.js

@@ -103,7 +103,7 @@ export function useFastboot() {
   /** @type {React.RefObject<Image[]>} */
   const manifest = useRef(null)
 
-  const initializePromise = useRef(null);
+  const initializePromise = useRef(null)
 
   function setMessage(message = '') {
     if (message) console.info('[fastboot]', message)

vite.config.js

@@ -1,26 +1,19 @@
-import { fileURLToPath, URL } from 'node:url';
+import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import tailwindcss from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
+import vike from 'vike/plugin'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
+    vike({
+      prerender: true,
+    }),
   ],
-  build: {
-    ssr: true,
-    rollupOptions: {
-      input: {
-        server: '/src/entry-server.jsx',
-      },
-    },
-  },
-  css: {
-    postcss: {
-      plugins: [tailwindcss, autoprefixer],
-    },
+  publicDir: 'public',
+  preview: {
+    port: 5173
   },
   resolve: {
     alias: [