Development environment

In this section we will explain a bit more the environment used for developing with mapstore
So, make sure to have the requested tool installed before moving on

See all requirements details here

Create a local project

To start working with MapStore we can create a new standard project
by following this Getting Started section
In particular the paragraphs Create Project and Include print module
but you can read all the remaining parts which are indeed helpful

Build the application

You can run build.sh script to run all the commands to compile front-end, back-end and pack everything in a deployable package.

./build.sh [version_identifier]

version_identifier is an optional identifier of the generated war that will be shown in the settings panel of the application. You can deploy the generated mapstore.war file (in web/target) to your favorite J2EE container (e.g. Tomcat).

By default there are two users in a new MapStore instance:

  • admin, a user with ADMIN role, with password admin

  • user, a user with USER role, with password user

You can use a running instance of MapStore in a tomcat as your own development back-end service by configuring appropriately the devServer proxy in the webpack configuration file.

Note

MapStore uses:

  • npm for JS dependencies

  • babel for compatibility with all browsers

  • webpack as module bundler (and dev server, with proxy)

  • karma as unit test runner

  • maven to Java dependencies and to build the final web application

Running build.sh you run basically runs:

npm install # download npm dependencies
npm run fe:build # build JS/HTML/CSS bundled
mvn install #download JAVA dependencies and build the final war
build procedure

npm run fe:build executes the part in blue, while mvn install the part in red. The copy of dist directory and *.html files made by maven allow to include the client in the final war file created in web/target.

Running unit tests

The project will provide you a setup ready for running your unit tests. This setup will run automatically the test contained in the files that ends with -test.js or -test.jsx. We use to store them in __tests__ folders by convention.

Here the commands to run the unit tests:

Run tests:

npm test

Run test with hot reload:

npm run test:watch

Note

You can change or reduce the number of tests executed by npm run test:watch by editing tests.webpack.js, changing the base path or the regex used for searching the files. See the main developer documentation here for more details

Running in Dev Mode

MapStore is a single page application, so you can run it in development mode using the webpack dev server. It uses a Java back-end. Both can run using the commands

npm start

This command runs both the back-end on port 8080 and the front-end on port 8081.

You can run the 2 services separately (even in 2 different terminal instances):

# Run back-end on port 8080
npm run be:start

# Run front-end on port 8081
npm run fe:start

Debugging the Backend

MapStore Back-end is a Java Application that uses Spring. So standard techniques to run and debug Java applications are valid.
For instance Eclipse remote debugging with Tomcat using JPDA
You can import the code of MapStore (or your custom project), geostore, etc… in Eclipse IDE by running:
mvn eclipse:clean eclipse:eclipse

This creates the projects that can be imported in the Eclipse IDE.

Note

You may not need to develop on MapStore back-end. You can use instead your favorite back-end framework, and integrating authentication using database and/or REST services (GeoServer integration uses this techniques). If you want, you can follow the debug section of developer guide for more information.