# 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`:

[https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)

Install `nvm`

```cmd
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

```cmd
source ~/.bashrc
nvm install 14.7.0
```

Now test the `node` and `npm` versions with 

```cmd
node -v
```
output: v14.7.0

```cmd
npm -v
```

output: 6.14.7

## Development

- [Develop with a remote GeoNode instance (js client)](#develop-with-a-remote-geonode-instance)

- [Develop with a local GeoNode instance (python django + js client)](#develop-with-a-local-geonode-instance)

### 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](https://docs.geonode.org/en/master/install/advanced/core/index.html#ubuntu-20-04lts) 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

```cmd
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

```cmd
git commit -m "my custom changes to the project"
```

Compile your bundle with

```cmd
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

```cmd
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
```