The HTML5 framework bundles the ui-core & ui-bootstrap to render ManyWho Flows in the browser. The framework is built upon some standard front end technologies including:
| Library | |
|---|---|
| React | Rendering of the various UI components & containers |
| Bootstrap | Styling and some component behavior e.g. tabs |
| Bootswatch | Themes |
| LogLevel | Logging |
| Moment | Date & Time manipulation |
| Numbro | Number formatting |
| Socket.io | Real-time collaboration |
To build the HTML5 player you will need to have nodejs, gulp and typings installed.
Install Dependecies:
npm install
cd ui-core
npm install
cd ../ui-bootstrap
npm install
You will need to start the watchers in the ui-core & ui-bootstrap directories with:
gulp watch --build="../ui-html5/build"
Alternatively if you don't require the UI to listen for changes to the assets you can run the dev-* tasks in ui-core & ui-bootstrap once instead.
You can start the dev server by running:
npm start
This will auto refresh the browser when any changes are made to the static resource files (JS, CSS, HTML, etc).
You can then initialize a Flow with:
http://localhost:3000?tenant-id=<tenant-id>&flow-id=<flow-id>&flow-version-id=<flow-version-id>
Or join a Flow with:
http://localhost:3000?tenant-id=<tenant-id>&join=<state-id>
If you don't have a State ID you can get it entering manywho.state.getState().id in the browser console once the Flow is running.
Contributions are welcome to the project - whether they are feature requests, improvements or bug fixes! Refer to CONTRIBUTING.md for our contribution requirements.
The UI framework is released under our shared source license: https://manywho.com/sharedsource