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’)