I want to install a project from github where I also need to do some npm installs. https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel , part of https://github.com/bpmn-io/bpmn-js-examples.
Where should/shall I put the contents of the zipfile? web/static/vendor? I’m not a node specialist; when I execute the npm installs named in the readme of https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel , where can I expect the node_modules to appear in the phoenix project, and will that be the place where they belong?
NPM will read the package.json that is in the root folder of your Phoenix project. It will then install all required NPM modules (including Brunch?) in the ./node_modules folder. So this is a direct subfolder of the root folder of the Phoenix project.
I believe that ./web/static/vendor is indeed the location to store the contents of the zipfile, but I do not use Node packages that often myself, so I hope someone more knowledgeable can confirm/deny this.
1 Like
You shouldn’t download the zip from Github directly. If I understand correctly, you want to use bpmn-js along with its extension bpmn-js-properties-panel. Both are available as npm packages.
At the root of your project, you need to install both of them using npm:
$ npm install --save bpmn-js bpmn-js-properties-panel
This will add both packages to your package.json and the global node_modules directory. After that, both bpmn-js and bpmn-js-properties-panel will be accessible to be require'd in your app.js via brunch.
You will then need to follow the usage instruction at https://github.com/bpmn-io/bpmn-js-properties-panel#usage. The HTML snippet and the first JS snippet on that section should give you the basic working app (put the HTML on your Phoenix view template and the JS on your app.js).
If you also need to use the Camunda properties (whatever that is, I’m sorry I’m not familiar with the domain), you will need to add the deps via npm:
$ npm install --save camunda-bpmn-moddle
And then follow the instruction stated here: https://github.com/bpmn-io/bpmn-js-properties-panel#use-with-camunda-properties.
The https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel project is just an example of the usage with more features (check out app/index.html and app/index.js).
I hope this helps.
1 Like
Thanks Wiebe-Marten and Bobby,
Bobby’s comment was spot on, I can now open diagrams. I had it running outside phoenix already (did the npm installs etc. and used the github sources, I needed sources generated with npm instaal and grunt in a dist folder also, see https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel), but here my node / phoenix knowledge failed.
The former generated index.js + stylesheets from the dist folder I copied to phoenix.
