From 7d89d8f74cb04c6049553b85e6a388bcaa93476f Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Wed, 20 Mar 2024 14:53:09 +0100 Subject: [PATCH 1/4] Fix vite env injection at build time --- frontend/.env.example | 7 ------- frontend/package.json | 2 +- infra/configurations/frontend/.env.example | 7 +++++++ infra/docker/docker-compose.cypress.yml | 1 - infra/docker/docker-compose.puppeteer.yml | 1 - 5 files changed, 8 insertions(+), 10 deletions(-) create mode 100644 infra/configurations/frontend/.env.example diff --git a/frontend/.env.example b/frontend/.env.example index 2468f808a3..a5a44bbe8e 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -1,10 +1,3 @@ -################################################################################ -# Chat - -# We need to use a VITE_ env var to replace the HTML index file -# see: https://vitejs.dev/guide/env-and-mode.html#html-env-replacement -VITE_SMALL_CHAT_SNIPPET= - ################################################################################ # Feature flags diff --git a/frontend/package.json b/frontend/package.json index dab9f57d0b..c79f220bc0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,7 +9,7 @@ "npm": "10" }, "scripts": { - "build": "vite build && npm run bundle-sw", + "build": "import-meta-env-prepare -x ./../infra/configurations/frontend/.env.example -p ./../infra/configurations/frontend/.env.prod && vite build && npm run bundle-sw", "clean": "rm -Rf ./node-modules/.vite ./node-modules/build", "cypress:open": "cypress open --browser firefox --config-file ./config/cypress.config.ts --e2e", "dev": "import-meta-env-prepare -x ./.env.local.defaults && vite --port 3000", diff --git a/infra/configurations/frontend/.env.example b/infra/configurations/frontend/.env.example new file mode 100644 index 0000000000..39cb160a5c --- /dev/null +++ b/infra/configurations/frontend/.env.example @@ -0,0 +1,7 @@ +################################################################################ +# Chat + +# We need to use a VITE_ env var to replace the HTML index file +# see: https://vitejs.dev/guide/env-and-mode.html#html-env-replacement +# This env will be injected at build time (unlike `/frontend/.env.example` variables, injected at runtime) +VITE_SMALL_CHAT_SNIPPET= diff --git a/infra/docker/docker-compose.cypress.yml b/infra/docker/docker-compose.cypress.yml index 548a3ef0bd..fe4981d39a 100644 --- a/infra/docker/docker-compose.cypress.yml +++ b/infra/docker/docker-compose.cypress.yml @@ -44,7 +44,6 @@ services: - FRONTEND_OIDC_REDIRECT_URI=https://monitorfish.din.developpement-durable.gouv.fr - FRONTEND_SENTRY_DSN=https://a5f3272efa794bb9ada2ffea90f2fec5@sentry.incubateur.net/8 - FRONTEND_SHOM_KEY=rg8ele7cft4ujkwjspsmtwas - - VITE_SMALL_CHAT_SNIPPET= - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true # Even if we inject this env var, the value is not used (see cypress.config.ts) - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true ports: diff --git a/infra/docker/docker-compose.puppeteer.yml b/infra/docker/docker-compose.puppeteer.yml index 7387f0d3cd..78726430ae 100644 --- a/infra/docker/docker-compose.puppeteer.yml +++ b/infra/docker/docker-compose.puppeteer.yml @@ -60,7 +60,6 @@ services: - FRONTEND_OIDC_REDIRECT_URI=https://monitorfish.din.developpement-durable.gouv.fr - FRONTEND_SENTRY_DSN=https://a5f3272efa794bb9ada2ffea90f2fec5@sentry.incubateur.net/8 - FRONTEND_SHOM_KEY=rg8ele7cft4ujkwjspsmtwas - - VITE_SMALL_CHAT_SNIPPET= - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true ports: From 00a1c321596354b350ad36772957b7e939e6126f Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Wed, 20 Mar 2024 15:22:48 +0100 Subject: [PATCH 2/4] Inject small chat without Vite at runtime --- frontend/.env.example | 5 +++++ frontend/.env.local.defaults | 2 +- frontend/cypress/support/e2e.ts | 2 +- frontend/index.html | 4 ---- frontend/package.json | 2 +- frontend/src/App.tsx | 2 ++ frontend/src/env.d.ts | 1 + infra/configurations/frontend/.env.example | 7 ------- infra/configurations/frontend/.env.prod | 3 --- 9 files changed, 11 insertions(+), 17 deletions(-) delete mode 100644 infra/configurations/frontend/.env.example delete mode 100644 infra/configurations/frontend/.env.prod diff --git a/frontend/.env.example b/frontend/.env.example index a5a44bbe8e..a1e2887a8e 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -1,3 +1,8 @@ +################################################################################ +# Chat + +FRONTEND_SMALL_CHAT_SNIPPET= + ################################################################################ # Feature flags diff --git a/frontend/.env.local.defaults b/frontend/.env.local.defaults index f42355fae5..9ce2c57ee7 100644 --- a/frontend/.env.local.defaults +++ b/frontend/.env.local.defaults @@ -3,7 +3,7 @@ # We need to use a VITE_ env var to replace the HTML index file # see: https://vitejs.dev/guide/env-and-mode.html#html-env-replacement -VITE_SMALL_CHAT_SNIPPET= +FRONTEND_SMALL_CHAT_SNIPPET= ################################################################################ # Feature flags diff --git a/frontend/cypress/support/e2e.ts b/frontend/cypress/support/e2e.ts index 531db69e56..de8717c90f 100644 --- a/frontend/cypress/support/e2e.ts +++ b/frontend/cypress/support/e2e.ts @@ -117,7 +117,7 @@ beforeEach(() => { } ) - // PROD :: VITE_SMALL_CHAT_SNIPPET + // PROD :: FRONTEND_SMALL_CHAT_SNIPPET cy.intercept( { url: /^https:\/\/embed\.small\.chat\/.*/ }, { diff --git a/frontend/index.html b/frontend/index.html index ad93b5a08e..411ab2e055 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -13,10 +13,6 @@
- - - %VITE_SMALL_CHAT_SNIPPET% - diff --git a/frontend/package.json b/frontend/package.json index c79f220bc0..dab9f57d0b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,7 +9,7 @@ "npm": "10" }, "scripts": { - "build": "import-meta-env-prepare -x ./../infra/configurations/frontend/.env.example -p ./../infra/configurations/frontend/.env.prod && vite build && npm run bundle-sw", + "build": "vite build && npm run bundle-sw", "clean": "rm -Rf ./node-modules/.vite ./node-modules/build", "cypress:open": "cypress open --browser firefox --config-file ./config/cypress.config.ts --e2e", "dev": "import-meta-env-prepare -x ./.env.local.defaults && vite --port 3000", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8e32d224e2..0d6c044394 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -83,6 +83,8 @@ export function App({ auth }: AppProps) { + {/* This script is used to inject the chat */} + ' From 91df8cb3c944097cbe5eb49c76dbc4c8d9071dc9 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Wed, 20 Mar 2024 15:25:01 +0100 Subject: [PATCH 3/4] Add missing env var to docker compose --- infra/docker/docker-compose.cypress.yml | 1 + infra/docker/docker-compose.puppeteer.yml | 1 + infra/remote/docker-compose.yml | 1 + 3 files changed, 3 insertions(+) diff --git a/infra/docker/docker-compose.cypress.yml b/infra/docker/docker-compose.cypress.yml index fe4981d39a..e07332e1f3 100644 --- a/infra/docker/docker-compose.cypress.yml +++ b/infra/docker/docker-compose.cypress.yml @@ -46,6 +46,7 @@ services: - FRONTEND_SHOM_KEY=rg8ele7cft4ujkwjspsmtwas - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true # Even if we inject this env var, the value is not used (see cypress.config.ts) - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true + - FRONTEND_SMALL_CHAT_SNIPPET= ports: - 8880:8880 - 8000:8000 diff --git a/infra/docker/docker-compose.puppeteer.yml b/infra/docker/docker-compose.puppeteer.yml index 78726430ae..6c19303c9a 100644 --- a/infra/docker/docker-compose.puppeteer.yml +++ b/infra/docker/docker-compose.puppeteer.yml @@ -62,6 +62,7 @@ services: - FRONTEND_SHOM_KEY=rg8ele7cft4ujkwjspsmtwas - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true + - FRONTEND_SMALL_CHAT_SNIPPET= ports: - 8880:8880 - 8000:8000 diff --git a/infra/remote/docker-compose.yml b/infra/remote/docker-compose.yml index 41e7f0b356..eafa24e3ce 100644 --- a/infra/remote/docker-compose.yml +++ b/infra/remote/docker-compose.yml @@ -36,6 +36,7 @@ services: - FRONTEND_OIDC_ENABLED=$MONITORFISH_OIDC_ENABLED - MONITORFISH_OIDC_ENABLED=$MONITORFISH_OIDC_ENABLED - MONITORFISH_API_PROTECTED_API_KEY=$MONITORFISH_API_PROTECTED_API_KEY + - FRONTEND_SMALL_CHAT_SNIPPET= ports: - 8880:8880 - 8000:8000 From 0c556aeae92b1f83f409ff707d45e1c81f5ed0f5 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Wed, 20 Mar 2024 15:28:27 +0100 Subject: [PATCH 4/4] Add condition --- frontend/src/App.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0d6c044394..0b6db1a2e3 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -84,7 +84,9 @@ export function App({ auth }: AppProps) { {/* This script is used to inject the chat */} -