This monorepo hosts frontend packages and applications of the GlobalFishingWatch ecosystem.
All of them availables with the @globalfishingwatch/ prefix:
| api-client | JS library to simplify GFW API login and resources fetch |
| api-types | API typescript schema definitions |
| data-transforms | Set ot shared tools for data transformations |
| datasets-client | A set of utils for handling api datasets |
| dataviews-client | A set of utils for merge, combine and consume api dataviews into the apps |
| deck-layer-composer | Map integration of the deck-layers |
| deck-layers | Deck classes for GFW layers |
| deck-loaders | Deck loaders for GFW layers |
| i18n-labels | GFW shared translations |
| ocean-areas | Small library to get ocean area / eez names by viewport or by text search |
| react-hooks | Set of hooks to use libraries easily in react |
| timebar | Timebar component, not many more to say |
| ui-components | Reusable atoms components kit |
| api-portal | Api documentation portal |
| data-download-portal | The place to download datasets |
| platform | Platform entry point (includes fishing-map app) |
| platform-e2e | Playwright e2e testing for the map |
| image-labeler | Labeling tool for satellite images |
| port-labeler | Labeling tool for ports |
| track-labeler | Labeling tool for tracks |
| user-groups-admin | Tool to manage user groups with ease |
To create a new application using a template with sidebar + map + timebar just run:
| config | Shared generic build config |
| linting | Define eslint prettier and stylelint configurations |
We maintain our own forks of Mapbox GL to handle gridded temporal data (see temporalgrid branches on both repos)
See: From WebGL triangles to Dataviews - Organizing visualization of data at GFW
The repo uses pnpm workspaces; npm and yarn are blocked by an only-allow pnpm preinstall hook.
Node is pinned in .nvmrc — use nvm use (or any version manager that reads it).
The exact pnpm version is pinned in package.json "packageManager" (currently 12.3.1).
pnpm 12 ships as a native executable, so Corepack and Homebrew cannot provide it.
Install it once with the official installer, which downloads the signed platform binary and puts it on your PATH:
npx get-pnpm 12 # or: curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=12 sh -Only the major is pinned in that command; pnpm then honours the exact version from
"packageManager" on its own. If you had pnpm 11 from Homebrew, remove it (brew uninstall pnpm)
so it stops shadowing the new binary — a v11 on PATH cannot launch v12 and every pnpm command
in the repo fails. Later upgrades are just pnpm self-update <version>.
For all packages:
pnpm add [package] -wOnly for a specific package
pnpm --filter [project-name] add [package]To install all workspace dependencies:
pnpm installNx handles every app or library by its own project.json file, see for example platform:
nx start [app-name]To ensure git flow process, master branch will be protected to force opening PR to every change desired. For now, the only one strong recommendation is to tag every PR to prepare the changelog automatically.
To test all packages builds process run, useful to test everything works well before publishing.
nx build [app-name]Reproduces the CI image build locally (same root Dockerfile the GitHub Actions workflow uses):
./scripts/test-ci-build-platform.sh # build only
./scripts/test-ci-build-platform.sh --push # build and pushUse libs-release workflow
https://gateway.api.dev.globalfishingwatch.org/swagger?version=3
To replicate the prod build and serve it locally:
nx serve [app-name]To generate the release notes you can run
nx release changelog [version] -i all -p [project] --from @globalfishingwatchapp/[app]@[prev-tag] --tagVersionPrefix @globalfishingwatchapp/[app] --dry-run.