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:¶
In your settings set
DEBU_STATIC=True
. This will load unminified assets in your template.Start the development server with
paver start
.Use
grunt watch
to watch all less files for change.Change styling in ./geonode/static/geonode/less
If our changes are as expected create a new build with
grunt development
(files are not minimized) orgrunt production
(files are minimized)
Example 2 – add/update a new library:¶
In your settings set
DEBU_STATIC=True
. This will load unminified assets in your template.yarn add angular@1.7
vim static_dependencies.json
Edit the file and add your dependency to its fitting destination. For example, assets.min.jsCheck if some Django template (for example, base.html) includes the file and add it or adjust the version
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’)