Develop custom branches with GeoNode MapStore Client
This section demonstrates how to set up the GeoNode-mapstore-client to work on custom branches. It should only take into account the advanced/complex changes that the previously described customization could not support.
Prerequisites
Working with MapStore requires node and npm to be installed on your virtual machine. We suggest installing nvm to be able to use the correct version of node and npm:
Install nvm
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Close and then re-open the terminal. Then install the node version 14.7.0 with
source ~/.bashrc
nvm install 14.7.0
Now test the node and npm versions with
node -v
output: v14.7.0
npm -v
output: 6.14.7
Development
Develop with a remote GeoNode instance (js client)
Develop with a local GeoNode instance (python django + js client)
Develop with a remote GeoNode instance (docker)
This setup allows to develop only the GeoNode MapStore javascript applications.
Clone the repository in your workspace:
git clone --recursive https://github.com/GeoNode/geonode-mapstore-client.git
Navigate to the client directory
cd geonode-mapstore-client/geonode_mapstore_client/client/
Create an .env file in the client directory
touch .env
Add following variables to the .env file (example)
DEV_SERVER_PROTOCOL=http
DEV_SERVER_HOSTNAME=localhost
DEV_TARGET_GEONODE_HOST=localhost
Install all package dependencies with the command
npm install
Start the development application locally
npm start
Now open the url https://localhost:8081/ to work on the client.
Note: the protocol of the local development url change based on the target instance of GeoNode defined in the .env file
Develop with a local GeoNode instance
This setup allows to develop both the django and the GeoNode MapStore javascript applications including templates.
In order to develop with GeoNode MapStore Client, we need a running local instance of GeoNode. You could follow this documentation to setup a local instance of GeoNode (Ubuntu/WSL only)
Following steps are based on the assumption that there is a running local instance of GeoNode at the url http://localhost:8000/ inside the virtual environment called geonode:
Clone the repository in your workspace:
git clone --recursive https://github.com/GeoNode/geonode-mapstore-client.git
Navigate to the cloned directory
cd geonode-mapstore-client/
Activate the virtual environment of your local geonode instance
workon geonode
Install the django application in edit mode to replace the default used by geonode
pip install -e .
Navigate to the client directory
cd geonode_mapstore_client/client/
Create an .env file in the client directory
touch .env
Add following variables to the .env file
DEV_SERVER_PROTOCOL=http
DEV_SERVER_HOSTNAME=localhost
DEV_TARGET_GEONODE_HOST=localhost:8000
Install all package dependencies with the command
npm install
Start the development application locally
npm start
Now open the url http://localhost:8081/ to work on the client.
Build the client to make it available in a static directory
Create a new branch with
git checkout -b my_custom_branch
Apply all the changes to the js code, python files, or templates and see the update at http://localhost:8081/
Commit your changes
git commit -m "my custom changes to the project"
Compile your bundle with
npm run compile
The compile process will move all the bundles and static files from geonode-mapstore-client/geonode_mapstore_client/client/ to geonode-mapstore-client/geonode_mapstore_client/static/
Commit the compiled bundle
git commit -m "update client bundle"
Finally, push your branch to a remote repository.
Update the requirement.txt of the geonode-project
It is now possible to install the custom branch inside the geonode-project by updating the requirement.txt to point to a specific branch of the django_geonode_mapstore_client. Here is an example:
-e git+https://github.com/{my-fork}/geonode-mapstore-client.git@{commit|branch}#egg=django_geonode_mapstore_client