How to install BPMN.io Modeler

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!

@Mr_Bac0n

See this link.

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

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.

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

See this example

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

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.

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.