Bpmn-js with typescript and npm


#1

Hello there,

I am currently building and angular2 application (TypeScript) and want to embed the bpmn viewer, where I have hit a hard wall. I should say I have quite some experience writing software, but I am completely new to web development and lack a lot of the necessary technical background that I seem to need in order to solve this on my own.

What I ultimately want is to have a Viewer reference on typescript level that I can work with. But these are my conceptual problems:

  • I cannot import the library on code level. I installed it via npm, but there are no type definitions (d.ts file) and so the usual workarounds to “import” the library on typescript level fail. I can’t just declare a var : any aimed at Viewer from Viewer.js, because typescript cannot handle the “require” statements contained therein. Is there anyone who has ever done this?
  • I do not understand the structure of the library as it is. The code example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-commonjs) creates a “BpmnViewer” handle via “var BpmnViewer = require(‘bpmn-js’);”. Does this refer to the stuff defined in Viewer.js? What kind of magic does “require” wield at this point? How can I mimick this behaviour by hand?

Sorry for such low-level questions, but being able to use bpmn-js in upcoming angular2 projects would certainly be quite cool… :slight_smile:


#2

Hi Fbo,

Please find the attached URL for your reference.Please follow the same steps to generate bundled.js file using Node.js and import bundled.js in your web application.

Thanks
-Prameela


#3

Ok, after spending another day sorting my thoughts and understanding the structure and technicalities of the problem a bit better, let me rephrase:

This is what I’m doing right now:

  • I followed the angular2 tutorials (https://angular.io/docs/ts/latest/quickstart.html describes the general setup)
  • npm is used as package manager, as well as to provide a live development environment where both the typescript compiler (tsc) and the extra server are watching for file changes
  • I installed bpmn-js using npm

What my problem is:

  • I cannot simply include and use e.g. the Viewer.js, since it contains require statements

What I need / want:

  • Apparently I should use browserify on the entire bpmn-js node_module. Is there a working example of how to do that and include that in my build setup?

Cheers


#4

Hi Fbo,

Yes i have one sample web application.Please share your email Id .I will send war file and the commands used to generate bundled.js through Node.js.

Thanks
-Prameela


#5

Hi @prameela,

seems you beat me to it by two minutes. Thanks for your answer!

How can I send you a private message in here?

Cheers


#6

Hi Fbo,

I Don’t know how to send private messages here.I am unable to attach text files and war files here so i asked your email.

Please use below code for your reference.

<div class="message intro">
  <div class="note">
    Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
  </div>
</div>

<div class="message error">
  <div class="note">
    <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

    <div class="details">
      <span>cause of the problem</span>
      <pre></pre>
    </div>
  </div>
</div>

<div class="canvas" id="js-canvas"></div>
<div id="js-properties-panel"></div>

Thanks
-Prameela


#7

and include bundled.js in your JSP/HTML like this

               <script src="resources/js/minifiedfile.js"></script>

#8

Thank you! I am not so thrilled about putting my email address here… maybe you could put the files somewhere on dropbox for an hour and share the link here?


#9

For personal messages you can click on the avatar (The round symbol) in the web frontend of the forum and select ‘message’.

Cheers, Ingo


#10

Hello Ingo,

yes, that seems straight-forward enough, but I can’t see any message option anywhere. Are there different privilege levels for forum users? Am I a low-level minion?


#11

Hi Fbo,

Please find the attached screenshot.

Thanks
-Prameela


#12

Maybe you havn’t logged in before?


#13

I realize this discussion has gone off the rails a bit, but I just have to defend my honor now:

I seem to be logged in, I can post… ?


#14

N.B. @fbo Can now send messages.


#15

Unfortunately, my problem is still not solved.
I downloaded the commonjs pizza example (https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-commonjs) and took a look, however I do not see a path how to apply the strategy to my situation.

The problem is that my application is written in typescript (angular2), and everything is a bit different:
All javascript code is in my case generated via tsc, and I can’t simply “browserify” my entire app like it is done in the example. Well, probably I could, but as far as I see this would collide with the angular2 way of setting up the application structure. Is there a way to browserify the bpmn-js library itself? Then I could treat it at least hackishly as a static JS library and simply grab the stuff I need (hopefully…)

Has anyone ever done this? When I attempt to do that I end up with a 30k lines .js containing dozens of conflicting module.exports statements.

Cheers


#16

Is something like bower version of the library is what you are looking for?

Bower.io
GitHub

Cheers,
Vladimir


#17

Yes,

exactly. Tried the bower approach today and got it working. My build system is a horrific mix of npm and bower now, but I’ll deal with that later and pretend for now that all is well. Learned a lot about the wonderful world of javascript and typescript, anyway.

Thanks for your help!


#18

Hi Vladimir.

I had a look at your suggested approach with https://github.com/bpmn-io/bower-bpmn-js
BpmnViewer is not found, though Viewer is found. Will they be the same?

Thanks.
Bard


#19

Hi Bard,

Not sure what exactly do you mean regarding the Viewer…
Please have a look on this bower example.

You can use this simple web server to run it:

# clone example repo & go to the example root directory
npm i -g bower
npm i -g http-server
bower i
hs 

Then just open http://127.0.0.1:8080/app to see an example.

Cheers,
Vladimir


How to upgrade old version to new version bpmnio?
#20

Thank you Vladimir!

Yes it did work. :slight_smile:

You actually fixed my main problem, how to show the Viewer in an Angular app.
What I did was to cut´n paste the components from the Simple Bower example into a fresh Angular-Seed project.

I´ve created a public project on https://github.com/baardl/Angular1-Bpmn-js in case someone else run into Angular issues.

Thanks again.
Bard