Add local env

frontend/cypress/docker-compose.yml

@@ -34,6 +34,18 @@ services:
       - SENTRY_DSN=
       - MONITORENV_URL=http://geoserver-monitorenv-stubs:8080
       - MONITORFISH_API_PROTECTED_API_KEY=APIKEY
+      - FRONTEND_GEOSERVER_LOCAL_URL=//localhost:8081
+      - FRONTEND_GEOSERVER_REMOTE_URL=//localhost:8081
+      - FRONTEND_IS_DEV_ENV=true
+      - FRONTEND_MAPBOX_KEY=pk.eyJ1IjoibW9uaXRvcmZpc2giLCJhIjoiY2tsdHJ6dHhhMGZ0eDJ2bjhtZmJlOHJmZiJ9.bdi1cO-cUcZKXdkEkqAoZQ
+      - FRONTEND_MONITORENV_URL=//localhost:8081
+      - FRONTEND_OIDC_AUTHORITY=https://authentification.recette.din.developpement-durable.gouv.fr/authSAML/oidc/monitorfish
+      - FRONTEND_OIDC_CLIENT_ID=monitorfish
+      - FRONTEND_OIDC_ENABLED=false
+      - FRONTEND_OIDC_REDIRECT_URI=https://monitorfish.din.developpement-durable.gouv.fr
+      - FRONTEND_SENTRY_DSN=https://[email protected]/8
+      - FRONTEND_SHOM_KEY=rg8ele7cft4ujkwjspsmtwas
+      - VITE_SMALL_CHAT_SNIPPET=
     ports:
       - 8880:8880
       - 8000:8000

frontend/public/env.js

@@ -0,0 +1,2 @@
+// @ts-ignore
+self.env = undefined

frontend/runtime-env.js.template

@@ -0,0 +1,17 @@
+/**
+ * Make sure to add the env variable to the Env enum located in `domain/types/env.ts`
+ */
+// @ts-ignore
+self.env = {
+  VITE_GEOSERVER_LOCAL_URL: "$VITE_GEOSERVER_LOCAL_URL",
+  VITE_GEOSERVER_REMOTE_URL: "$VITE_GEOSERVER_REMOTE_URL",
+  VITE_MAPBOX_KEY: "$VITE_MAPBOX_KEY",
+  VITE_MONITORENV_URL: "$VITE_MONITORENV_URL",
+  VITE_OIDC_AUTHORITY: "$VITE_OIDC_AUTHORITY",
+  VITE_OIDC_CLIENT_ID: "$VITE_OIDC_CLIENT_ID",
+  VITE_OIDC_ENABLED: "$VITE_OIDC_ENABLED",
+  VITE_OIDC_REDIRECT_URI: "$VITE_OIDC_REDIRECT_URI",
+  VITE_SENTRY_DSN: "$VITE_SENTRY_DSN",
+  VITE_SHOM_KEY: "$VITE_SHOM_KEY",
+  VITE_SMALL_CHAT_SNIPPET: "$VITE_SMALL_CHAT_SNIPPET"
+}

frontend/src/domain/types/self.ts

@@ -0,0 +1,6 @@
+import { Env } from './env'
+
+export type Self = Window &
+  typeof globalThis & {
+    env: Record<Env, string>
+  }

frontend/src/utils/env.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-restricted-globals */
+import type { Env } from '../domain/types/env'
+import type { Self } from '../domain/types/self'
+
+/**
+ * Get the environment variable:
+ * - injected by the `env.sh` script at runtime in `window`
+ * - or from `import.meta.env`
+ */
+export function env(name: Env) {
+  if ((self as Self).env) {
+    const injectedValue = (self as Self).env[name]
+
+    if (injectedValue) {
+      if (injectedValue === 'true' || injectedValue === 'false') {
+        return Boolean(injectedValue)
+      }
+
+      return injectedValue
+    }
+  }
+
+  const valueFromProcess = import.meta.env[name]
+  if (valueFromProcess === 'true' || valueFromProcess === 'false') {
+    return Boolean(valueFromProcess)
+  }
+
+  return valueFromProcess
+}
+
+/* eslint-enable no-restricted-globals */

infra/docker/DockerfileBuildApp

@@ -120,6 +120,7 @@ COPY --from=buildSourcemaps /tmp/frontend/build /home/monitorfish/public/
 # Copy import-meta-env
 COPY --from=buildFront /tmp/frontend/import-meta-env /home/monitorfish/
 COPY --from=buildFront /tmp/infra/docker/env.sh /home/monitorfish/
+COPY --from=buildFront /tmp/infra/configurations/frontend/.env.local /home/monitorfish/
 COPY --from=buildFront /tmp/frontend/.env.example /home/monitorfish/
 
 # Add logs folder to be mounted as volume
@@ -146,7 +147,7 @@ USER monitorfish
 
 ENV VITE_GEOSERVER_LOCAL_URL=""
 
-RUN ./import-meta-env -x .env.example -p public/**/*
+RUN ./import-meta-env -e .env.local -x .env.example -p public/**/*
 
 ENTRYPOINT ["/home/monitorfish/env.sh"]