Frontend toolchains

NPM is the Node package manager, where Node is used in the frontend toolchains.

Note that we have “two frontends”:

  1. The frontend toolchain for Open Forms (= the backend)

  2. The toolchain for the Open Forms SDK (= the frontend)

Common tooling

The common tooling applies to both Open Forms and the SDK.

NVM

You should use nvm (or similar tools) to manage your local Node and npm versions.

From the root of the project:

nvm install  # one time only
nvm use  # to use the configured node version in .nvmrc

Prettier

We don’t like endless discussions about code formatting. For that, we leverage Prettier to perform the formatting for us. The CI pipelines run the checkformat scripts, and locally you can format the code using the format script.

It is recommended to configure your editor or a pre-commit hook to run the prettier formatting when a .prettierrc.json config file is available.

Currently, Prettier is configured to format .js and .scss files.

Managing translations

Translations are extracted from the code with helper scripts, and after the translations have been edited in the JSON files, you can compile them via the compilation helper scripts. We currently check both source and compiled messages into version control. See Managing translations for detailed instructions, as we’re currently re-organizing the tooling here.

Cheat sheet:

  • SDK: yarn makemessages and yarn compilemessages

  • Backend: ./bin/makemessages_js.sh and ./bin/compilemessages_js.sh

  • Libraries: ./bin/makemessages.sh and (yarn|npm run) compilemessages

There is also a bin/find_untranslated_js.py script to point out potentially missed translations, as the JSON file format is not too friendly to keep track of everything.

.editorconfig

Indent sizes and other code formatting rules are specified in the .editorconfig file, which should be supported by most editors. Possibly you need to install a plugin for it to be activated though.

SDK toolchain

See the SDK Storybook for more technical documentation.

Yarn

In the SDK we use yarn rather than NPM. There is no particular version pinned at the moment (since the lockfile format did not recently change). The node version is pinned in .nvmrc though.

The Yarn CLI is almost the same as NPM.

Storybook

We are shifting isolated/component development and interaction testing towards storybook. Make sure to check it out and fill the gaps in documentation!