# Setup of a GeoNode MapStore Client in development mode

This section shows how to setup a GeoNode MapStore Client in development mode to get a local environment where is possible to debug the frontend client.

Here are the steps on how to setup this environment:

Clone the geonode-mapstore-client repository

```shell
cd /opt
sudo mkdir client
sudo chown -Rf $USER: client/
cd client/
git clone --recursive https://github.com/GeoNode/geonode-mapstore-client.git -b 4.1.x
```

Install the geonode-mapstore-client repository just cloned in edit mode inside the `my_geonode` virtual environment

```shell
workon my_geonode
cd /opt/client/geonode-mapstore-client/
pip uninstall django_geonode_mapstore_client
pip install -e .
```

Restart the geonode project

```shell
cd /opt/geonode-project/my_geonode/src
./paver_dev.sh stop_django
./paver_dev.sh start_django
```

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`

```shell
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
```

Close and then re-open the terminal. Then install the `node` version 14.7.0 with

```shell
nvm install 14.7.0
```

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

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

```shell
npm -v
```

output: 6.14.7

Create an .env file in the client directory

```shell
touch /opt/client/geonode-mapstore-client/geonode_mapstore_client/client/.env
```

Edit the .env file

```shell
vim /opt/client/geonode-mapstore-client/geonode_mapstore_client/client/.env
```

Paste these variables in the .env file

```
DEV_SERVER_PROTOCOL=http
DEV_SERVER_HOSTNAME=localhost
DEV_TARGET_GEONODE_HOST=localhost:8000
```

Install all package dependencies with the command

```shell
cd /opt/client/geonode-mapstore-client/geonode_mapstore_client/client
npm install
```

Start the development application locally

```shell
npm start
```

Now open the url `http://localhost:8081/` to work on the client.
Adding the debug=true to the development url is possible to log in the browser dev tool all the actions dispatched by the frontend (`http://localhost:8081?debug=true/`)

**Note**
    the protocol of the local development url change based on the target instance of GeoNode defined in the .env file with the variable `DEV_SERVER_PROTOCOL`

#### [Next Section: Structure of the client: directories and files](003_CLIENT_STRUCTURE.md)