The Demo Server

Due to the use of symbolic names in import statements, the demos do not work when launched from the file system or served through a regular web server. In order to be consumable for the browser they need to be resolved to actual filenames. There are several ways this can be achieved. Almost all popular build toolchains can be used to this end, but many of them are quite a bit too heavy-weight to be used to solve just this tiny task. Therefore, we recommend accessing the demos through the included demo server, a local Vite server which serves the demo applications. It resolves the symbolic paths in the import statements to the actual ones, which cannot be performed natively by browsers before Import Mapscan be used.

If you do not want to use or depend on our simple demo server, you can use tools like webpack, rollup, Parcel, etc. or faster, more lightweight tools like @web/dev-server. There are demos in the package that show how to configure each of these tools, but if you use the JS Module version of yFiles it’s very straightforward and the respective tool-specific documentation should all work out-of-the box with yFiles for HTML.

Prerequisites

The demo server requires Node.js and npm to be installed. To install Node.js go to https://nodejs.org, download the installer that is suitable for your system, and install it. (Node.js distributions from https://nodejs.org already include npm.) We recommend installing the 'LTS' or the 'Current' version (the demo server requires at least npm version 7 and thus Node.js version 15 and newer; some of the demos use features only available in Node.js version 16.16.0 and newer).

The demo server requires Node.js to be installed. To install Node.js go to https://nodejs.org, download the installer that is suitable for your system, and install it. Both the 'LTS' and the 'Current' version will work fine.

Running the Demo Server

You can start the demo server either with the corresponding configuration in the WebStorm project, with the corresponding task in the Visual Studio Code workspace, or by running the following command in the yFiles for HTML root folder:

npm start

This installs the necessary dependencies in the node_modules directory and starts the server. When the server is up and running, its welcome page should open in your browser. If it doesn’t, please direct your browser to http://localhost:4242/README.html.

To start a demo or tutorial, follow the links in the landing page. Because the demo server serves all application files, they reside in the same domain which resolves the cross-domain issue that some demos suffer in certain browsers.