Getting Started with @industream/flowmaker-flowbox-ui

This toolkit generates and runs the frontend config harness from sdk/config/flowbox-ui templates.

Fast start

npm install @industream/flowmaker-flowbox-ui
npx flowbox-ui init
npx flowbox-ui add my-config
npx flowbox-ui start my-config
npm run build

[NOTE!rocket/FLOWBOX-INIT MAPPING] flowbox-ui init is the scaffold step often referred to as “flowbox-init” in worker frontend setup discussions.

What init creates

flowbox-ui init copies templates/base/* into your frontend folder and installs required dev dependencies.

Expected baseline:

frontend/
├── package.json
├── vite.config.js
└── src/

After flowbox-ui add my-config:

frontend/
└── src/
    └── my-config/
        ├── main.js
        └── ConfigForm.svelte

Build output:

config/config.my-config.jsbundle.js

[WARNING!shield/COMPONENT NAME CONTRACT] start and build both assume your component folder name under src/<name>/ is stable. Renaming folders without updating commands leads to missing entry errors.

Minimum runtime entry

import ConfigForm from './ConfigForm.svelte';
import { FlowBoxSvelteUI } from '@industream/flowmaker-flowbox-ui';

register('box-config-frontend', new FlowBoxSvelteUI(ConfigForm));

Reference

• sdk/config/flowbox-ui/README.md
• sdk/config/flowbox-ui/templates/component/main.js
• sdk/config/flowbox-ui/cli/index.js