feat: build react-spa frontend

jean-michelet · jean-michelet · commit 99c7bb39c5de · 2024-08-25T20:09:03.000+02:00
diff --git a/package.json b/package.json
@@ -8,13 +8,15 @@
     "test": "test"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc",
-    "watch": "npm run build -- --watch",
+    "start": "npm run build && npm run build:client && fastify start -l info dist/app.js",
+    "build": "tsc",
+    "build:client": "vite build",
+    "watch": "tsc -w",
+    "dev": "npm run build && concurrently -k -p \"[{name}]\" -n \"TypeScript,App\" -c \"yellow.bold,cyan.bold\" \"npm:watch\" \"npm:dev:start\"",
+    "dev:start": "fastify start --ignore-watch=.ts$ -l info -P dist/app.js",
     "test": "npm run db:seed && tap --jobs=1 test/**/*",
-    "start": "fastify start -l info dist/app.js",
-    "dev": "fastify start -w -l info -P dist/app.js",
     "standalone": "node --env-file=.env dist/server.js",
-    "lint": "eslint --ignore-pattern=dist",
+    "lint": "eslint src --ignore-pattern='src/client/dist'",
     "lint:fix": "npm run lint -- --fix",
     "db:migrate": "node --env-file=.env scripts/migrate.js",
     "db:seed": "node --env-file=.env scripts/seed-database.js"
@@ -35,19 +37,26 @@
     "@fastify/swagger-ui": "^4.0.1",
     "@fastify/type-provider-typebox": "^4.0.0",
     "@fastify/under-pressure": "^8.3.0",
+    "@fastify/vite": "^6.0.7",
     "@sinclair/typebox": "^0.33.7",
+    "@vitejs/plugin-react": "^4.3.1",
+    "concurrently": "^8.2.2",
     "fastify": "^4.26.1",
     "fastify-cli": "^6.1.1",
     "fastify-plugin": "^4.0.0",
-    "postgrator": "^7.2.0"
+    "postgrator": "^7.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "eslint": "^9.4.0",
     "fastify-tsconfig": "^2.0.0",
     "mysql2": "^3.10.1",
     "neostandard": "^0.7.0",
-    "tap": "^19.2.2",
+    "tap": "^21.0.1",
     "typescript": "^5.4.5"
   }
 }
diff --git a/src/app.ts b/src/app.ts
@@ -5,6 +5,7 @@
 import path from "node:path";
 import fastifyAutoload from "@fastify/autoload";
 import { FastifyInstance, FastifyPluginOptions } from "fastify";
+import fastifyVite from "@fastify/vite";
 
 export default async function serviceApp(
   fastify: FastifyInstance,
@@ -14,24 +15,24 @@ export default async function serviceApp(
   // those should be registered first as your custom plugins might depend on them
   await fastify.register(fastifyAutoload, {
     dir: path.join(import.meta.dirname, "plugins/external"),
-    options: { ...opts }
+    options: {}
   });
 
   // This loads all your custom plugins defined in plugins/custom
   // those should be support plugins that are reused
   // through your application
-  fastify.register(fastifyAutoload, {
+  await fastify.register(fastifyAutoload, {
     dir: path.join(import.meta.dirname, "plugins/custom"),
-    options: { ...opts }
+    options: {}
   });
 
   // This loads all plugins defined in routes
   // define your routes in one of these
-  fastify.register(fastifyAutoload, {
+  await fastify.register(fastifyAutoload, {
     dir: path.join(import.meta.dirname, "routes"),
     autoHooks: true,
     cascadeHooks: true,
-    options: { ...opts }
+    options: {}
   });
 
   fastify.setErrorHandler((err, request, reply) => {
@@ -48,14 +49,10 @@ export default async function serviceApp(
       "Unhandled error occurred"
     );
 
-    reply.code(err.statusCode ?? 500);
+    const statusCode = err.statusCode ?? 500
+    reply.code(statusCode);
 
-    let message = "Internal Server Error";
-    if (err.statusCode === 401) {
-      message = err.message;
-    }
-
-    return { message };
+    return { message: "Internal Server Error" };
   });
 
   // An attacker could search for valid URLs if your 404 error handling is not rate limited.
@@ -84,4 +81,20 @@ export default async function serviceApp(
 
     return { message: "Not Found" };
   });
+
+    // We setup the SPA
+    await fastify.register(fastifyVite, function (fastify) {
+      return {
+        root: path.resolve(import.meta.dirname, '../'),
+        dev: fastify.config.FASTIFY_VITE_DEV_MODE,
+        spa: true
+      }
+    });
+    
+    // Route must match vite "base": https://vitejs.dev/config/shared-options.html#base
+    fastify.get('/', (req, reply) => {
+      return reply.html();
+    });
+  
+    await fastify.vite.ready();
 }
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -0,0 +1,5 @@
+export function App () {
+  return (
+    <p>Welcome to the official Fastify demo!</p>
+  )
+}
diff --git a/src/client/index.html b/src/client/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link data-rh="true" rel="icon" href="/favicon.ico" />
+    <title>Fastify demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/mount.tsx"></script>
+  </body>
+</html>
diff --git a/src/client/mount.tsx b/src/client/mount.tsx
@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const rootElement =
+  document.getElementById("root") || document.createElement("div");
+
+const root = createRoot(rootElement);
+root.render(<App />);
diff --git a/src/client/public/favicon.ico b/src/client/public/favicon.ico
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*"],
+  "exclude": ["dist"]
+}
diff --git a/src/client/vite-env.d.ts b/src/client/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/src/plugins/external/env.ts b/src/plugins/external/env.ts
@@ -11,6 +11,7 @@ declare module "fastify" {
       MYSQL_DATABASE: string;
       JWT_SECRET: string;
       RATE_LIMIT_MAX: number;
+      FASTIFY_VITE_DEV_MODE: boolean;
     };
   }
 }
@@ -52,6 +53,12 @@ const schema = {
     RATE_LIMIT_MAX: {
       type: "number",
       default: 100
+    },
+
+    // Frontend
+    FASTIFY_VITE_DEV_MODE: {
+      type: "boolean",
+      default: true
     }
   }
 };
diff --git a/src/routes/home.ts b/src/routes/home.ts
diff --git a/test/app/rate-limit.test.ts b/test/app/rate-limit.test.ts
@@ -11,7 +11,7 @@ it("should be rate limited", async (t) => {
         url: "/"
       });
 
-    assert.strictEqual(res.statusCode, 200);
+      assert.strictEqual(res.statusCode, 200);
     }
   
     const res = await app.inject({
diff --git a/test/plugins/repository.test.ts b/test/plugins/repository.test.ts
@@ -3,7 +3,7 @@ import assert from "node:assert";
 import { execSync } from "child_process";
 import Fastify from "fastify";
 import repository from "../../src/plugins/custom/repository.js";
-import * as envPlugin from "../../src/plugins/external/1-env.js";
+import * as envPlugin from "../../src/plugins/external/env.js";
 import * as mysqlPlugin from "../../src/plugins/external/mysql.js";
 import { Auth } from '../../src/schemas/auth.js';
 
diff --git a/test/routes/api/api.test.ts b/test/routes/api/api.test.ts
@@ -9,9 +9,8 @@ test("GET /api without authorization header", async (t) => {
     url: "/api"
   });
 
-  assert.deepStrictEqual(JSON.parse(res.payload), {
-    message: "No Authorization was found in request.headers"
-  });
+  assert.equal(res.statusCode, 401)
+  assert.deepStrictEqual(JSON.parse(res.payload).message, "No Authorization was found in request.headers");
 });
 
 test("GET /api without JWT Token", async (t) => {
@@ -25,9 +24,8 @@ test("GET /api without JWT Token", async (t) => {
     }
   });
 
-  assert.deepStrictEqual(JSON.parse(res.payload), {
-    message: "Authorization token is invalid: The token is malformed."
-  });
+  assert.equal(res.statusCode, 401)
+  assert.deepStrictEqual(JSON.parse(res.payload).message, "Authorization token is invalid: The token is malformed.");
 });
 
 test("GET /api with JWT Token", async (t) => {
diff --git a/test/routes/home.test.ts b/test/routes/home.test.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,5 +4,6 @@
     "outDir": "dist",
     "rootDir": "src"
   },
-  "include": ["@types", "src/**/*.ts"]
+  "include": ["@types", "src/**/*.ts"],
+  "exclude": ["src/client/**/*"]
 }
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,9 @@
+import { resolve } from 'node:path'
+import viteReact from '@vitejs/plugin-react'
+
+/** @type {import('vite').UserConfig} */
+export default {
+  base: '/',
+  root: resolve(import.meta.dirname, 'src/client'),
+  plugins: [viteReact()]
+}

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ declare module "fastify" {`
`11`	`11`	`MYSQL_DATABASE: string;`
`12`	`12`	`JWT_SECRET: string;`
`13`	`13`	`RATE_LIMIT_MAX: number;`
	`14`	`+ FASTIFY_VITE_DEV_MODE: boolean;`
`14`	`15`	`};`
`15`	`16`	`}`
`16`	`17`	`}`
`@@ -52,6 +53,12 @@ const schema = {`
`52`	`53`	`RATE_LIMIT_MAX: {`
`53`	`54`	`type: "number",`
`54`	`55`	`default: 100`
	`56`	`+ },`
	`57`	`+`
	`58`	`+ // Frontend`
	`59`	`+ FASTIFY_VITE_DEV_MODE: {`
	`60`	`+ type: "boolean",`
	`61`	`+ default: true`
`55`	`62`	`}`
`56`	`63`	`}`
`57`	`64`	`};`