Merge pull request #3 from azpha/ssr

Ssr

index.html

@@ -29,7 +29,7 @@
     <title>Alex Frantz</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="app"><!--app-html--></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/entry-client.tsx"></script>
   </body>
 </html>

package.json

@@ -4,29 +4,33 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "build": "npm run build:client && npm run build:server",
-    "build": "tsc && vite build",
+    "build:client": "vite build --outDir dist/client",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "build:server": "cross-env SSR=true vite build --outDir dist/server"
-    "preview": "vite preview",
-    "start": "tsc && vite build && serve -p 8099 -s ./dist"
   },
   "dependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.13.1",
+    "compression": "^1.7.5",
+    "express": "^4.21.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
+    "@types/compression": "^1.7.5",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

server.ts

@@ -0,0 +1,44 @@
+import express, { Request, Response } from 'express'
+import { createServer as createViteServer } from 'vite'
+import compression from 'compression'
+import fs from 'fs'
+import path from 'path'
+
+async function createServer() {
+    const app = express()
+    app.use(compression())
+
+    const vite = await createViteServer({
+        server: { middlewareMode: true },
+        appType: 'custom'
+    })
+    app.use(vite.middlewares)
+
+    app.use('*', async (req: Request, res: Response) => {
+        const url = req.originalUrl
+
+        try {
+            const template = fs.readFileSync(
+                path.resolve(process.cwd(), 'index.html'),
+                'utf-8'
+            )
+
+            const transformedTemplate = await vite.transformIndexHtml(url, template)
+            const { render } = await vite.ssrLoadModule('./src/entry-server.tsx')
+            const appHtml = await render(url)
+
+            const html = transformedTemplate.replace(`<!--app-html-->`, appHtml)
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+        } catch (e) {
+            vite.ssrFixStacktrace(e as Error)
+            console.error(e)
+            res.status(500).end((e as Error).stack)
+        }
+    })
+
+    app.listen(3000, () => {
+        console.log('server started')
+    })
+}
+
+createServer()

src/App.tsx

@@ -0,0 +1,21 @@
+import { Routes, Route } from 'react-router-dom'
+
+import MainPage from './pages/index';
+import PrivacyPage from './pages/privacy';
+import MusicWidget from './pages/music';
+import LinksPage from './pages/links';
+import NotFound from './pages/NotFound';
+
+import './assets/main.css'
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainPage />} />
+      <Route path="/privacy" element={<PrivacyPage />} />
+      <Route path="/music" element={<MusicWidget />} />
+      <Route path="/links" element={<LinksPage />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  )
+}

src/components/Header.tsx

@@ -20,8 +20,11 @@ export default function Header({
         "where else would you rather be..",
         "..than right here, right now?!"
     ]
-    const [ quote, setQuote ] = useState<string>(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
+    const [ quote, setQuote ] = useState<string>(quoteArray[0]);
 
+    useEffect(() => {
+        setQuote(quoteArray[Math.floor(Math.random() * quoteArray.length)])
+    }, [])
     const drawNewQuote = () => {
         const newQuote = quoteArray[Math.floor(Math.random() * quoteArray.length)]
 

src/entry-client.tsx

@@ -0,0 +1,10 @@
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from './App'
+
+ReactDOM.hydrateRoot(
+    document.getElementById("app") as HTMLElement,
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+)

src/entry-server.tsx

@@ -0,0 +1,11 @@
+import { StaticRouter } from "react-router-dom/server"
+import { renderToString } from "react-dom/server"
+import App from "./App"
+
+export function render(url: string): string {
+    return renderToString(
+        <StaticRouter location={url}>
+            <App />
+        </StaticRouter>
+    )
+}

src/main.tsx

@@ -1,35 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import {
-  createBrowserRouter,
-  RouterProvider
-} from "react-router-dom"
-import './assets/main.css'
-
-// pages
-import MainPage from './pages/index';
-import PrivacyPage from './pages/privacy';
-import MusicWidget from './pages/music';
-import LinksPage from './pages/links';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <MainPage />
-  },
-  {
-    path: '/privacy',
-    element: <PrivacyPage />
-  },
-  {
-    path: '/music',
-    element: <MusicWidget />
-  },
-  {
-    path: '/links',
-    element: <LinksPage />
-  }
-])
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <RouterProvider router={router} />
-)

src/pages/NotFound.tsx

@@ -0,0 +1,14 @@
+import Layout from "../components/Layout";
+export default function NotFound() {
+    return (
+        <Layout>
+            <div className="min-h-screen flex justify-center items-center">
+                <div className="text-center pb-28">
+                    <h1 className="text-2xl font-bold">well that sucks</h1>
+                    <p>that page doesn't exist. skill issue</p>
+                    <a href="#" className="underline" onClick={() => history.back()}>go back?</a>
+                </div>
+            </div>
+        </Layout>
+    )
+}

tsconfig.json

@@ -1,25 +1,13 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "skipLibCheck": true,
+    "moduleResolution": "node",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "esModuleInterop": true,
-    "noUnusedParameters": true,
+    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true
+    "types": ["vite/client", "node"]
   },
-  "include": ["src"],
+  "include": ["src"]
-  "references": [{ "path": "./tsconfig.node.json" }]
+}
-}

vite.config.ts

@@ -1,8 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  publicDir: "./src/public"
+  publicDir: './src/public',
+  build: {
+    copyPublicDir: !!process.env.SSR,
+    ssr: !!process.env.SSR,
+    outDir: process.env.SSR ? 'dist/server' : 'dist/client',
+    rollupOptions: {
+      input: process.env.SSR ? './server.ts' : './index.html'
+    }
+  }
 })