Fetch a bpmn model into a viewer fails (Trying to follow the bpmnjs walkthrough)

Developers
1

Hello,

I try to follow the BPMN js walkthrough but I have some difficulties. Your assistance would be priceless for me.
I use the following code:

<html>
<head>
<!-- replace CDN url with local bpmn-js path -->
<script src="https://unpkg.com/bpmn-js@8.2.0/dist/bpmn-navigated-viewer.development.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

</head>

<body>
	<!-- BPMN diagram container -->
	<div id="canvas"></div>
	
	<script>

		// the diagram you are going to display
		const bpmnXML="test.bpmn";

		// BpmnJS is the BPMN viewer instance
		const viewer = new BpmnJS({ 
			container: '#canvas' 
		});



		function fetchDiagram(url) {
			return fetch(url).then(response => response.text());
		}

		async function run() {
			const diagram = await fetchDiagram(bpmnXML);

			try {
				await viewer.importXML(diagram);
				viewer.get('canvas').zoom('fit-viewport');
				console.log("successful");
			} catch (err) {
				console.log("unsuccessful");
			}
		}

		run();
	</script>
</body>


</html>

When I run my page, I receive the following error:
image

How can I handle it??

Thank you in advance.

2

Hi @Nikos,

I ran into the same issue last week. After searching the internet about “Chromium and CORS” and trying some options to start the browser with additional parameters without success, I gave up and changed the diagram to be loaded from an url like here: Hello World

var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

// load external diagram file via AJAX and open it
$.get(diagramUrl, openDiagram, 'text');

Hope this helps, Ingo

2 Likes
3

Thank you Ingo for letting me know.
Yes indeed, I followed what you mentioned and it works.

What about if I want to see my own model? Should I upload my model somewhere and then put this link?

If I use a model from GitHub, then I receive the following message:
image

4

Hi @Nikos,

I left it as it is and started with the second step of the walkthrough: Roll your own modeler (with npm). I’m still working on it, I have to catch up some basic node and npm development steps.

Another option could be to put your index.html file and your diagram onto a web server and load the page via http.

Hope this helps, Ingo

5

thanks for your help and your advice Ingo

6

If you open a HTML page directly from a file browsers prevent you from loading local file resources via JavaScript.

In order to load your own diagrams remotely, i.e. via the fetch API you’d need to serve both the diagrams and your HTML page on a webserver. This is why we only load actual remote assets, not local files in our examples, too.

Not sure what is your environment but maybe you have a webserver locally setup already (Apache, …)? If you have NodeJS, you may very well spin up a quick local webserver in your current working directory like this:

npx sirv-cli --dev .
1 Like
7

thanks @nikku,
since I do noy have any experience with npm, do you recommend any online sources to get started??

8

If you do not have any experience, I think it is best to not dive into that.

There is a comprehensive guide from Mozilla on how to serve local files via a webserver. That should be your starting point.

1 Like