feat: Build time variable used to embed into other apps

.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 <<EOF
           🚧 **Development Build** - Latest build from main branch
@@ -73,6 +84,7 @@ jobs:
 
           ## Download
           - [console.tgz](https://github.com/${{ github.repository }}/releases/download/development/console.tgz)
+          - [console-embed.tgz](https://github.com/${{ github.repository }}/releases/download/development/console-embed.tgz)
 
           ## Latest Commit
           ${{ steps.commit_info.outputs.message }}

.github/workflows/release.yml

@@ -37,6 +37,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: Create Draft Release ✨
         id: create_release
         uses: actions/create-release@v1
@@ -48,6 +59,8 @@ jobs:
           body: |
             Skupper-console is available as a tar ball:
             - console.tgz
+            The embeddable skupper-console is available as a tar ball:
+            - console-embed.tgz
             Issues fixed in this release:
             - https://github.com/skupperproject/skupper-console/issues?q=is:issue%20milestone:${{ env.RELEASE_VERSION }}
           draft: true
@@ -62,3 +75,14 @@ jobs:
           asset_path: ./console.tgz
           asset_name: console.tgz
           asset_content_type: application/tar+gzip
+
+      - name: Upload Release Asset (Embed) ⬆️
+        id: upload-release-asset-embed
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./console-embed.tgz
+          asset_name: console-embed.tgz
+          asset_content_type: application/tar+gzip

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-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)

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",

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}`;
 

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/**']
+      }
     }
-  }
-}));
+  };
+});

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,