Frontend development
====================


Knowledge of handling node/npm is required.

The GeoNode frontend dependencies can be found in ./geonode/static. To
manage dependencies, we recommend the use of yarn package manager (https://yarnpkg.com/lang/en).


First steps:
------------

``yarn install``

Installs the required libraries to ./node_modules

``yarn install <package>@version [--dev]``

Installs a package with a defined version. Using ``–dev`` installs a
dependency that is only available for the build process (see: package.json devDependencies).

``yarn remove <package>``

Removes a package.

``yarn outdated``

Shows version information.

``yarn why <package>``

Get information on why this package was installed.

**For further information on how to install or use please visit the official yarn documentation.**

File/Folder overview:
---------------------

``./static_dependencies.json``

includes all dependencies associated with each
file. For example all files which should be minified to assets.min.js are named as values.
All files that should be copied to lib folder (for DEBUG_STATIC) are values of key `other_dependencies` and so on. Before you can use a dependency it has to be added to package.json by use of yarn.

``./Gruntfile.js``

reads the dependencies from static_dependencies.json
and contains all workflows.

geonode/static/geonode
~~~~~~~~~~~~~~~~~~~~~~

The ./geonode folder contains GeoNode’s stylesheets and javascript
files. The CSS files are generated via less. CSS files should therefore
never be changed directly but it’s corresponding less file. Further this folder
should never be deleted!

geonode/static/lib
~~~~~~~~~~~~~~~~~~

The ./lib folder contains all the third-party files.
This folder can be deleted as it will be
fully generated by use of grunt ``development|production``


Example 1 – Change styling:
^^^^^^^^^^^^^^^^^^^^^^^^^^^

1. In your settings set ``DEBUG_STATIC=True``. This will load unminified assets in your template.
2. Start the development server with ``paver start``.
3. Use ``grunt watch`` to watch all less files for change.
4. Change styling in ./geonode/static/geonode/less
5. If our changes are as expected create a new build with
   ``grunt development`` (files are not minimized) or
   ``grunt production`` (files are minimized)

Example 2 – add/update a new library:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

1. In your settings set ``DEBUG_STATIC=True``. This will load unminified assets in your template.
2. yarn add angular@1.7
3. ``vim static_dependencies.json`` Edit the file and add your dependency to its fitting
   destination. For example, assets.min.js
4. Check if some Django template (for example, base.html) includes the file and add it or adjust the version
5. use `grunt production` to build the package

**For further tasks have a look at gruntfile.js or ask for help in the development mailing list**

.. note:: Please make maintainers work easier and add a message to your commit why a library has been added. (For example, commit -m 'select2 added for permissions form on layer detail page')