Trying to set up IDE, overlooking something?

Developers General
1

Hi Guys, I’m Raas, new to BPMN.io, experienced with C#, SQL and JS (clientside), new to node.js however.

After playing around with the quick start seed project I see bpmn.io as part of my solution, so I wanted to give a go at the properties-panel/extended, so decided to setup my own bpmn.io environment.

I have Visual Studio 2015 and node.js installed on my system.
created a new empty web project. copied in everything from the sourcecode package into the solution so that package.json is in the root off my project.

run npm install , took about 5 minutes, but all fine.
run npm run all, took about 3 minutes, all fine.

(at this point I’m at a bit of a loss here, had expected to see some viewer/modeler.html pages, but could be me that I was expecting the wrong thing.)

So, being new to this, I though add a modeler.html page to it, (from the seed app I started with in the beginning), let it use index.js
Run the app. it immediately starts complaining about ‘require.js’, did a google search, found something that I needed to add the node.js runtime path to my project somewhere, couldn’t find it.
Another solution sugested to add ‘require.js’ to the solution, so I did… got a bit furter, but now it has something to do with preloading the correct files…

So… I got the feeling that I’m drifting away from what I should be doing/is needed to get my first ‘hello world’ example up and running.

So the quesion is… what do I need to do after npm run all to get a working bpmn.io modeler application that I can dive into to adjust a bit and have extra meta information in some extra properties panel

(my ultimate objective is to add ISA95/MES data to the model, so that bpmn.io can directly be used to change factory production processes)

Thanks for your attention.

BR.
Raas

2

Hi @raas!

I suppose you’ve not built complex libraries / frameworks for the web before.

Similar to may tools you may be used to such as AngularJS, jQuery, React our toolkits are comprised of may different parts. We provide these pre-bundled in different variants for you (cf. bower-bpmn-js). Consuming our toolkits this way allows you to not care about the require thing.

If you need to have high degree of control regarding which components to include, which additional things to add and which things to skip you’re better of building the library yourself using a module bundler such as browserify or Webpack. We offer an example to guide you through this process.

Regarding IDE integration, you’d need to ensure that your IDE has proper support for JavaScript / resolution of node_modules and CommonJS if you’d like to get some degree of assistance. Don’t know about Visual Studio here. Some colleagues report Visual Studio Code is quite good.

Unfortunately we’re not at that magic bullet stage yet so that our libraries can be configured with a few lines to just do what everyone wants them to do. Depending on your requirements you’d need to gain some degree of understanding regarding our toolkits and how to extend them. For bpmn-js we provide a quite extensive list of examples that should help you to get started.

Hope this helps!

3

Thanks for your reply @nikku.

No never built them myself, only integrated them, anyway, I’m more of a backend (MSSQL) programmer than frontend, but trying to expand because I’m interested in this bpmn. I learn by doing, and sometimes the beginnings can be hard, but was looking in the wrong direction.

Your remark about Visual Studio Code lead me into the right direction, installed it, looked at some node.js tutorials and started with bpmn io.

Dowloaded it, installed it, tested it and now with npm run dev I’m able to load the Karma webserver which actually displays a page with an enourmous amount of modellers.

So I think installation succeeded and it’s working.

What I need now is to figure out how I can use this library that I compiled myself into my webapplication.

So, although not entirely there yet, progress has been made.

Thanks

4

Glad to hear.

Execute npm run distro to bundle the folder ../bower-bpmn-js/dist (relative to your bpmn-js directory).

The folder contains various variants of the toolkit (modeler, viewer, …) to be included into a HTML page.

5

Thanks @nikku, I will have a go at this!

6

Yep, this seems to work out perfectly fine.
build and replaced the library I was using from your seed project (the easy/ready made one) with the one I build myself (just as-is, no modifications, just wanted to test the cycle) and the BPMN modeler just works as well as with the seed project.

So IDE setup, I can finally begin reading up on what’s possible.
Great,

Thanks for your help @nikku

1 Like