From a4ad67d15872e55e9dd9a65b81bb89cbb9578fd4 Mon Sep 17 00:00:00 2001 From: Fernando Giorgetti Date: Mon, 22 Jun 2026 18:38:41 -0300 Subject: [PATCH 1/3] feat: Build time variable used to embed into other apps --- README.md | 1 + src/config/api.ts | 6 ++++- vite.config.ts | 56 +++++++++++++++++++++++++--------------------- webpack.config.mjs | 4 +++- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index d1a3adc5..400b2b41 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ To run the e2e tests, you'll need to configure the following environment variabl - `OBSERVER_URL`: The console uses a real network observer. - `API_VERSION`: Part of the url api. **Note**: Do not include a leading slash (/) in the value of API_VERSION. +- `SKUPPER_CONSOLE_EMBED`: When set to `true`, the console uses relative paths for all resources (API calls, scripts, CSS, images), allowing it to be embedded as static files in other applications. This enables the console to work at any URL path (e.g., `/console/my-customer/api/v2alpha1`). (ie: SKUPPER_CONSOLE_EMBED=true yarn build) - `BRAND_APP_LOGO`: Customize the logo for the build. - `BRAND_FAVICON`: Customize the favicon for the build. - `USE_MOCK_SERVER`: Use predefined static data to display the console. (ie: USE_MOCK_SERVER=true yarn build) diff --git a/src/config/api.ts b/src/config/api.ts index 8f2b007c..dc2ba984 100644 --- a/src/config/api.ts +++ b/src/config/api.ts @@ -3,8 +3,12 @@ import { RestResources } from '../API/REST.enum'; /* Base URL used to connect to the Network Observer backend. If not explicitly set via environment variables, it defaults to the current host. +When SKUPPER_CONSOLE_EMBED is true, uses relative paths to allow embedding in other applications. */ -const BASE_URL_NETWORK_OBSERVER = process.env.OBSERVER_URL || `${window.location.protocol}//${window.location.host}`; +const isEmbedMode = process.env.SKUPPER_CONSOLE_EMBED === 'true'; +const BASE_URL_NETWORK_OBSERVER = isEmbedMode + ? '..' // Use relative path when embedded + : process.env.OBSERVER_URL || `${window.location.protocol}//${window.location.host}`; export const API_VERSION = process.env.API_VERSION ? `/${process.env.API_VERSION}` : '/api/v2alpha1'; export const API_URL = `${BASE_URL_NETWORK_OBSERVER}${API_VERSION}`; diff --git a/vite.config.ts b/vite.config.ts index 6edd2cb0..8e22cd57 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,33 +1,39 @@ import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; -export default defineConfig(() => ({ - plugins: [react()], +export default defineConfig(() => { + const isEmbedMode = process.env.SKUPPER_CONSOLE_EMBED === 'true'; - define: { - 'process.env.OBSERVER_URL': JSON.stringify(process.env.OBSERVER_URL || ''), - 'process.env.BRAND_APP_LOGO': JSON.stringify(process.env.BRAND_APP_LOGO || ''), - 'process.env.API_VERSION': JSON.stringify(process.env.API_VERSION || ''), - 'process.env.USE_MOCK_SERVER': JSON.stringify(process.env.USE_MOCK_SERVER), - 'process.env.MOCK_ITEM_COUNT': JSON.stringify(process.env.MOCK_ITEM_COUNT), - 'process.env.MOCK_RESPONSE_DELAY': JSON.stringify(process.env.MOCK_RESPONSE_DELAY) - }, + return { + plugins: [react()], - base: './', + define: { + 'process.env.OBSERVER_URL': JSON.stringify(process.env.OBSERVER_URL || ''), + 'process.env.BRAND_APP_LOGO': JSON.stringify(process.env.BRAND_APP_LOGO || ''), + 'process.env.API_VERSION': JSON.stringify(process.env.API_VERSION || ''), + 'process.env.SKUPPER_CONSOLE_EMBED': JSON.stringify(process.env.SKUPPER_CONSOLE_EMBED || ''), + 'process.env.USE_MOCK_SERVER': JSON.stringify(process.env.USE_MOCK_SERVER), + 'process.env.MOCK_ITEM_COUNT': JSON.stringify(process.env.MOCK_ITEM_COUNT), + 'process.env.MOCK_RESPONSE_DELAY': JSON.stringify(process.env.MOCK_RESPONSE_DELAY) + }, - server: { - port: 3000 - }, + // Use relative paths for all assets when in embed mode, otherwise use root path + base: isEmbedMode ? './' : '/', - test: { - globals: true, - environment: 'jsdom', - setupFiles: ['./vite.setup.ts'], - coverage: { - reporter: ['text', 'lcov'], - all: false, - include: ['**/src/**'], - exclude: ['**/src/config/**'] + server: { + port: 3000 + }, + + test: { + globals: true, + environment: 'jsdom', + setupFiles: ['./vite.setup.ts'], + coverage: { + reporter: ['text', 'lcov'], + all: false, + include: ['**/src/**'], + exclude: ['**/src/config/**'] + } } - } -})); + }; +}); diff --git a/webpack.config.mjs b/webpack.config.mjs index 0e7be551..2f024e75 100644 --- a/webpack.config.mjs +++ b/webpack.config.mjs @@ -15,6 +15,7 @@ const defineEnvVariables = () => 'process.env.OBSERVER_URL': JSON.stringify(process.env.OBSERVER_URL || ''), 'process.env.BRAND_APP_LOGO': JSON.stringify(process.env.BRAND_APP_LOGO || ''), 'process.env.API_VERSION': JSON.stringify(process.env.API_VERSION || ''), + 'process.env.SKUPPER_CONSOLE_EMBED': JSON.stringify(process.env.SKUPPER_CONSOLE_EMBED || ''), 'process.env.USE_MOCK_SERVER': JSON.stringify(process.env.USE_MOCK_SERVER || ''), 'process.env.MOCK_ITEM_COUNT': JSON.stringify(process.env.MOCK_ITEM_COUNT || ''), 'process.env.MOCK_RESPONSE_DELAY': JSON.stringify(process.env.MOCK_RESPONSE_DELAY || '') @@ -124,7 +125,8 @@ const config = { path: path.join(ROOT, '/build'), filename: '[name].[contenthash].min.js', chunkFilename: 'js/[name].[chunkhash].min.js', - publicPath: '/', + // Use relative paths when SKUPPER_CONSOLE_EMBED is true, otherwise use root path + publicPath: process.env.SKUPPER_CONSOLE_EMBED === 'true' ? './' : '/', clean: true }, optimization: optimizationConfig, From 1794f02a86020922ad6656193f0698d67aa93060 Mon Sep 17 00:00:00 2001 From: Fernando Giorgetti Date: Tue, 23 Jun 2026 10:43:59 -0300 Subject: [PATCH 2/3] feat: Updated release workflows to include the embed console --- .github/workflows/dev-release.yml | 14 +++++++++++++- .github/workflows/release.yml | 24 ++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/.github/workflows/dev-release.yml b/.github/workflows/dev-release.yml index 96622339..775d7e2b 100644 --- a/.github/workflows/dev-release.yml +++ b/.github/workflows/dev-release.yml @@ -40,6 +40,17 @@ jobs: run: | cd build/ && tar -zcvf ../console.tgz --exclude='./data' . + - name: Build Project (Embed) 🚧 + run: | + rm -rf build/ + SKUPPER_CONSOLE_EMBED=true yarn build + env: + CI: false + + - name: Package Build (Embed) 📦 + run: | + cd build/ && tar -zcvf ../console-embed.tgz --exclude='./data' . + - name: Get commit info 📋 id: commit_info run: | @@ -59,7 +70,7 @@ jobs: gh release delete development --yes || true # Create new release - gh release create development console.tgz \ + gh release create development console.tgz console-embed.tgz \ --title "Development Build" \ --notes "$(cat < Date: Tue, 23 Jun 2026 16:48:24 -0300 Subject: [PATCH 3/3] docs: Clarify SKUPPER_CONSOLE_EMBED behavior and add build:embed script --- README.md | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 400b2b41..b5ce633c 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ To run the e2e tests, you'll need to configure the following environment variabl - `OBSERVER_URL`: The console uses a real network observer. - `API_VERSION`: Part of the url api. **Note**: Do not include a leading slash (/) in the value of API_VERSION. -- `SKUPPER_CONSOLE_EMBED`: When set to `true`, the console uses relative paths for all resources (API calls, scripts, CSS, images), allowing it to be embedded as static files in other applications. This enables the console to work at any URL path (e.g., `/console/my-customer/api/v2alpha1`). (ie: SKUPPER_CONSOLE_EMBED=true yarn build) +- `SKUPPER_CONSOLE_EMBED`: When set to `true`, the console uses relative paths for all resources (API calls, scripts, CSS, images), allowing it to be embedded as static files in other applications. This enables the console to work at any URL path, e.g., `/console/my-site/index.html`, which would require that the Collector's APIs are available through `/console/my-site/api/v2alpha1`. (ie: yarn build:embed) - `BRAND_APP_LOGO`: Customize the logo for the build. - `BRAND_FAVICON`: Customize the favicon for the build. - `USE_MOCK_SERVER`: Use predefined static data to display the console. (ie: USE_MOCK_SERVER=true yarn build) diff --git a/package.json b/package.json index fbf68a1d..15f10945 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "scripts": { "build": "tsc && webpack --config webpack.config.mjs", + "build:embed": "SKUPPER_CONSOLE_EMBED=true yarn build", "build:preview": "vite preview", "start": "vite --host", "test": "yarn test:watch --run",