diff --git a/picture-gallery-client/package.json b/picture-gallery-client/package.json index 66c1d33..7ac2f34 100644 --- a/picture-gallery-client/package.json +++ b/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" }, diff --git a/picture-gallery-client/package.minimize.docker.json b/picture-gallery-client/package.minimize.docker.json index 3267f16..9f1a2f1 100644 --- a/picture-gallery-client/package.minimize.docker.json +++ b/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" } } diff --git a/picture-gallery-client/src/ImageGalleryLayout.tsx b/picture-gallery-client/src/ImageGalleryLayout.tsx index af95fae..313f7fa 100644 --- a/picture-gallery-client/src/ImageGalleryLayout.tsx +++ b/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)); }, []); diff --git a/picture-gallery-client/src/react-app-env.d.ts b/picture-gallery-client/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/picture-gallery-client/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/picture-gallery-client/vite.config.ts b/picture-gallery-client/vite.config.ts index 1b11428..d3102b8 100644 --- a/picture-gallery-client/vite.config.ts +++ b/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, diff --git a/picture-gallery-server/src/app.ts b/picture-gallery-server/src/app.ts index fbf9c4f..c3cebf6 100644 --- a/picture-gallery-server/src/app.ts +++ b/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(""); diff --git a/picture-gallery-server/src/router/routerApi.ts b/picture-gallery-server/src/router/routerApi.ts new file mode 100644 index 0000000..828f6c6 --- /dev/null +++ b/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("")); +}); diff --git a/picture-gallery-server/src/router/routerHtml.ts b/picture-gallery-server/src/router/routerHtml.ts new file mode 100644 index 0000000..dbb7d4f --- /dev/null +++ b/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"), + ); +});