This example showcases how add and bundle bpmn-js along with a node-style web application using Webpack.
This example uses bpmn-js to embed the pizza collaboration diagram into a web application.
Install bpmn-js via npm
npm install --save bpmn-js
Use it in your application
import BpmnViewer from 'bpmn-js';
var viewer = new BpmnViewer({
container: '#canvas'
});
viewer.importXML(pizzaDiagram).then(function(result) {
const { warnings } = result;
console.log('success !', warnings);
viewer.get('canvas').zoom('fit-viewport');
}).catch(function(err) {
const { warnings, message } = err;
console.log('something went wrong:', warnings, message);
});Bundle the src/app.js file for the browser with Webpack:
webpack ./src/app.js -o public/app.bundled.js --mode development
To learn about more bundling options, checkout the webpack-cli documentation.
Note: You may use another ES module aware bundler such as Rollup, too. Browserify may also be used but must be properly configured via a global babelify transform.
Install the project dependencies via
npm install
To create the sample distribution in the public folder run
npm run all
MIT