Integrate custom bpmn-js modeler in a web-app

Developers
1

Hi, I’m having issues on integrating the bpmn-js library in my web-app. The goal is to open a bpmn modeling container in the home page and to customise it by embedding the lib components in custom js code.

My project folder

www/
	folder1/
	folder2/
	bpmn-js/
		dist/
			app.js
		lib/
		node_modules/
		[..]
	js/
	index.html

index.html

<body style="background-color: white" class="has-fixed-nav">
<main>
	<div class="container ">
		<div class="row">
    			<div class="col l6 s12">
				<div class="col s12 ">
    					<ul id="moduleList" class></ul>
				</div>
			</div>
			<div class="col l6 s12">
				<div class="canvas" id="js-canvas" ></div>
			</div>
		</div>
	</div>
</main>
<script type="module" src="bpmn-js/dist/app.js"></script>
</body>

bpmn-js/dist/app.js

import BpmnModeler from 'bpmn-js/lib/Modeler';

import diagramXML from '../resources/newDiagram.bpmn';

var container = $('#js-drop-zone');

// BpmnModeler è def in Modeler.js. che estende BaseModeler

var modeler = new BpmnModeler({

container: '#js-canvas'

});

[..]

When I load index.html, the console

Uncaught TypeError: Error resolving module specifier “bpmn-js/lib/Modeler”. Relative module specifiers must start with “./”, “../” or “/”.

I tried to edit the Modeler path to ./bpmn-js/lib/ but I gt

GET http://localhost:8080/bpmn-js/dist/bpmn-js/lib/Modeler 404 not found

I’m sure the errors come from some issue in how I deal with folder paths in my includes, but I can’t figure out how to proceed, newby :slight_smile:

Any help is warmly welcome.

Thank you in advance

2

Hi,

have you seen the bundling example? I believe this would solve your issue.

Best

Maciej

1 Like
3

The bundling example was useful indeed, THANK YOU for your help.
I just have an error when bundling the app.js file, this line

import diagramXML from './resources/newDiagram.bpmn';

makes the bundling fail with the following error

$ ./node_modules/.bin/webpack ./src/app.js -o public/app.bundled.js --mode development

asset main.js 1.9 MiB [emitted] (name: main)

runtime modules 1.13 KiB 5 modules

orphan modules 40 bytes [orphan] 1 module

modules by path ./node_modules/diagram-js/lib/ 568 KiB 187 modules

modules by path ./node_modules/bpmn-js/lib/ 484 KiB 131 modules

modules by path ./node_modules/diagram-js-direct-editing/ 15.1 KiB 3 modules

modules by path ./node_modules/object-refs/ 7.26 KiB

./node_modules/object-refs/index.js 97 bytes [built] [code generated]

./node_modules/object-refs/lib/refs.js 4.43 KiB [built] [code generated]

./node_modules/object-refs/lib/collection.js 2.74 KiB [built] [code generated]

modules by path ./src/ 4.22 KiB

./src/app.js 3.31 KiB [built] [code generated]

./src/resources/newDiagram.bpmn 932 bytes [built] [code generated] [1 error]

13 modules

ERROR in ./src/resources/newDiagram.bpmn 1:0

Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

> <?xml version="1.0" encoding="UTF-8"?>

| <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">

| <bpmn2:process id="Process_1" isExecutable="false">

@ ./src/app.js 2:0-53

It does not like the .bpmn file.

Any help would be really appreciated.

4

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

5

ok, but my issue is dealing with webpack bundling which fails if in the src/app.js I import a .bpmn file…

6

What does your Webpack configuration look like? You need an appropriate loader to load BPMN diagram files.

For example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.bpmn$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};
3 Likes
7

THANK YOU! That did the trick

1 Like