feat: remove NEXT_PUBLIC env vars from docker build args (#13)

* feat: add next public envs to runtime

* Commit env vars

Author: hjball

.dockerignore

@@ -1,5 +1,7 @@
 .env
 
+docker-compose.override.yml
+
 Dockerfile
 ./**/*/Dockerfile
 

.gitignore

@@ -43,3 +43,6 @@ dist/
 
 # turbo
 .turbo
+
+# docker
+docker-compose.override.yml

apps/web/Dockerfile

@@ -42,13 +42,6 @@ ENV CI=true
 
 WORKDIR /app
 
-ARG NEXT_PUBLIC_KAN_ENV=${NEXT_PUBLIC_KAN_ENV}
-ARG NEXT_PUBLIC_UMAMI_ID=${NEXT_PUBLIC_UMAMI_ID}
-ARG NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
-ARG NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
-ARG NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}
-ARG NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
-
 # Copy lockfile and package.json's of isolated subworkspace
 COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 COPY --from=pruner /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml

apps/web/next.config.js

@@ -1,9 +1,13 @@
 import { fileURLToPath } from "url";
 import createJiti from "jiti";
+import { env } from "next-runtime-env";
+import { configureRuntimeEnv } from "next-runtime-env/build/configure.js";
 
 // Import env files to validate at build time. Use jiti so we can load .ts files in here.
 createJiti(fileURLToPath(import.meta.url))("./src/env");
 
+configureRuntimeEnv();
+
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
@@ -22,7 +26,7 @@ const config = {
   typescript: { ignoreBuildErrors: true },
 
   images: {
-    domains: [process.env.NEXT_PUBLIC_STORAGE_DOMAIN ?? ""],
+    domains: [env("NEXT_PUBLIC_STORAGE_DOMAIN") ?? ""],
   },
   experimental: {
     instrumentationHook: true,

apps/web/package.json

@@ -35,6 +35,7 @@
     "jwt-decode": "^4.0.0",
     "next": "^14.2.15",
     "next-logger": "^5.0.1",
+    "next-runtime-env": "^1.7.2",
     "nextjs-cors": "^2.2.0",
     "pino": "^9.6.0",
     "react": "catalog:react18",

apps/web/public/__ENV.js

@@ -0,0 +1,8 @@
+window.__ENV = {
+  NEXT_PUBLIC_UMAMI_ID: "aaed1f55-25e2-4223-b918-e429c390be35",
+  NEXT_PUBLIC_KAN_ENV: "cloud",
+  NEXT_PUBLIC_BASE_URL: "http://localhost:3000",
+  NEXT_PUBLIC_AVATAR_BUCKET_NAME: "avatars",
+  NEXT_PUBLIC_STORAGE_DOMAIN: "storage.kanbn.com",
+  NEXT_PUBLIC_STORAGE_URL: "https://storage.kanbn.com",
+};

apps/web/src/pages/_app.tsx

@@ -2,8 +2,8 @@ import "~/styles/globals.css";
 
 import type { AppType } from "next/app";
 import { Plus_Jakarta_Sans } from "next/font/google";
+import { env } from "next-runtime-env";
 
-import { env } from "~/env";
 import { ModalProvider } from "~/providers/modal";
 import { PopupProvider } from "~/providers/popup";
 import { ThemeProvider } from "~/providers/theme";
@@ -31,13 +31,14 @@ const MyApp: AppType = ({ Component, pageProps }) => {
           position: relative;
         }
       `}</style>
-      {env.NEXT_PUBLIC_UMAMI_ID && (
+      {env("NEXT_PUBLIC_UMAMI_ID") && (
         <script
           defer
           src="https://cloud.umami.is/script.js"
-          data-website-id={env.NEXT_PUBLIC_UMAMI_ID}
+          data-website-id={env("NEXT_PUBLIC_UMAMI_ID")}
         />
       )}
+      <script src="/__ENV.js" />
       <main className="font-sans">
         <ThemeProvider>
           <ModalProvider>

apps/web/src/pages/api/stripe/create_billing_session.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "next-runtime-env";
 
 import { createNextApiContext } from "@kan/api/trpc";
 import { createStripeClient } from "@kan/stripe";
@@ -22,7 +23,7 @@ export default async function handler(
 
     const session = await stripe.billingPortal.sessions.create({
       customer: user.stripeCustomerId,
-      return_url: `${process.env.NEXT_PUBLIC_BASE_URL}/settings`,
+      return_url: `${env("NEXT_PUBLIC_BASE_URL")}/settings`,
     });
 
     return res.status(200).json({ url: session.url });

apps/web/src/pages/api/stripe/create_checkout_session.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "next-runtime-env";
 import { z } from "zod";
 
 import { createNextApiContext } from "@kan/api/trpc";
@@ -73,8 +74,8 @@ export default async function handler(
           quantity: 1,
         },
       ],
-      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}${successUrl}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}${cancelUrl}`,
+      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}`,
+      cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
       customer: user.stripeCustomerId ?? undefined,
       metadata: {
         workspaceSlug: slug,

apps/web/src/pages/api/upload/image.ts

@@ -1,10 +1,9 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
-
+import { env } from "next-runtime-env";
 import { createNextApiContext } from "@kan/api/trpc";
 
-import { env } from "~/env";
 
 const allowedContentTypes = ["image/jpeg", "image/png"];
 
@@ -55,7 +54,7 @@ export default async function handler(
       // @ts-ignore
       client,
       new PutObjectCommand({
-        Bucket: process.env.NEXT_PUBLIC_AVATAR_BUCKET_NAME ?? "",
+        Bucket: env("NEXT_PUBLIC_AVATAR_BUCKET_NAME") ?? "",
         Key: filename,
       }),
     );