flow-builder provides an open source frontend for authoring flow interoperability project specification compliant flows.
npm install @floip/flow-builder
git clone git@github.com:FLOIP/flow-builder.git
cd flow-builder
yarn install
yarn serve
`And visit localhost:8080/trees/create to create a new flow or localhost:8080/trees/1/edit to edit an example flow.
Note,
yarn serve will also hot reload for development.Development
$3
| Command | Description |
|---------------------------------|-----------------------------------------------------------------|
| yarn install | Install dependencies |
| yarn serve | Serve the app, and provide hot reload for development |
| yarn build-bundle | Compiles and minifies for production & for other consumer apps |
| yarn resolve-conflicting-builds | Resolves dist/ conflicts and rebuilds the application |
| yarn update-flow-runner | Interactive update for flow-runner |
| yarn deep-update-flow-packages | Making sure the flow project dependencies are updated correctly |
| yarn lint | Lints and fixes files |Check the
packages.json's scripts to see more available commands.$3
| Route definition place | Description |
|---------------------------------|----------------------------------------------------------------------------------------------------------------------|
| builder.config.json | a list of all needed routes, used by the src\lib\mixins\Routes.ts helper |
| src\lib\mixins\Routes.ts | A route helper for all vue component to allow us calling something like
this.route('routeKey.something', ...) |
| vue.config.js | Mocked endpoints to simulate backend response (webpack-dev-server stub routes), eg: /audiofiles/upload |
| src\router\* | Vue router, to map routes & views |
| docs\routes\openapi\routes.yaml | OpenAPI endpoints definition to explain complex endpoints |
| docs\routes\markdown\routes.md | Generated doc from the routes.yaml after calling yarn md-docs |For UI standalone usage, the stub routes under
/vue.config.js are providing needed responses.Therefore, if we want to integrate the
flow-builder repo into other projects (consumer apps):
- we should create equivalent routes (and their associated controllers) inside the project which will use the flow-builderTo integrate with/embed it in a Host App (consumer apps), find here a configuration Guide:
See here
$3
#### Steps on the community flow-builder repo:
- create the feature branch
- commit changes
- run yarn build-bundle to build the app for the consumer app
- commit changed files
- push#### Steps on the consumer app
Let's assume we already have added the
"@floip/flow-builder" as part of our dependencies. That means, we have something like this in our packages.json
`
"dependencies": {
...
"@floip/flow-builder": "https://github.com/FLOIP/flow-builder.git#master",
...
}
`
We just need to:
- create
- go to the packages.json
- create a feature branch (recommended to use the same name as in the flow-builder community), eg: 'feature/my-branch'
- update the @floip/flow-builder by changing this "@floip/flow-builder": "https://github.com/FLOIP/flow-builder.git#master" into "@floip/flow-builder": "https://github.com/FLOIP/flow-builder.git#feature/my-branch"
- run yarn install. Note that this will update the yarn.lock
- then serve the app as defined in the packages.json (eg: yarn watch)If we made a change on the community flow-builder branch and our
packages.json is already referring to that branch, then we just need to update it:
- run yarn up -i @floip/flow-builder
- hit enter to choose the 1st option
- then serve the app$3
Just imitate the above section "How to work on the flow-builder repo, and consume from an other app (consumer app)?", by:
- changing the dependency repo to @floip/flow-runner
- changing the consumer repo to floip/flow-builder$3
This is related to Flow.js library which is providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
- On standalone UI, we import the Flow like import Flow from '@flowjs/flow.js'; and use it inside the file like new Flow(...)
- But when we integrate the flow-builder into other project, we may need to call a global Flow like new global.Flow(...).$3
1. You only need to serve it with yarn storybook:serve
2. Then follow the provided url, by default it should be http://localhost:6006/ (but in case the port 6006 is non-available, it may use different one)(TODO: fix the storyshots testing)
$3
app.config.json is intended to support the configuration needed when integrating this flow building ui into a larger platform or application while builder.config.json` is intended to configure those features which are core to the flow builder - the blocks enabled, languages or content types supported etc.(More details to follow.)
You may also go directly to the following link: https://https://floip.github.io/flow-builder/#/flows/new
!Flow 1
You may also go directly to the following link: https://floip.github.io/flow-builder/#/flows/import
Importing JSON file
!Flow 6
Pasting JSON file directly
!Flow 7
Edits using the builder will then be reflected in the flow JSON in this panel and vice versa.