From 1a190fb61c140d0e7d7010e4972382952fdf503a Mon Sep 17 00:00:00 2001 From: teallarson Date: Fri, 11 Apr 2025 13:56:43 -0400 Subject: [PATCH 1/2] embedded local dev script --- README.md | 31 +++++++------ demo/package.json | 1 + demo/scripts/dev.js | 106 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 125 insertions(+), 13 deletions(-) create mode 100644 demo/scripts/dev.js diff --git a/README.md b/README.md index 384c658..2c57039 100644 --- a/README.md +++ b/README.md @@ -24,18 +24,6 @@ yarn install - `/src` - The widget library source code - `/demo` - A demo application showcasing the widget usage -## Development - -The project includes a demo application to showcase and test the widget. To run the demo: - -```bash -cd demo -pnpm install -pnpm dev -``` - -The demo server will start at `https://localhost:3003`. You may need to accept the self-signed certificate warning in your browser. - ## Building the Library To build the widget library: @@ -50,7 +38,7 @@ The built files will be in the `dist` directory. To use this library, you will first need to fetch an Airbyte Embedded token. You should do this in your server, though if you are simply testing this locally, you can use: -``` +```bash curl --location '$AIRBYTE_BASE_URL/api/public/v1/embedded/widget' \ --header 'Content-Type: application/json' \ --header 'Accept: text/plain' \ @@ -101,6 +89,23 @@ You can fetch an Airbyte Embedded token using the curl request example above. You can then run the demo app using `pnpm dev` and access a very simple example UI at `https://localhost:3003` in your browser. +## Development + +To develop with the widget running against a locally running version of the Airbyte webapp, you can run + +```bash +cd demo +pnpm dev:local +``` + +and add the following to a .env file within `demo`: + +```env +VITE_AB_EMBEDDED_TOKEN="your_embedded_token" +AB_WEBAPP_URL="your_locally_running_webapp_url" +VITE_AB_ADMIN_TOKEN="your_instance_admin_auth_token" # optional, allows for developing with a longer lived token +``` + ## Publishing This repository is configured to publish to npmjs.org whenever: diff --git a/demo/package.json b/demo/package.json index 75ba31f..87dfaf7 100644 --- a/demo/package.json +++ b/demo/package.json @@ -3,6 +3,7 @@ "private": true, "scripts": { "dev": "vite", + "dev:local": "node scripts/dev.js", "test": "playwright test", "test:ui": "playwright test --ui" }, diff --git a/demo/scripts/dev.js b/demo/scripts/dev.js new file mode 100644 index 0000000..d6dd5fd --- /dev/null +++ b/demo/scripts/dev.js @@ -0,0 +1,106 @@ +const { spawn } = require("child_process"); +const fs = require("fs"); +const path = require("path"); +const dotenv = require("dotenv"); + +// Load environment variables from .env file +const envPath = path.resolve(__dirname, "../.env"); +dotenv.config({ path: envPath }); + +// Get or set default WEBAPP_URL from environment +const WEBAPP_URL = process.env.AB_WEBAPP_URL || "https://local.airbyte.dev"; +console.log(`Using WEBAPP_URL: ${WEBAPP_URL}`); + +// Function to decode base64 (Node.js replacement for browser's atob) +function atob(str) { + return Buffer.from(str, "base64").toString("binary"); +} + +// Function to parse and manipulate the embedded token +function manipulateEmbeddedToken(token) { + try { + console.log("Intercepting and manipulating embedded token..."); + + // Make sure the base64 string is properly padded + const padded = token.padEnd(token.length + ((4 - (token.length % 4)) % 4), "="); + + // Replace URL-safe characters + const base64 = padded.replace(/-/g, "+").replace(/_/g, "/"); + + const decodedToken = JSON.parse(atob(base64)); + + // Log original token data + console.log("Original widget URL:", decodedToken.widgetUrl); + + // Extract and modify the widget URL + const originalWidgetUrl = new URL(decodedToken.widgetUrl); + + const newWidgetUrl = new URL( + `${WEBAPP_URL}${originalWidgetUrl.pathname.toString()}?${originalWidgetUrl.searchParams.toString()}` + ); + + decodedToken.widgetUrl = newWidgetUrl.toString(); + + console.log("Modifying token with admin token from .env"); + // Allow optionally overriding the embedded scoped token with an instance admin one + decodedToken.token = process.env.AB_ADMIN_TOKEN ?? decodedToken.token; + + // Log the modified widget URL + console.log("Modified widget URL:", decodedToken.widgetUrl); + + // Return the manipulated token + return btoa(JSON.stringify(decodedToken)); + } catch (error) { + console.error("Error manipulating token:", error); + return token; // Return original token if there's an error + } +} + +// Get the current embedded token +const originalToken = process.env.VITE_AB_EMBEDDED_TOKEN || ""; + +// Manipulate the token +const manipulatedToken = manipulateEmbeddedToken(originalToken); + +// Create a temporary .env file with the manipulated token +const tempEnvPath = path.resolve(__dirname, "../.env.local"); +const envContent = `VITE_AB_EMBEDDED_TOKEN="${manipulatedToken}"`; + +fs.writeFileSync(tempEnvPath, envContent); +console.log("Created temporary .env.local with manipulated token"); + +// Start the Vite dev server +console.log("Starting Vite dev server..."); +const viteProcess = spawn("pnpm", ["dev"], { + stdio: "inherit", + shell: true, + cwd: path.resolve(__dirname, ".."), + env: { + ...process.env, + VITE_AB_EMBEDDED_TOKEN: manipulatedToken, + }, +}); + +// Handle process exit +process.on("SIGINT", () => { + console.log("Cleaning up..."); + + // Clean up temporary .env file + if (fs.existsSync(tempEnvPath)) { + fs.unlinkSync(tempEnvPath); + console.log("Removed temporary .env.local file"); + } + + viteProcess.kill("SIGINT"); + process.exit(); +}); + +viteProcess.on("exit", () => { + // Clean up temporary .env file + if (fs.existsSync(tempEnvPath)) { + fs.unlinkSync(tempEnvPath); + console.log("Removed temporary .env.local file"); + } + + process.exit(); +}); From d16bb3ba5cb0d3054c1709985265442b86e8decd Mon Sep 17 00:00:00 2001 From: Joey Marshment-Howell Date: Wed, 16 Apr 2025 16:01:15 +0200 Subject: [PATCH 2/2] Update demo/scripts/dev.js --- demo/scripts/dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/scripts/dev.js b/demo/scripts/dev.js index d6dd5fd..d069900 100644 --- a/demo/scripts/dev.js +++ b/demo/scripts/dev.js @@ -43,7 +43,7 @@ function manipulateEmbeddedToken(token) { console.log("Modifying token with admin token from .env"); // Allow optionally overriding the embedded scoped token with an instance admin one - decodedToken.token = process.env.AB_ADMIN_TOKEN ?? decodedToken.token; + decodedToken.token = process.env.VITE_AB_ADMIN_TOKEN ?? decodedToken.token; // Log the modified widget URL console.log("Modified widget URL:", decodedToken.widgetUrl);