How to install BPMN.io Modeler

Developers General
1

Hello Community,

I am a new Developer and want to use the bpmn.io javascript library for a plugin in an ERP-System.
The framework only allows javascript and css-files, so i am trying to get the core-functions out of the bpmn.io library to modify it for the ERP-Plugin-Solution.

I cant find a tutorial for the installation progress for a development environment. The “Walktrough” isn´t really helpfull. I didn´t use ES6 modules, NPM or Webpack before, because i am a java developer.

My Problems:

  1. There is no Tutorial or Documentation
  2. I downloaded the pre-packaged Version and the NPM-Version. I did manage to make the Modeler visible with the NPM Version, but i am confused about the project setup i am getting (Everything is bundled in Folder like they are a project itself (bpmn-font, bpmn.js, bpmn-moddle and so on)

Are there any helpfull links for beginners you could provide?
Thank you!

2

@Mr_Bac0n

See this link.

In bpmn-js examples this example used prepackaged mode of bpmn-js.

3

Thank you for your answer. I did already test this example and its working, but i think i will need the “nodejs-version”, because we want to customize the Modeler. It should be like the Camunda Modeler (Desktop App).So with the Propertypanel included, but a selfmade Panel for the ERP-System properties.

4

For this features, yes, you need node version of bpmn-js.

See this example

5

Like in the original post, i did manage to get the project via npm and i made it visible. But unfortunately i dont understand the project setup and building itself, so i can start to customize the modeler.

Now it looks like this in the test environment.
safe

6

As you already said, you will need to get into the bundling topic (e.g. via webpack or rollup, or other…) to create custom bpmn-js extensions for the browser, due to it’s ES6 features. This example could help you. The result of this will be a bundles javascript file which you can include in your javascript application.

7

Ok, thank you. I will try to learn more about bundling and ES6 features. My problem is, that these examples are “finished” and there is no starting point. But it seems, that i have to learn step by step and have to connect my earned knowledge.

8

Hello everyone,

I would like to install BPMN.IO, and I hope the software can be used simultaneously by multiple people. I have the following questions:

  1. Is a Linux server that is accessible over the network sufficient for this?
  2. Can the software be used by multiple people at the same time?
  3. How is the software installed? I tried installing it following these steps, but unfortunately, it was unsuccessful, so I would appreciate your support:
  • Logged in as root on the server.
    • Entered the following commands in the console:
  • apt-get update && apt-get upgrade
  • apt install nodejs npm
  • npm install bpmn-js
  • git clone https://github.com/bpmn-io/bpmn-js.git -b v17.11.1
  • npm install
  • npm run all

When starting npm, I receive the following message:

css

Code kopieren

0 verbose cli /usr/bin/node /usr/bin/npm
1 info using npm@9.2.0
2 info using node@v20.16.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/root/.npmrc Completed in 1ms
11 timing config:load:user Completed in 1ms
12 timing config:load:file:/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:setEnvs Completed in 1ms
15 timing config:load Completed in 9ms
16 timing npm:load:configload Completed in 9ms
17 timing npm:load:mkdirpcache Completed in 1ms
18 timing npm:load:mkdirplogs Completed in 0ms
19 verbose title npm run all
20 verbose argv "run" "all"
21 timing npm:load:setTitle Completed in 1ms
22 timing config:load:flatten Completed in 3ms
23 timing npm:load:display Completed in 4ms
24 verbose logfile logs-max:10 dir:/root/.npm/_logs/2024-10-16T14_57_19_505Z-
25 verbose logfile /root/.npm/_logs/2024-10-16T14_57_19_505Z-debug-0.log
26 timing npm:load:logFile Completed in 7ms
27 timing npm:load:timers Completed in 0ms
28 timing npm:load:configScope Completed in 0ms
29 timing npm:load Completed in 24ms
30 silly logfile start cleaning logs, removing 1 files
31 timing config:load:flatten Completed in 1ms
32 silly logfile done cleaning log files
33 timing command:run Completed in 9ms
34 verbose stack Error: Missing script: "all"
34 verbose stack
34 verbose stack Did you mean this?
34 verbose stack     npm ll # List installed packages
34 verbose stack
34 verbose stack To see a list of scripts, run:
34 verbose stack   npm run
34 verbose stack     at RunScript.run (/usr/share/nodejs/npm/lib/commands/run-script.js:98:13)
34 verbose stack     at async module.exports (/usr/share/nodejs/npm/lib/cli.js:133:5)
35 verbose cwd /root
36 verbose Linux 6.11.0-8-generic
37 verbose node v20.16.0
38 verbose npm  v9.2.0
39 error Missing script: "all"
39 error
39 error Did you mean this?
39 error     npm ll # List installed packages
39 error
39 error To see a list of scripts, run:
39 error   npm run
40 verbose exit 1
41 timing npm Completed in 54ms
42 verbose code 1
43 error A complete log of this run can be found in:
43 error     /root/.npm/_logs/2024-10-16T14_57_19_505Z-debug-0.log
9

@benci Please do not necrobump old topics. Instead link to this thread from new topic.

For general context on how to use our tools (front-end libraries mostly), please consult with the tool READMEs and our comprehensive set of examples.