implemented backend / frontend structure

4 days ago · 3c982e845f
parent fcc87648be
commit 3c982e845f
23 changed files with 1652 additions and 133 deletions
--- a/README.md
+++ b/README.md
@ -30,4 +30,5 @@ Source: https://www.programmfabrik.de/en/assignment-frontend-backend-developer-j

 * ~0.5 hours to set up the project;
 * ~5 hours to implement game board serialization, tic-tac-toe rules and game solver (with tests);
+* ~1 hour to set up the backend / frontend structure with JSX templating and static resources
 * ...
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,10 +2,16 @@
  "name": "test-assignment-tictactoe",
  "version": "1.0.0",
  "scripts": {
+    "build": "npm run build:clean && npm run build:only && npm run build:static",
+    "build:clean": "rimraf dist",
+    "build:only": "tsc --project tsconfig.build.json",
+    "build:static": "copyfiles -u 1 \"src/frontend/static/**/*\" dist",
+    "check-and-start": "npm run prerelease && npm run build && npm run start",
    "lint": "eslint src",
    "prerelease": "npm run lint && npm run typecheck && npm run test",
+    "start": "node ./dist/server.js",
    "test": "tap",
-    "typecheck": "tsc --noEmit --project tsconfig.json"
+    "typecheck": "tsc --project tsconfig.json"
  },
  "author": "Inga",
  "license": "CNPLv7",
@ -14,12 +20,20 @@
    "@eslint/js": "^9.15.0",
    "@tsconfig/strictest": "^2.0.5",
    "@types/eslint__js": "^8.42.3",
+    "@types/express": "^5.0.0",
+    "copyfiles": "^2.4.1",
    "eslint": "9.14.x",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
    "tap": "^21.0.1",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.1-rc",
    "typescript-eslint": "^8.14.0"
+  },
+  "dependencies": {
+    "express": "^4.21.1",
+    "preact": "^10.24.3",
+    "preact-render-to-string": "^6.5.11"
  }
 }
--- a/src/backend/app.ts
+++ b/src/backend/app.ts
@ -0,0 +1,13 @@
+import path from "node:path";
+import express from "express";
+import { mainPageHandler } from "./main.tsx";
+
+export const createApp = () => {
+  const app = express();
+
+  app.get("/", mainPageHandler);
+  app.use("/frontend", express.static(path.join(import.meta.dirname, "..", "frontend")));
+  app.use("/shared", express.static(path.join(import.meta.dirname, "..", "shared")));
+
+  return app;
+};
--- a/src/backend/main.tsx
+++ b/src/backend/main.tsx
@ -0,0 +1,30 @@
+import type { RequestHandler } from "express";
+import { safeGetQueryValue, sendHtml } from "./utils.ts";
+
+export const mainPageHandler: RequestHandler = (req, res) => {
+  const pageNumber = parseInt(safeGetQueryValue(req, "page") ?? "0", 10);
+  sendHtml(
+    res,
+    <html>
+      <head>
+        {/*
+          We need to use ".js" here instead of ".ts" (and "incorrect" path)
+          because we're loading the compiled file on frontend, from path relative to the root page,
+          and because TS won't rewrite the extension here.
+        */}
+        <script src="frontend/app.js" type="module"></script>
+        <link rel="stylesheet" href="frontend/static/style.css" />
+        <title>Hi</title>
+      </head>
+      <body>
+        <p>Hello world!</p>
+        <p>
+          Page number <span class="pageNumber">{pageNumber}</span>
+        </p>
+        <p>
+          <a href={`?page=${pageNumber + 1}`}>Go to the next page</a>
+        </p>
+      </body>
+    </html>,
+  );
+};
--- a/src/backend/utils.ts
+++ b/src/backend/utils.ts
@ -0,0 +1,19 @@
+import type { Request, Response } from "express";
+import type { VNode } from "preact";
+import { render } from "preact-render-to-string";
+
+export const sendHtml = (res: Response, document: VNode) => {
+  const html = render(document);
+  res.send(`<!DOCTYPE html>${html}`);
+};
+
+// Quick and dirty workaround, should not be used in real world
+// with real complex query strings and with the need for error handling
+export const safeGetQueryValue = (req: Request, name: string) => {
+  const result = req.query[name];
+  if (typeof result !== "string") {
+    return null;
+  }
+
+  return result || null;
+};
--- a/src/frontend/app.ts
+++ b/src/frontend/app.ts
@ -0,0 +1,6 @@
+import { computeAllSolutions } from "../shared/solver.ts";
+import { rules } from "../shared/tictactoe-rules.ts";
+
+const allSolutions = computeAllSolutions(3, 3, rules);
+console.log(allSolutions.size);
+console.log(allSolutions);
--- a/src/frontend/static/style.css
+++ b/src/frontend/static/style.css
@ -0,0 +1,4 @@
+.pageNumber {
+  font-weight: bold;
+  color: red;
+}
--- a/src/server.ts
+++ b/src/server.ts
@ -0,0 +1,10 @@
+import { createApp } from "./backend/app.ts";
+
+const app = createApp();
+
+// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we actually want to coalesce empty strings here, too
+const port = process.env["PORT"] || 3000;
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`);
+});
--- a/src/shared/board.spec.ts
+++ b/src/shared/board.spec.ts
--- a/src/shared/board.ts
+++ b/src/shared/board.ts
--- a/src/shared/datatypes.spec.ts
+++ b/src/shared/datatypes.spec.ts
--- a/src/shared/datatypes.ts
+++ b/src/shared/datatypes.ts
--- a/src/shared/opponent.spec.ts
+++ b/src/shared/opponent.spec.ts
--- a/src/shared/opponent.ts
+++ b/src/shared/opponent.ts
--- a/src/shared/solver.spec.ts
+++ b/src/shared/solver.spec.ts
--- a/src/shared/solver.ts
+++ b/src/shared/solver.ts
--- a/src/shared/tictactoe-rules.spec.ts
+++ b/src/shared/tictactoe-rules.spec.ts
--- a/src/shared/tictactoe-rules.ts
+++ b/src/shared/tictactoe-rules.ts
--- a/src/shared/tictactoe.test.ts
+++ b/src/shared/tictactoe.test.ts
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@ -2,7 +2,9 @@
  "extends": "./tsconfig.json",
  "exclude": ["src/**/*.spec.*"],
  "compilerOptions": {
-      "module": "Preserve"
+    "module": "Preserve",
+    "noEmit": false,
+    "outDir": "dist",
+    "rewriteRelativeImportExtensions": true
  }
-  }
-  
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -3,9 +3,11 @@
  "include": ["src/**/*"],
  "compilerOptions": {
    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "target": "ES2020",
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
    "module": "NodeNext",
-    "forceConsistentCasingInFileNames": true
+    "noEmit": true,
+    "target": "ES2020"
  }
 }