Intermediate refactoring...

client/App.jsx

@@ -0,0 +1,13 @@
+import Router from 'preact-router'
+
+import { HomePage } from './pages/Home.jsx'
+import { LoginPage } from './pages/Login.jsx'
+import { ProblemPage } from './pages/Problem.jsx'
+
+export const App = ({ path }) => (
+    <Router>
+        <HomePage path="/" />
+        <LoginPage path="/login" />
+        <ProblemPage path="/problem/:id" />
+    </Router>
+)

client/pages/Home.jsx

@@ -1,6 +1,5 @@
 import { Problem } from '../components/Problem.jsx'
 import { useUser } from '../hooks.jsx'
-import { Link } from '../Router.jsx'
 
 export const HomePage = () => {
     const { username } = useUser()
@@ -34,7 +33,7 @@ export const HomePage = () => {
                         )
                     </>
                 ) : (
-                    <Link page={`/login`}>Login</Link>
+                    <a href="/login">Login</a>
                 )}
             </div>
             <div class="board">

client/pages/Login.jsx

@@ -1,5 +1,4 @@
 import { useState } from 'preact/hooks'
-import { Link } from '../Router.jsx'
 
 export const LoginPage = () => {
     const [username, setUsername] = useState('')

client/pages/Problem.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Markdown } from '../components/Markdown.jsx'
 import { Problem } from '../components/Problem.jsx'
 
-export const ProblemPage = ({ params: { id }, query }) => {
+export const ProblemPage = ({ id }) => {
     const [source, setSource] = useState('')
     const editorRef = useRef()
 

frontend/package.json

@@ -1,28 +0,0 @@
-{
-    "name": "@phc/problemi-frontend",
-    "version": "0.0.1",
-    "type": "module",
-    "scripts": {
-        "dev": "vite --clearScreen false",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@preact/signals": "^1.1.2",
-        "katex": "^0.16.3",
-        "preact": "^10.11.2",
-        "rehype-katex": "^6.0.2",
-        "rehype-stringify": "^9.0.3",
-        "remark-math": "^5.1.1",
-        "remark-parse": "^10.0.1",
-        "remark-rehype": "^10.1.0",
-        "unified": "^10.1.2",
-        "url-pattern": "^1.0.3"
-    },
-    "devDependencies": {
-        "@preact/preset-vite": "^2.4.0",
-        "sass": "^1.55.0",
-        "typescript": "^4.6.4",
-        "vite": "^3.2.0"
-    }
-}

frontend/src/main.jsx

@@ -1,18 +0,0 @@
-import { render } from 'preact'
-
-import { Router } from './Router.jsx'
-
-import { HomePage } from './pages/Home.jsx'
-import { LoginPage } from './pages/Login.jsx'
-import { ProblemPage } from './pages/Problem.jsx'
-
-render(
-    <Router
-        pages={{
-            '/': HomePage,
-            '/login': LoginPage,
-            '/problem/:id': ProblemPage,
-        }}
-    />,
-    document.body
-)

package.json

@@ -11,10 +11,25 @@
     },
     "license": "MIT",
     "dependencies": {
+        "@preact/preset-vite": "^2.4.0",
+        "@preact/signals": "^1.1.2",
         "body-parser": "^1.20.1",
         "chalk": "^5.1.2",
         "cookie-parser": "^1.4.6",
-        "express": "^4.18.2"
+        "express": "^4.18.2",
+        "katex": "^0.16.3",
+        "preact": "^10.11.2",
+        "preact-render-to-string": "^5.2.6",
+        "preact-router": "^4.1.0",
+        "rehype-katex": "^6.0.2",
+        "rehype-stringify": "^9.0.3",
+        "remark-math": "^5.1.1",
+        "remark-parse": "^10.0.1",
+        "remark-rehype": "^10.1.0",
+        "sass": "^1.55.0",
+        "unified": "^10.1.2",
+        "url-pattern": "^1.0.3",
+        "vite": "^3.2.2"
     },
     "devDependencies": {
         "concurrently": "^7.5.0",

server.js

@@ -0,0 +1,30 @@
+import path from 'path'
+import fs from 'fs/promises'
+
+import { createServer as createViteServer } from 'vite'
+import express from 'express'
+
+const CONSTANTS = {
+    MODE_DEVELOPMENT: 'development',
+}
+
+async function createDevelopmentServer(app) {
+    const vite = await createViteServer({
+        server: { middlewareMode: true },
+        appType: 'custom',
+    })
+
+    app.use(vite.middlewares)
+
+    app.use('*', async (req, res) => {
+        // serve index.html
+        const indexHtml = await fs.readFile(path.resolve('./client/index.html'), 'utf-8')
+        const transformedIndexHtml = vite.transformIndexHtml(req.originalUrl, indexHtml)
+    })
+}
+
+function createProductionServer() {
+    app.use('/', express.static('client/dist'))
+}
+
+const app = express()

server/main.js

@@ -6,8 +6,8 @@ import crypto from 'crypto'
 import bodyParser from 'body-parser'
 import cookieParser from 'cookie-parser'
 
-import { authMiddleware, loggingMiddleware, PingRouter, StatusRouter } from './server/helpers.js'
-import { createDatabase, getUser, updateUser } from './db/database.js'
+import { authMiddleware, loggingMiddleware, PingRouter, StatusRouter } from './server/routes.js'
+import { createDatabase, getUser, updateUser } from './server/db/database.js'
 
 const app = express()
 

vite.config.js

@@ -3,11 +3,5 @@ import { defineConfig } from 'vite'
 import preactPlugin from '@preact/preset-vite'
 
 export default defineConfig({
-    server: {
-        port: 3000,
-        proxy: {
-            '/api': 'http://localhost:4000',
-        },
-    },
     plugins: [preactPlugin()],
 })