{"id":35637047,"url":"https://github.com/energinet-datahub/greenforce-frontend","last_synced_at":"2026-06-09T08:01:20.156Z","repository":{"id":36963258,"uuid":"399470875","full_name":"Energinet-DataHub/greenforce-frontend","owner":"Energinet-DataHub","description":"GreenForce monorepo for the DataHub and Energy Origin frontends. Part of Energinet DataHub.","archived":false,"fork":false,"pushed_at":"2026-06-02T09:17:25.000Z","size":1151826,"stargazers_count":80,"open_issues_count":138,"forks_count":18,"subscribers_count":14,"default_branch":"main","last_synced_at":"2026-06-02T09:24:40.966Z","etag":null,"topics":["angular","dotnet","energy","energy-origin","green-energy-hub","monorepo","nx","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Energinet-DataHub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE.md","maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2021-08-24T13:13:11.000Z","updated_at":"2026-06-02T08:52:00.000Z","dependencies_parsed_at":"2026-01-16T08:14:46.137Z","dependency_job_id":"501148e6-3b12-4e99-8564-3953a633326e","html_url":"https://github.com/Energinet-DataHub/greenforce-frontend","commit_stats":{"total_commits":2981,"total_committers":83,"mean_commits":35.91566265060241,"dds":0.7943643072794364,"last_synced_commit":"4a0912b1e91ef699de1425f632bfd55ccac6c2c7"},"previous_names":[],"tags_count":8824,"template":false,"template_full_name":null,"purl":"pkg:github/Energinet-DataHub/greenforce-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Energinet-DataHub%2Fgreenforce-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Energinet-DataHub%2Fgreenforce-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Energinet-DataHub%2Fgreenforce-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Energinet-DataHub%2Fgreenforce-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Energinet-DataHub","download_url":"https://codeload.github.com/Energinet-DataHub/greenforce-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Energinet-DataHub%2Fgreenforce-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34096955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dotnet","energy","energy-origin","green-energy-hub","monorepo","nx","typescript"],"created_at":"2026-01-05T10:14:19.529Z","updated_at":"2026-06-09T08:01:20.137Z","avatar_url":"https://github.com/Energinet-DataHub.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GreenForce\n\n[nx]: https://nx.dev\n[angular]: https://angular.dev\n\n[![GitHub Workflow Status (event)](https://img.shields.io/github/actions/workflow/status/Energinet-DataHub/greenforce-frontend/dh-cd.yml?branch=main)](https://github.com/Energinet-DataHub/greenforce-frontend/actions/workflows/dh-cd.yml)\n[![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/Energinet-DataHub/greenforce-frontend/@angular/core?label=angular)](https://github.com/angular/angular/blob/main/CHANGELOG.md)\n\nMonorepo for the [DataHub](https://en.energinet.dk/Energy-data/DataHub) frontend backed by [Nx] and [Angular].\n\n## Table of Contents\n\n- [General](#general)\n- [Prerequisites](#prerequisites)\n- [DataHub](#datahub)\n    - [Documentation](#documentation)\n    - [Getting Started](#getting-started)\n    - [Development](#development)\n    - [Backend For Frontend (BFF)](#backend-for-frontend-bff)\n    - [Configuration](#configuration)\n- [Watt Design System](#watt-design-system)\n- [Workspace](#workspace)\n    - [Applications](#applications)\n    - [Libraries](#libraries)\n    - [Tools](#tools)\n- [Scripts](#scripts)\n- [Workflows (CI/CD)](#workflows-cicd)\n- [Visual Studio Code](#visual-studio-code)\n- [Domain C4 model](#domain-c4-model)\n\n## General\n\n\u003e The documentation in this README assumes the reader has a general understanding\n\u003e of [Nx] and [Angular]. For beginners in these technologies, the\n\u003e [What is Nx?](https://nx.dev/docs/getting-started/intro) and the\n\u003e [Interactive Angular tutorial](https://angular.dev/tutorials/learn-angular) serve as a good\n\u003e introduction.\n\nThis repository is a monorepo which hosts serveral applications that all share\nthe same dependencies (for example, every application is running the same\nversion of Angular).\n\n_Note: Since this is an [Nx] workspace, the Nx CLI should be used over the Angular CLI._\n\n## Prerequisites\n\n- [Bun](https://bun.sh): Alternative to Node.js® and Yarn that this repository uses.\n- [.NET SDK](https://dotnet.microsoft.com/en-us/download): Required for running and developing DataHub.\n- [Volta](https://volta.sh): Manager for JavaScript command-line tools like Node.js®.\n\n## DataHub\n\nThe application is deployed to the following environments:\n\n| Development 001       | Development 002       | Development 003       | Test 001                | PreProd               | Prod            |\n|-----------------------|-----------------------|-----------------------|-------------------------|-----------------------|-----------------|\n| [dev_001][dh-dev_001] | [dev_002][dh-dev_002] | [dev_003][dh-dev_003] | [test_001][dh-test_001] | [preprod][dh-preprod] | [prod][dh-prod] |\n\n[dh-dev_001]: https://dev.datahub3.dk\n[dh-dev_002]: https://dev002.datahub3.dk\n[dh-dev_003]: https://dev003.datahub3.dk\n[dh-test_001]: https://test.datahub3.dk\n[dh-preprod]: https://preprod.datahub3.dk\n[dh-prod]: https://datahub3.dk\n\n### Documentation\n\nBe sure to check out the additional DataHub documentation for the following\nareas:\n\n- [Testing](docs/dh/testing.md)\n- [Mocking](docs/dh/mocking.md)\n- [Feature Flags](libs/dh/shared/feature-flags/README.md)\n- [Logging with Application Insights](docs/dh/logging.md)\n- [Adding new processes to `metering-point/process-overview`](docs/dh/adding-processes.md)\n\n### Getting Started\n\nBefore starting the development server, you must install `localhost.crt` in your list of locally trusted roots.\nRun the following command as an administrator from the root of the repository (Windows):\n\n```sh\ncertutil -addstore -f \"Root\" localhost.crt\n```\n\nUse the following command to serve the DataHub application locally (with request mocking):\n\n```sh\nbun dh:mock\n```\n\nThe application utilizes request mocking for some of the requests to the\n[backend for frontend (BFF)](#backend-for-frontend-bff), but there are still\nfeatures that are not mocked. When working with those features, it might be\nrequired to serve the BFF locally as well. To do so, run the following command\n(requires some initial setup, see\n[Setup of BFF](apps/dh/api-dh/documents/development.md#setup-of-bff)).\n\n```sh\nbun api:dev\n```\n\n_Note: It is recommended to use mocking as much as possible, see\n[mocking.md](docs/dh/mocking.md)._\n\n### Best Practices$$\n\nTake a look at our developer examples to see how to implement certain features like, and an overall best practice guide:\n\n- [Data table](libs/dh/developer/feature-examples/src/components/table.component.ts)\n- [Form](libs/dh/developer/feature-examples/src/components/edit.component.ts)\n- [Modal](libs/dh/developer/feature-examples/src/components/edit.component.ts)\n- [Dropdown](libs/dh/developer/feature-examples/src/components/filter.component.ts)\n- [Drawer](libs/dh/developer/feature-examples/src/components/details.component.ts)\n- [Description list](libs/dh/developer/feature-examples/src/components/details.component.ts)\n- [Navigation](libs/dh/developer/feature-examples/src/components/table.component.ts)\n\n### Backend For Frontend (BFF)\n\nThere is currenly only one BFF located in `api-dh` under `apps/dh`.\nIt is for `app-dh` and is using .NET 10.x.\nCheck the [Development notes](./apps/dh/api-dh/documents/development.md)\nfor how to get started.\n\n### Configuration\n\nConfiguration files are located in the `libs/dh/shared/assets/src/assets/configuration`\nfolder. These local configurations have a `.local` filename suffix, but is\noverridable by a configuration file without the suffix. For example,\n`dh-api-environment.local.json` configures the DataHub frontend to use a local\nDataHub API. To use a remote DataHub API, place a `dh-api-environment.json` file\nin the same folder and set the remote address in the relevant property.\n\n## Watt Design System\n\n\u003e Contributing? Check the [Watt Design System README](libs/watt/README.md)\n\u003e for developer documentation.\n\nThis is a shared UI library meant to be used by all frontend apps and it\ncontains basic components and functionality for speeding up app development.\nIt is located in `libs/watt` and can be imported from\n`@energinet/watt` in other libraries.\n\nThe design system is showcased using [Storybook](https://storybook.js.org),\nand can be found here: [Latest version (main)](https://main--61765fc47451ff003afe62ff.chromatic.com/)\n\nTo use components or other functionality from Watt, import as in the following\nexample:\n\n```ts\nimport { WattButtonComponent } from '@energinet/watt/button';\n```\n\n## Workspace\n\nThe structure of the monorepo is based on general conventions from\n[Nx](https://nx.dev) with a few extensions. On the highest level the\nworkspace is separated into **apps** and **libs**, with most of the logic\nplaced within the **libs** folder. The **apps** should mostly be slim\ncontainers that links to functionality implemented in libraries.\n\nOn the top level, the workspace is divided into the following folders:\n\n```|\nEnerginet-DataHub/greenforce-frontend\n├── apps      # Source code for applications\n├── build     # Infrastructure related to deployment\n├── dist      # Output files when building artifacts\n├── docs      # General documentation\n├── libs      # Source code for libraries\n├── scripts   # Code needed for running certain commands\n└── tools     # Logic for executing or generating code\n```\n\n### Applications\n\nWithin the **apps** folders resides the applications, which includes frontends,\nBFF and E2E tests. These applications are prefixed with their type and further\ngrouped by a product root folder. Expanding the **apps** folder looks like this:\n\n```|\n...\n└── apps            # Source code for applications\n   ├── dh           # DataHub application (product root)\n   │  ├── api-dh    # - BFF for DataHub\n   │  ├── app-dh    # - Frontend for DataHub\n   │  └── e2e-dh    # - E2E tests for DataHub\n```\n\nIn other words, all applications must follow the naming scheme\n`apps/\u003cproduct\u003e/\u003ctype\u003e-\u003cproduct\u003e`.\n\nBelow is an exhaustive list of permitted application types, along with their\nintended purpose, folder name and which [library types](#library-types) they are\nallowed to have direct dependendies to:\n\n| Type      | Description                    | Name            | Allowed Dependencies                     |\n| --------- | ------------------------------ | --------------- | ---------------------------------------- |\n| **`api`** | Serves as BFF for the product  | `api‑\u003cproduct\u003e` | -                                        |\n| **`app`** | Entry point for the frontend   | `app‑\u003cproduct\u003e` | `shell` `environments` `assets` `styles` |\n| **`e2e`** | Runs E2E tests on the frontend | `e2e‑\u003cproduct\u003e` | `e2e-util`                               |\n\n### Libraries\n\nAs mentioned above, libraries are where most of the logic goes. They are all\neither related to a single product or shared across multiple products\\*.\nThere are many different library types which are listed further below, but they\nall follow the same naming convention:\n\n\u003e The special `gf` product can be used for libraries that must be shared\n\u003e across multiple products.\n\n```|\n...\n└── libs                                      # Source code for libraries\n   └── \u003cproduct\u003e                              # Libraries are grouped by a product root folder\n      └── \u003cdomain\u003e                            # Products can contain several domains ex. auth, core, etc.\n         └── \u003clibrary type\u003e-\u003clibrary name\u003e    # Domains can contain several libraries prefixed by type\n   └── watt                                   # Special product, see \"Watt Design System\" section\n```\n\n_Note: Certain library types should not have a name; in that case simply omit\nthe `-\u003clibrary name\u003e` suffix._\n\nFollowing is an exhaustive list of permitted library types, what they should\ncontain, their name and which other **library**\\* types they are allowed to\ndepend on:\n\n\u003e Only\n\u003e libraries of type `data-access` may have dependencies to apps and only apps of type\n\u003e `api`.\n\n#### Library types\n\n| Type                | Contains                                                                                                                       | Name                   | Allowed Dependencies                                                                                                         |\n|---------------------|--------------------------------------------------------------------------------------------------------------------------------|------------------------|------------------------------------------------------------------------------------------------------------------------------|\n| **`feature`**       | Smart UI (with access to data sources) for specific business use cases or pages in an application.                             | `feature‑\u003cname\u003e`       | `assets` `configuration` `feature` `ui` `data‑access` `domain` `util` `test‑util` `environments`                             |\n| **`ui`**            | Presentational logic (presentational components, pipes, presentational services, directives).                                  | `ui‑\u003cname\u003e`            | `ui` `util` `test-util` `domain` `assets` `styles` `environments`                                                            |\n| **`data‑access`**   | Code for interacting with a back-end system. It also includes all the code related to state management, and HTTP interceptors. | `data‑access‑\u003cname\u003e`   | `data-access` `util` `test-util` `domain` `environments`                                                                     |\n| **`util`**          | Low-level utilities used by many libraries and applications (services, pure functions, contants).                              | `util‑\u003cname\u003e`          | `util` `test-util` `environments` `domain`                                                                                   |\n| **`test‑util`**     | Stubs, test matchers, testing modules and test library configuration.                                                          | `test‑util‑\u003cname\u003e`     | `data-access` `util` `test-util` `domain` `configuration` `assets`                                                           |\n| **`e2e‑util`**      | Playwright helpers and fixtures.                                                                                               | `e2e‑util‑\u003cname\u003e`      | `util` `test-util` `e2e-util`                                                                                                |\n| **`domain`**        | Interfaces, types, constants, functions and services related to domain objects.                                                | `domain`               | `domain` `util` `test-util`                                                                                                  |\n| **`shell`**         | Entrypoint for an application or domain. Orchestration and routing.                                                            | `shell`                | `feature` `ui` `data-access` `util` `test-util` `e2e-util` `shell` `domain` `configuration` `environments` `assets` `styles` |\n| **`configuration`** | Configuration and setup of libraries and concerns (for example i18n).                                                          | `configuration‑\u003cname\u003e` | `data-access` `util` `test-util` `configuration` `environments` `domain`                                                     |\n| **`environments`**  | Code related to loading different environment configurations.                                                                  | `environments`         | `util` `test-util` `environments` `assets`                                                                                   |\n| **`assets`**        | Icons, images, fonts, JSON etc.                                                                                                | `assets`               | `assets`                                                                                                                     |\n| **`styles`**        | SCSS functions, mixins, variables, partials, and global stylesheets.                                                           | `styles`               | `assets` `styles`                                                                                                            |\n\n### Tools\n\nThis folder contains code only meant for use during development or within\nworkflows. Expanding it looks like this:\n\n```|\n...\n└── tools/src\n   ├── executors     # Perform all sorts of actions on your code\n   ├── generators    # Automate tasks using code generation\n   └── \u003chelpers\u003e     # Various other helper tools e.g. for scripting\n```\n\nExecutors and generators are [Nx] inventions; for\ndocumentation on how to work with them, see\n[Use Task Executors](https://nx.dev/core-features/plugin-features/use-task-executors) and\n[Use Code Generators](https://nx.dev/core-features/plugin-features/use-code-generators).\n\n## Scripts\n\n- `bun dep-graph`: Generate a dependency graph for the applications in the monorepo.\n\n## Workflows (CI/CD)\n\nThe repository is using [GitHub Actions workflows](https://docs.github.com/en/actions/using-workflows/about-workflows)\nfor automation including CI/CD pipelines for each application.\nWorkflows are located in `.github/workflows` which currently contains the following:\n\n- `ci-orchestrator.yml` - Markdown check and YAML validation, detects changes to start relevant workflows and branch policy status check.\n- `create-tokens.yml` - Generates design tokens based on a JSON file exported from Figma.\n- `detect-changes.yml` - Figures out what part of the codebase is affected by a change.\n- `dh-cd.yml`: Used by DataHub for updating BFF code coverage, publishing a release, dispatching a deployment request, and dispatching a notification on failure.\n- `dh-ci-dotnet.yml` - Verifies the ASP.NET Core Web API by building and running all tests. Used in `ci-orchestrator.yml` for verifying if PR merge is allowed.\n- `dh-ci-frontend.yml` - Used by DataHub frontend for publishing a release and generating API clients. Used in `ci-orchestrator.yml` for verifying if PR merge is allowed.\n- `dh-healthchecks.yml` - Runs E2E health check tests every hour against all DataHub environments.\n- `frontend-ci.yml` - Used to build, format and lint all frontend apps. Also used for running unit, integration, component and E2E tests.\n- `license-check-ci.yml` - Used to check for license headers in files and adding them if missing.\n- `production-dependencies-license-check.yml` - Used for documenting used versions and licenses of production dependencies.\n- `watt-cd.yml` - Used for publishing Watt to Chromatic and dispatching a notification on failure.\n- `watt-ci.yml` - Used by Watt for verifying a production build can be created. Used in `ci-orchestrator.yml` for verifying if PR merge is allowed.\n\n_Bots are used for certain trivial tasks such as adding license headers to files,\nformatting code, fixing lint errors, and generating API clients based on OpenAPI.\nFor this to work, bots have to use the repository secret `PAT_TOKEN` when pushing\nchanges or creating releases that trigger a workflow. Only do this for idempotent\ntasks to prevent circular workflows from causing infinite workflow runs._\n\n## Visual Studio Code\n\nIt is recommended to use the [Visual Studio Code](https://code.visualstudio.com)\neditor, as it supports the entire toolchain of this repository and has\nbeen preconfigured with a list of recommended extensions stored in\n`.vscode/extensions.json`. The editor will automatically prompt for installing\nthese extensions when the project is opened for the first time, but they can\nlater be found by executing the `Show recommended extensions` command.\n\n## Domain C4 model\n\nIn the DataHub 3 project we use the [C4 model](https://c4model.com/) to document the high-level software design.\n\nThe domain C4 model and views are located in [c4-arch-diagrams](https://github.com/Energinet-DataHub/c4-arch-diagrams/tree/main/src/dh3-frontend) repository.\n\n## Thanks to all the people who already contributed\n\n[![Contributors](https://contributors-img.web.app/image?repo=Energinet-DataHub/greenforce-frontend 'Contributors')](https://github.com/Energinet-DataHub/greenforce-frontend/graphs/contributors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenerginet-datahub%2Fgreenforce-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenerginet-datahub%2Fgreenforce-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenerginet-datahub%2Fgreenforce-frontend/lists"}