Set up a dev environment

Set up a local copy of HSLayers-NG

• Clone the repository with git clone https://github.com/hslayers/hslayers-ng.git into a folder of your choice. This will be your main working directory.

!!OUTDATED from here on. TODO: Update to v3 and higher

HSLayers-NG itself is just a library so in order to see your new features running, you must use HSLayers-NG in a project. You can create a project of your own from scratch, as described in Getting started, or clone an existing one – check the hslayers repositories.

Let's use the Foodie project as an example here:

• git clone https://github.com/hslayers/project-foodie.git into some other folder on your computer.
• Run npm install in the project's folder (project-foodie in this case). This will install all dependencies of the project into the node_modules (see https://docs.npmjs.com/cli/install for more detailed info).

Now the project uses the HSLayers-NG version which is available in npm, which is generally the last public release version. But we want it to use the HSLayers-NG version which we have cloned into our machine in the first step. We can achieve this by using symbolic links (or "symlinks").

• Go back to your HSLayers-NG folder and run npm link.
• Then navigate to the project's folder again and run npm link hslayers-ng.

Now the project will use the version of HSLayers-NG you have locally on your computer (see https://docs.npmjs.com/cli/link for more detailed info).

Use Webpack

If you have isolated the Bootstrap styles already (see Bootstrap isolation), then you can run webpack.

• Run webpack --config webpack.dev.js --progress --watch in your project's folder.
• TIP: If your terminal does not recognize webpack command, then do npx webpack --config webpack.dev.js --progress --watch or install webpack globally. For more info see https://stackoverflow.com/a/52971462/3019419 .

Then the webpack starts listening to any saved changes you make in your files and will pack them into a static code in the /static/ subdirectory. First compilation usually takes some time, but then it is lightning-fast.

• TIP: If you encounter any troubles with non-found modules or so, try manually deleting hslayers-ng from the node_modules of your project and then run npm link hslayers-ngagain.

Review changes

To see the results of your work, run the HTTP server which will serve the bundled files.

• In a new terminal window, in the project's folder: node_modules/http-server/bin/http-server
• Then open one of the IP addresses listed by the http-server in a web browser and see the beauty 🎉
• TIP: If you are on Windows, you will likely get one of the following errors by your browser: Corrupted Content Error (Mozilla Firefox) or ERR_INVALID_REDIRECT (Google Chrome) or something weird in Edge. This is a known bug in http-server. See issue #525 there for possible work-arounds.

Once you are all set up, just dive into the code and start cooking. And read Development Guidelines to avoid future complications ❣️