Env config

Amsterdam · Jul 18, 2024 · 6a0f833 · 6a0f833
1 parent 0ebaf0a
commit 6a0f833
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 19 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -8,16 +8,16 @@ ENV DIR /var/www
 COPY . $DIR/
 RUN ls -la $DIR
 
-# build dirs
-RUN mkdir -p $DIR/builds/application
+# build dirs and "config" directory in /application
+RUN mkdir -p $DIR/builds/application/config
 
 WORKDIR $DIR
 COPY package*.json $DIR/
 RUN npm ci --production --unsafe-perm --ignore-scripts .
 
 RUN npm run build
 
-RUN mv $DIR/build/* $DIR/builds/application/
+RUN mv $DIR/dist/* $DIR/builds/application/
 
 FROM nginx:stable-alpine
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: zaken-frontend
+    container_name: zwd-frontend
     image: ${REGISTRY:-127.0.0.1:5001}/${REPOSITORY:-salmagundi/zwd-frontend}:${VERSION:-latest}
     ports:
       - "8081:8000"
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -9,7 +9,7 @@ set -x
 echo "window.env = {" >> /var/www/application/config/env.js
 
 for var in $(printenv); do
-    if [[ $var == REACT_APP* ]]; then
+    if [[ $var == VITE* ]]; then
         key=$(echo $var | cut -f1 -d=)
         value=$(echo $var | cut -f2 -d=)
         echo "  \"$key\": \"$value\"," >> /var/www/application/config/env.js

diff --git a/index.html b/index.html
@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/amsterdam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Zaken Woningkwaliteit en Duurzaamheid</title>
+    <script>
+      // Check if the hostname contains "localhost" or is an IP address commonly used for localhost
+
+      if (window.location.host === 'localhost:5173') {
+          // Do not load the script
+          console.log('Skipping env.js on localhost.');
+      } else {
+          // Load the script
+          var script = document.createElement('script');
+          script.src = '/config/env.js';
+          document.head.appendChild(script);
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -17,26 +17,26 @@
   },
   "dependencies": {
     "@amsterdam/design-system-react": "^0.10.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "jwt-decode": "^4.0.0",
     "oidc-client-ts": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^6.24.1",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.1"
+    "eslint-plugin-react-refresh": "^0.4.7"
   }
 }
diff --git a/src/app/components/DefaultLayout/DefaultLayout.tsx b/src/app/components/DefaultLayout/DefaultLayout.tsx
@@ -1,14 +1,15 @@
 import { Outlet } from "react-router-dom"
 import { Header, SkipLink, PageMenu, Screen } from "@amsterdam/design-system-react"
 import { User, NavMenu } from "app/components"
+import { env } from "app/config/env"
 
 
 export const DefaultLayout: React.FC = () => (
   <>
     <SkipLink href="#main">Direct naar inhoud</SkipLink>
     <Screen maxWidth="wide">
       <Header 
-        appName={`${ import.meta.env.VITE_APP_TITLE }`}
+        appName={`${ env.VITE_APP_TITLE }`}
         links={(
           <PageMenu alignEnd>
             <li><User/></li>

diff --git a/src/app/config/env.ts b/src/app/config/env.ts
@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    type MyWindow = Window & { "env": any }
+  }
+
+type envType = { 
+  [name: string]: string | number
+}
+
+export const env: envType = { ...import.meta.env, ...(window as unknown as MyWindow)["env"] }
diff --git a/src/app/pages/NotFoundPage/NotFoundPage.tsx b/src/app/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,15 +1,20 @@
-import { useRouteError } from "react-router-dom"
+import { useRouteError, isRouteErrorResponse } from "react-router-dom"
+
 
 export const NotFoundPage = () => {
-  const error = useRouteError()
+  const error = useRouteError() as Error
   console.error(error)
 
+  if (!isRouteErrorResponse(error)) {
+    return null
+  }
+
   return (
     <div id="error-page">
       <h1>Oops!</h1>
       <p>Sorry, an unexpected error has occurred.</p>
       <p>
-        <i>{ error.statusText || error.message }</i>
+        <i>{ error?.statusText || error.message }</i>
       </p>
     </div>
   )

diff --git a/src/app/utils/authConst.ts b/src/app/utils/authConst.ts
@@ -1,12 +1,13 @@
 import { WebStorageStateStore } from "oidc-client-ts"
+import { env } from "app/config/env"
 
 export const oidcConfig = {
   authority: "https://login.microsoftonline.com/72fca1b1-2c2e-4376-a445-294d80196804",
-  client_id: `${ import.meta.env.VITE_OIDC_CLIENT_ID }`,
-  redirect_uri: `${ import.meta.env.VITE_OIDC_REDIRECT_URL }`,
+  client_id: `${ env.VITE_OIDC_CLIENT_ID }`,
+  redirect_uri: `${ env.VITE_OIDC_REDIRECT_URL }`,
   response_type: "code",
   scope: "openid",
-  post_logout_redirect_uri: `${ import.meta.env.VITE_OIDC_REDIRECT_URL }`,
+  post_logout_redirect_uri: `${ env.VITE_OIDC_REDIRECT_URL }`,
   metadata: {
     issuer: "https://login.microsoftonline.com/72fca1b1-2c2e-4376-a445-294d80196804/v2.0",
     authorization_endpoint: "https://login.microsoftonline.com/72fca1b1-2c2e-4376-a445-294d80196804/oauth2/v2.0/authorize",