chore: improve nginx and env configuration

openscript · openscript · commit 80e0a6bfbbc2 · 2024-11-05T05:51:57.000Z
diff --git a/.changeset/shy-wasps-press.md b/.changeset/shy-wasps-press.md
@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Improve nginx and env configuration
diff --git a/apps/frontend/.docker/entrypoint.sh b/apps/frontend/.docker/entrypoint.sh
@@ -0,0 +1,8 @@
+#!/bin/sh
+set -xe
+
+: "${API_URL?Define the api endpoint}"
+
+sed -i "s/\/\/REPLACE_WITH_API_URL/$API_URL/g" /usr/share/nginx/html/index.html
+
+exec "$@"
diff --git a/apps/frontend/.docker/nginx.conf b/apps/frontend/.docker/nginx.conf
@@ -0,0 +1,10 @@
+server {
+  listen 80;
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+
+    try_files $uri $uri/ /index.html =404;
+  }
+}
diff --git a/apps/frontend/Dockerfile b/apps/frontend/Dockerfile
@@ -1,4 +1,11 @@
 FROM docker.io/nginx:stable-alpine
+
 COPY dist/ /usr/share/nginx/html/
+COPY ./.docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./.docker/entrypoint.sh /
+
+RUN chmod +x /entrypoint.sh
+
 EXPOSE 80
+ENTRYPOINT ["/entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -20,6 +20,11 @@
         min-height: 100%;
       }
     </style>
+    <script type="text/javascript">
+      window.env = {
+        apiUrl: '//REPLACE_WITH_API_URL'
+      };
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/frontend/src/configuration.ts b/apps/frontend/src/configuration.ts
@@ -0,0 +1,12 @@
+function getEnv(key: keyof Exclude<typeof window.env, undefined>) {
+  if (window.env === undefined) return;
+  if (window.env[key]?.startsWith("//")) return;
+
+  return window.env[key];
+}
+
+export const C = {
+  env: {
+    apiUrl: getEnv("apiUrl") || "http://localhost:3000",
+  },
+};
diff --git a/apps/frontend/src/stores/api.ts b/apps/frontend/src/stores/api.ts
@@ -1,9 +1,10 @@
 import createFetchClient from "openapi-fetch";
 import createClient from "openapi-react-query";
 import type { paths } from "../api.gen";
+import { C } from "../configuration";
 
 const fetchClient = createFetchClient<paths>({
-  baseUrl: "https://api.test.quassel.ch",
+  baseUrl: C.env.apiUrl,
   credentials: "include",
 });
 export const $api = createClient(fetchClient);
diff --git a/apps/frontend/src/types.d.ts b/apps/frontend/src/types.d.ts
@@ -9,3 +9,11 @@ declare module "@tanstack/react-query" {
     };
   }
 }
+
+declare global {
+  interface Window {
+    env?: {
+      apiUrl?: string;
+    };
+  }
+}
diff --git a/docs/examples/docker-compose.yaml b/docs/examples/docker-compose.yaml
@@ -67,7 +67,7 @@ services:
   frontend:
     image: ghcr.io/openscript-ch/quassel-frontend:latest
     environment:
-      API: api.test.example.com
+      API_URL: https://api.test.example.com
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
       - "traefik.enable=true"
diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "quassel",
-  "version": "0.0.0",
   "private": true,
   "description": "Quassel: Gather language exposure data ",
   "scripts": {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@quassel/frontend": patch
 +---
++
 +Improve nginx and env configuration
Original file line number	Diff line number	Diff line change
`@@ -9,3 +9,11 @@ declare module "@tanstack/react-query" {`
`9`	`9`	`};`
`10`	`10`	`}`
`11`	`11`	`}`
	`12`	`+`
	`13`	`+declare global {`
	`14`	`+ interface Window {`
	`15`	`+ env?: {`
	`16`	`+ apiUrl?: string;`
	`17`	`+ };`
	`18`	`+ }`
	`19`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "quassel",`
`3`		`- "version": "0.0.0",`
`4`	`3`	`"private": true,`
`5`	`4`	`"description": "Quassel: Gather language exposure data ",`
`6`	`5`	`"scripts": {`