Feat/proxy api

dev/dev.env.example

@@ -9,7 +9,7 @@ POSTGRES_PASSWORD=<same as SQL_PASSWORD>
 ENVIRON=dev
 DEBUG=True
 SECRET_KEY=<random string of length 50>
-DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1 [::1]
+DJANGO_ALLOWED_HOSTS=localhost 127.0.0.1 [::1] django
 SQL_ENGINE=django.db.backends.postgresql
 SQL_DATABASE=<same as POSTGRES_DB>
 SQL_USER=postgres

docker-compose.yml

@@ -48,6 +48,9 @@ services:
     container_name: vite
     env_file:
       - dev/dev.env
+    environment:
+      - VITE_APP_SERVER_URL=django://django:8000
+      - VITE_APP_CLIENT_URL=vite://vite:5175
     ports:
       - "5175:5175"
     develop:

frontend/eslint.config.mjs

@@ -28,7 +28,12 @@ export default [
       "no-console": "warn",
       indent: ["error", 2],
       "no-irregular-whitespace": "error",
-      "prettier/prettier": "error",
+      "prettier/prettier": [
+        "error",
+        {
+          endOfLine: "auto",
+        },
+      ],
       "react/no-unescaped-entities": "off",
       "@typescript-eslint/no-unused-vars": ["error"],
       "tailwindcss/no-contradicting-classname": "error",

frontend/src/tw-components/CookieBanner.tsx

@@ -7,8 +7,7 @@ import Cookies from "js-cookie";
 import { IconButton } from "components/components";
 import { iconX } from "assets/images/images";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CookieBanner(props: { children: React.ReactNode }) {
+function CookieBanner() {
   const [hidden, setIsHidden] = useState(
     Cookies.get("cookieConsent") !== undefined,
   );

frontend/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

frontend/vite.config.mts

@@ -1,10 +1,16 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
 import { resolve } from "path";
 
-export default defineConfig(() => {
+export default defineConfig(({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+
+  const SERVER_URL = `${
+    process.env.VITE_APP_SERVER_URL ?? "http://localhost:8000"
+  }`;
+
   return {
     //to resolve relative file paths for sass (no plugin)
     resolve: {
@@ -22,6 +28,13 @@ export default defineConfig(() => {
       host: true,
       port: 5175,
       origin: "http://127.0.0.1:5175",
+      proxy: {
+        "/api": {
+          target: `${SERVER_URL}/api`,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ""),
+        },
+      },
       watch: {
         usePolling: true,
       },