feat(config): add support for runtime-defined env vars for rekor endpoint (#37)

lance · web-flow · commit 7273f47b13a9 · 2024-03-18T12:24:56.000-04:00
diff --git a/.github/workflows/cronjobs.yaml b/.github/workflows/cronjobs.yaml
@@ -3,8 +3,8 @@ on:
   workflow_dispatch:
   schedule:
     # Every M-F at 12:00am run this job
-    - cron:  "0 0 * * 1-5"
-    
+    - cron: "0 0 * * 1-5"
+
 jobs:
   check-image-version:
     uses: securesign/actions/.github/workflows/check-image-version.yaml@main
diff --git a/Dockerfile b/Dockerfile
@@ -1,23 +1,25 @@
 FROM registry.access.redhat.com/ubi9/nodejs-18@sha256:773645c3eae02529e09c04a843a0c6783de45b084b325685b043b7818c7a8bf6 as Build
 #
 COPY . .
-USER root 
+USER root
+ENV NODE_ENV production
 EXPOSE 3000
 RUN echo "export PATH=${PATH}:$HOME/node_modules/.bin" >> ~/.bashrc && \
     npm install --ignore-scripts && \
     npm run build && \
     chmod -R 777 /opt/app-root/src/.npm && \
+    echo "NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN = ${NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN}" && \
     npm cache clean --force
 USER 1001
-CMD ["npm", "run", "start"]
+CMD ["node_modules/.bin/next", "start"]
 
 LABEL \
       com.redhat.component="trusted-artifact-signer-rekor-ui" \
       name="trusted-artifact-signer-rekor-ui" \
       version="0.0.1" \
       summary="User Interface for checking Rekor Entries" \
-      description="Provides a user interface for checking Rekor Entries through an Node App" \
-      io.k8s.description="Provides a user interface for checking Rekor Entries through an Node App" \
-      io.k8s.display-name="Provides a user interface for checking Rekor Entries through an Node App" \
+      description="Provides a user interface for checking Rekor Entries through a Node App" \
+      io.k8s.description="Provides a user interface for checking Rekor Entries through a Node App" \
+      io.k8s.display-name="Provides a user interface for checking Rekor Entries through a Node App" \
       io.openshift.tags="rekor-ui, rekor, cli, rhtas, trusted, artifact, signer, sigstore" \
       maintainer="trusted-artifact-signer@redhat.com"
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,19 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
-	transpilePackages: ["@patternfly/react-core", "@patternfly/react-styles"],
+	publicRuntimeConfig: {
+		// remove private env variables
+		processEnv: Object.fromEntries(
+			Object.entries(process.env).filter(([key]) =>
+				key.includes("NEXT_PUBLIC_"),
+			),
+		),
+	},
+	transpilePackages: [
+		"@patternfly/react-core",
+		"@patternfly/react-icons",
+		"@patternfly/react-styles",
+	],
 };
 
 module.exports = nextConfig;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,10 +1,30 @@
 import Document, { Head, Html, Main, NextScript } from "next/document";
 
+const nextPublicENV = Object.keys(process.env)
+	.filter(key => key.startsWith("NEXT_PUBLIC_"))
+	.reduce(
+		(env, key) => {
+			env[key] = process.env[key] ?? "";
+			return env;
+		},
+		{} as { [key: string]: string },
+	);
+
 class AppDocument extends Document {
 	render() {
 		return (
 			<Html lang="en">
 				<Head></Head>
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `
+            console.table(${JSON.stringify(nextPublicENV)});
+		        window.process = window.process || {};
+		        window.process.env = window.process.env || {};
+			      Object.assign(window.process.env, ${JSON.stringify(nextPublicENV)});
+            `,
+					}}
+				></script>
 				<body>
 					<Main />
 					<NextScript />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,7 +18,7 @@ import {
 import { RekorClientProvider } from "../modules/api/context";
 import { Explorer } from "../modules/components/Explorer";
 import { Settings } from "../modules/components/Settings";
-import { CogIcon, GithubIcon } from "@patternfly/react-icons";
+import { CogIcon } from "@patternfly/react-icons";
 import Link from "next/link";
 import Image from "next/image";
 import NOSSRWrapper from "../modules/utils/noSSR";
@@ -112,3 +112,12 @@ const PageComponent: NextPage = () => (
 	</RekorClientProvider>
 );
 export default PageComponent;
+
+export async function getServerSideProps() {
+	return {
+		props: {
+			NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN:
+				process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
+		}, // will be passed to the page component as props
+	};
+}
