chore: 12 factor - get config from env

Insert env at build time with Docker build args

Author: toresbe

.github/workflows/frontend.yml

@@ -12,7 +12,7 @@ permissions:
 
 jobs:
   build:
-    name: Build and push Docker image to GHCR
+    name: Build and push prod Docker image to GHCR
     runs-on: ubuntu-latest
 
     steps:
@@ -45,6 +45,9 @@ jobs:
       - name: Build and (if not PR) push
         uses: docker/build-push-action@v5
         with:
+          build-args: |
+            NEXT_PUBLIC_DJANGO_URL="https://frikanalen.no/api/"
+            NEXT_PUBLIC_UPLOAD_URL="https://upload.frikanalen.no/files"
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -12,6 +12,11 @@ COPY . .
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_PUBLIC_ENV production
 
+ARG NEXT_PUBLIC_DJANGO_URL
+ARG NEXT_PUBLIC_UPLOAD_URL
+
+ENV NEXT_PUBLIC_DJANGO_URL=$NEXT_PUBLIC_DJANGO_URL
+ENV NEXT_PUBLIC_UPLOAD_URL=$NEXT_PUBLIC_UPLOAD_URL
 RUN yarn build
 
 FROM node:18-bullseye AS runner

modules/core/env.ts

@@ -0,0 +1,11 @@
+import * as z from "zod"
+
+const PublicEnvSchema = z.object({
+  NEXT_PUBLIC_DJANGO_URL: z.string(),
+  NEXT_PUBLIC_UPLOAD_URL: z.string(),
+})
+
+export const env = PublicEnvSchema.parse({
+  NEXT_PUBLIC_DJANGO_URL: process.env.NEXT_PUBLIC_DJANGO_URL,
+  NEXT_PUBLIC_UPLOAD_URL: process.env.NEXT_PUBLIC_UPLOAD_URL,
+})

modules/network/config.ts

@@ -1,10 +1,10 @@
 import axios, { AxiosInstance } from "axios";
-import configs from "../config";
 import { IS_SERVER } from "modules/core/constants";
 import { createStoreFactory, Store } from "modules/state/classes/Store";
 import { NextPageContext } from "next";
 import cookie from "cookie";
 import { THE_END_OF_TIMES } from "../constants";
+import { env } from "../../core/env";
 
 export class NetworkStore extends Store {
   public incomingHeaders: Record<string, string> = {};
@@ -60,15 +60,15 @@ export class NetworkStore extends Store {
 
     this.apiInstance = this.addInterceptors(
       axios.create({
-        baseURL: configs.api,
+        baseURL: env.NEXT_PUBLIC_DJANGO_URL,
         withCredentials: true,
         headers, // FIXME: JUST TO GET BUILD RUNNING
       })
     );
 
     this.uploadInstance = this.addInterceptors(
       axios.create({
-        baseURL: configs.upload,
+        baseURL: env.NEXT_PUBLIC_UPLOAD_URL,
         withCredentials: true,
         headers,
       })

modules/network/stores/networkStore.ts

@@ -41,7 +41,8 @@
     "react-transition-group": "^4.4.2",
     "react-twitter-widgets": "^1.10.0",
     "shaka-player": "^4.1.1",
-    "shaka-player-react": "^1.0.1"
+    "shaka-player-react": "^1.0.1",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.15.8",

package.json

@@ -3378,3 +3378,8 @@ yaml@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.1.tgz#1e06fb4ca46e60d9da07e4f786ea370ed3c3cfec"
   integrity sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==
+
+zod@^3.25.76:
+  version "3.25.76"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34"
+  integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==