@d34dman/flowdrop 0.0.14 → 0.0.15

package/README.md

@@ -7,10 +7,12 @@ A visual workflow editor component library built with Svelte 5 and @xyflow/svelt
 - **Visual Workflow Editor**: Drag-and-drop interface for building node-based workflows
 - **Svelte 5 Components**: Modern, reactive components with runes
 - **Configurable API Client**: Flexible endpoint configuration for backend integration
+- **Runtime Configuration**: Build once, deploy anywhere with environment variables
 - **Node System**: Extensible node types with customizable configuration
 - **Real-time Updates**: Live workflow state management with stores
 - **Framework Agnostic**: Can be integrated into any web application
 - **TypeScript Support**: Full type definitions included
+- **Docker Ready**: Production-ready Dockerfile and Docker Compose configuration
 
 ## 📦 Installation
 
@@ -325,6 +327,53 @@ MIT
 - Create an issue in the project repository
 - Review the examples in `src/lib/examples/`
 
+## 🚢 Deployment
+
+FlowDrop uses **runtime configuration** instead of build-time environment variables, allowing you to build once and deploy to multiple environments.
+
+### Quick Start with Docker
+
+```bash
+# Copy environment file
+cp env.example .env
+
+# Edit .env with your configuration
+# Set FLOWDROP_API_BASE_URL to your backend API URL
+
+# Start with Docker Compose
+docker-compose up -d
+```
+
+### Environment Variables
+
+**Production (Runtime):**
+- `FLOWDROP_API_BASE_URL` - Backend API URL
+- `FLOWDROP_THEME` - UI theme (light/dark/auto)
+- `FLOWDROP_TIMEOUT` - Request timeout in milliseconds
+- `FLOWDROP_AUTH_TYPE` - Authentication type (none/bearer/api_key/custom)
+- `FLOWDROP_AUTH_TOKEN` - Authentication token
+
+**Development (Build-time):**
+- `VITE_API_BASE_URL` - Dev API URL (used only during `npm run dev`)
+
+### Build for Production
+
+```bash
+# Install dependencies
+npm ci
+
+# Build the application
+npm run build
+
+# Set environment variables and start
+export FLOWDROP_API_BASE_URL=http://your-backend:8080/api/flowdrop
+node build
+```
+
+For detailed deployment instructions, see:
+- [DEPLOYMENT.md](./DEPLOYMENT.md) - Complete deployment guide
+- [DOCKER.md](./DOCKER.md) - Docker quick start
+
 ---
 
 **FlowDrop** - Visual workflow editing for modern web applications

package/dist/config/runtimeConfig.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Runtime Configuration Service
+ *
+ * Provides runtime configuration fetched from the server.
+ * This allows the application to use environment variables set at deployment
+ * time rather than build time.
+ */
+export interface RuntimeConfig {
+    /** Base URL for the FlowDrop API */
+    apiBaseUrl: string;
+    /** Theme preference */
+    theme: "light" | "dark" | "auto";
+    /** Request timeout in milliseconds */
+    timeout: number;
+    /** Authentication type */
+    authType: "none" | "bearer" | "api_key" | "custom";
+    /** Authentication token */
+    authToken?: string;
+    /** Application version */
+    version: string;
+    /** Environment name */
+    environment: string;
+}
+/**
+ * Fetch runtime configuration from the server
+ *
+ * @param force - Force fetch even if cached
+ * @returns Promise resolving to runtime configuration
+ */
+export declare function fetchRuntimeConfig(force?: boolean): Promise<RuntimeConfig>;
+/**
+ * Get runtime configuration synchronously from cache
+ *
+ * @returns Cached runtime configuration or null if not loaded
+ */
+export declare function getRuntimeConfig(): RuntimeConfig | null;
+/**
+ * Clear the runtime configuration cache
+ */
+export declare function clearRuntimeConfigCache(): void;
+/**
+ * Initialize runtime configuration
+ * Should be called once when the application starts
+ *
+ * @returns Promise resolving to runtime configuration
+ */
+export declare function initRuntimeConfig(): Promise<RuntimeConfig>;

package/dist/config/runtimeConfig.js

@@ -0,0 +1,79 @@
+/**
+ * Runtime Configuration Service
+ *
+ * Provides runtime configuration fetched from the server.
+ * This allows the application to use environment variables set at deployment
+ * time rather than build time.
+ */
+/** Cached runtime configuration */
+let cachedConfig = null;
+/** Cache timestamp */
+let cacheTimestamp = 0;
+/** Cache duration in milliseconds (5 minutes) */
+const CACHE_DURATION = 5 * 60 * 1000;
+/**
+ * Fetch runtime configuration from the server
+ *
+ * @param force - Force fetch even if cached
+ * @returns Promise resolving to runtime configuration
+ */
+export async function fetchRuntimeConfig(force = false) {
+    const now = Date.now();
+    // Return cached config if available and not expired
+    if (!force && cachedConfig && now - cacheTimestamp < CACHE_DURATION) {
+        return cachedConfig;
+    }
+    try {
+        const response = await fetch("/api/config");
+        if (!response.ok) {
+            throw new Error(`Failed to fetch runtime config: ${response.statusText}`);
+        }
+        const config = (await response.json());
+        // Update cache
+        cachedConfig = config;
+        cacheTimestamp = now;
+        return config;
+    }
+    catch (error) {
+        console.error("Failed to fetch runtime configuration:", error);
+        // Return default configuration if fetch fails
+        const defaultConfig = {
+            apiBaseUrl: "/api/flowdrop",
+            theme: "auto",
+            timeout: 30000,
+            authType: "none",
+            version: "1.0.0",
+            environment: "production",
+        };
+        // Cache the default config to avoid repeated failed requests
+        if (!cachedConfig) {
+            cachedConfig = defaultConfig;
+            cacheTimestamp = now;
+        }
+        return cachedConfig || defaultConfig;
+    }
+}
+/**
+ * Get runtime configuration synchronously from cache
+ *
+ * @returns Cached runtime configuration or null if not loaded
+ */
+export function getRuntimeConfig() {
+    return cachedConfig;
+}
+/**
+ * Clear the runtime configuration cache
+ */
+export function clearRuntimeConfigCache() {
+    cachedConfig = null;
+    cacheTimestamp = 0;
+}
+/**
+ * Initialize runtime configuration
+ * Should be called once when the application starts
+ *
+ * @returns Promise resolving to runtime configuration
+ */
+export async function initRuntimeConfig() {
+    return fetchRuntimeConfig(true);
+}

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
 export type { ApiConfig } from './config/apiConfig.js';
 export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
+export * from './config/runtimeConfig.js';
 export * from './adapters/WorkflowAdapter.js';
 export * from './clients/ApiClient.js';
 export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';

package/dist/index.js

@@ -56,6 +56,7 @@ export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes
 export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
 export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
+export * from './config/runtimeConfig.js';
 // Export adapters
 export * from './adapters/WorkflowAdapter.js';
 // Export API client

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -99,6 +99,7 @@
 		"@storybook/addon-vitest": "^9.0.15",
 		"@storybook/sveltekit": "^9.0.15",
 		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -136,4 +137,4 @@
 		"svelte-5-french-toast": "^2.0.6",
 		"uuid": "^11.1.0"
 	}
-}
+}