Developing with MapStore
Due to the dual nature of the project (Java backend and JavaScript frontend) building and developing using the MapStore framework requires two distinct set of tools
- Apache Maven for Java
- NPM for JavaScript.
A basic knowledge of both tools is required.
Developing and debugging the framework
To start developing the MapStore framework you have to:
- download developer tools and frontend dependencies locally:
npm install
After a while (depending on the network bandwidth) the full set of dependencies and tools will be downloaded to the node_modules sub-folder.
- start a development instance of the framework and example applications:
npm run examples
- or you can start a development instance without the examples:
npm start
Then point your preferred browser to http://localhost:8081.
The HomePage contains links to the available demo applications.
Frontend debugging
The development instance uses file watching and live reload, so each time a MapStore file is changed, the browser will reload the updated application.
Use your favourite editor / IDE to develop and debug on the browser as needed.
We suggest to use one of the following:
- Atom with the following plugins:
- editorconfig linter linter-eslint react lcovinfo minimap & minimap-highlight-selected highlight-line & highlight-selected
- Sublime Text Editor with the following plugins: Babel Babel snippets Emmet
Redux Dev Tools
When you are running the application locally using npm start
you can debug the application with redux dev tools using the flag ?debug=true
1 | http://localhost:8081/?debug=true#/?_k=c51bb5 |
It also integrates with the browser's extension, if installed.
This way you can monitor the application's state evolution and the action triggered by your application.
Back-end services debugging
By default npm start
runs a dev server connected to the mapstore 2 online demo as back-end.
If you want to use your own local test back-end you have to:
-
run
mvn jetty:run
- it makes run the mapstore back-end locally (port 8080), ìn memory db - By default 2 usersadmin
passwordadmin
user
with passworduser
-
Setup client to use the local back-end, apply this changes to
buildConfig.js
(at the devServer configuration)Javascript devServer: { proxy: { '/rest/': { target: "http://localhost:8080" }, '/proxy': { target: "http://localhost:8080", secure: false }, '/docs': { // this can be used when you run npm run doctest target: "http://localhost:8081", pathRewrite: { '/docs': '/mapstore/docs' } } } }, // ...
-
You have to run npm start to run mapstore client on port 8081, that is now connected to the local test back-end
You can even run geostore and http-proxy separately and debug them with your own IDE. See the documentation about them in their own repositories.
if you want to change the default port for mapstore back-end you have to edit pom.xml
in the root of the project:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- find the jetty-maven-plugin in pom.xml--> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.2.11.v20150529</version> <configuration> <!-- add these lines --> <httpConnector> <port>9999</port> <!-- port 9999 or whatever you want --> </httpConnector> <!-- ^^ end of lines to add --> <systemProperties> <systemProperty> <name>log4j.configuration</name> <value>log4j-test.properties</value> </systemProperty> </systemProperties> </configuration> </plugin> |
Frontend testing
To run the MapStore frontend test suite you can use:
npm test
You can also have a continuously running watching test runner, that will execute the complete suite each time a file is changed, launching:
npm run continuoustest
To run ESLint checks launch:
npm run lint
To run the same tests Travis will check (before a pull request):
npm run travis
More information on frontend building tools and configuration is available here