split between api and html router

also fix set-environment

picture-gallery-client/package.json

@@ -9,10 +9,10 @@
     "format:check": "prettier --check \"**/*.+(ts|tsx)\"",
     "lint": "eslint src/**",
     "lint:fix": "eslint --fix src/**",
-    "client:build": "vite build",
+    "client:build": "vite build && npm run set-environment",
     "client:run": "npm run client:build && npm run client:start",
     "client:start": "vite",
-    "preview": "vite preview",
+    "set-environment": "npx import-meta-env -x .env.example",
     "client:test": "TODO",
     "test": "jest"
   },

picture-gallery-client/package.minimize.docker.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react-inject-env": "2.1.0"
+    "@import-meta-env/cli": "^0.6.9"
   },
   "scripts": {
-    "set-environment": "npx react-inject-env set"
+    "set-environment": "npx import-meta-env -x .env.example"
   }
 }

picture-gallery-client/src/ImageGalleryLayout.tsx

@@ -36,7 +36,11 @@ function ImageGalleryLayout() {
     setImages([]);
     setError(false);
     setImagesLoaded(false);
-    fetch(`/images${location.pathname}`)
+    fetch(`/images${location.pathname}`, {
+      headers: {
+        Accept: "application/json",
+      },
+    })
       .then((res) => res.json())
       .then((data) => {
         if (data.images === undefined) {
@@ -53,7 +57,11 @@ function ImageGalleryLayout() {
   }, [location.pathname]);
 
   useEffect(() => {
-    fetch("/directories")
+    fetch("/directories", {
+      headers: {
+        Accept: "application/json",
+      },
+    })
       .then((res) => res.json())
       .then((data) => setFolders(data));
   }, []);

picture-gallery-client/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

picture-gallery-client/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig(() => {
     ],
     server: {
       proxy: {
-        "/images": {
+        "/images/": {
           target: "http://localhost:3001",
           changeOrigin: true,
           secure: false,

picture-gallery-server/src/app.ts

@@ -1,44 +1,31 @@
 import express from "express";
-import * as path from "path";
-import { walk } from "./fsExtension";
 import { initThumbnailsAsync } from "./thumbnails";
-import { publicPath } from "./paths";
-import { getImages } from "./controller/images";
 import { consoleLogger, expressLogger } from "./logging";
+import { routerApi } from "./router/routerApi";
+import { routerHtml } from "./router/routerHtml";
 
 const app = express();
 
 const PORT = process.env.PORT || 3001;
 
-const withCaching = {
-  maxAge: 2592000000,
-  setHeaders(res, _) {
-    res.setHeader(
-      "Expires",
-      new Date(Date.now() + 2592000000 * 30).toUTCString(),
-    );
-  },
-};
+function checkAPICall(req: express.Request) {
+  return !req.accepts("text/html");
+}
 
-app.use("/staticImages", express.static(publicPath, withCaching));
+app.use(function (req, res, next) {
+  if (checkAPICall(req)) {
+    req.url = `/api${req.url}`;
+  } else {
+    req.url = `/html${req.url}`;
+  }
+  next();
+});
 
-app.use(express.static("../picture-gallery-client/build"));
+app.use("/api", routerApi);
+app.use("/html", routerHtml);
 
 app.use(expressLogger);
 
-app.get(`/images(/*)?`, getImages);
-
-app.get("/directories", async (req, res) => {
-  res.json(await walk(""));
-});
-
-// All other GET requests not handled before will return our React app
-app.get("*", (req, res) => {
-  res.sendFile(
-    path.resolve(__dirname, "../../picture-gallery-client/build/index.html"),
-  );
-});
-
 app.listen(PORT, () => {
   consoleLogger.info(`Start processing thumbnails async`);
   initThumbnailsAsync("");

picture-gallery-server/src/router/routerApi.ts

@@ -0,0 +1,11 @@
+import express from "express";
+import { getImages } from "../controller/images";
+import { walk } from "../fsExtension";
+
+export const routerApi = express.Router();
+
+routerApi.get(`/images(/*)?`, getImages);
+
+routerApi.get("/directories", async (req, res) => {
+  res.json(await walk(""));
+});

picture-gallery-server/src/router/routerHtml.ts

@@ -0,0 +1,26 @@
+import express from "express";
+import * as path from "path";
+import { publicPath } from "../paths";
+
+export const routerHtml = express.Router();
+
+const withCaching = {
+  maxAge: 2592000000,
+  setHeaders(res, _) {
+    res.setHeader(
+      "Expires",
+      new Date(Date.now() + 2592000000 * 30).toUTCString(),
+    );
+  },
+};
+
+routerHtml.use("/staticImages", express.static(publicPath, withCaching));
+
+routerHtml.use(express.static("../picture-gallery-client/build"));
+
+// All other GET requests not handled before will return our React app
+routerHtml.get("*", (req, res) => {
+  res.sendFile(
+    path.resolve(__dirname, "../../../picture-gallery-client/build/index.html"),
+  );
+});