Files
zitadel/console
Elio Bischof 37acd2a9d9 chore: rehaul DevX (#10571)
# Which Problems Are Solved

Replaces Turbo by Nx and lays the foundation for the next CI
improvements. It enables using Nx Cloud to speed the up the pipelines
that affect any node package.
It streamlines the dev experience for frontend and backend developers by
providing the following commands:

| Task | Command | Notes |
|------|---------|--------|
| **Production** | `nx run PROJECT:prod` | Production server |
| **Develop** | `nx run PROJECT:dev` | Hot reloading development server
|
| **Test** | `nx run PROJECT:test` | Run all tests |
| **Lint** | `nx run PROJECT:lint` | Check code style |
| **Lint Fix** | `nx run PROJECT:lint-fix` | Auto-fix style issues |

The following values can be used for PROJECT:

- @zitadel/zitadel (root commands)
- @zitadel/api,
- @zitadel/login,
- @zitadel/console,
- @zitadel/docs,
- @zitadel/client
- @zitadel/proto

The project names and folders are streamlined:

| Old Folder | New Folder |
| --- | --- |
| ./e2e | ./tests/functional-ui |
| ./load-test | ./benchmark |
| ./build/zitadel | ./apps/api |
| ./console | ./apps/console (postponed so the PR is reviewable) |

Also, all references to the TypeScript repo are removed so we can
archive it.

# How the Problems Are Solved

- Ran `npx nx@latest init`
- Replaced all turbo.json by project.json and fixed the target configs
- Removed Turbo dependency
- All JavaScript related code affected by a PRs changes is
quality-checked using the `nx affected` command
- We move PR checks that are runnable using Nx into the `check`
workflow. For workflows where we don't use Nx, yet, we restore
previously built dependency artifacts from Nx.
- We only use a single and easy to understand dev container
- The CONTRIBUTING.md is streamlined
- The setup with a generated client pat is orchestrated with Nx
- Everything related to the TypeScript repo is updated or removed. A
**Deploy with Vercel** button is added to the docs and the
CONTRIBUTING.md.

# Additional Changes

- NPM package names have a consistent pattern.
- Docker bake is removed. The login container is built and released like
the core container.
- The integration tests build the login container before running, so
they don't rely on the login container action anymore. This fixes
consistently failing checks on PRs from forks.
- The docs build in GitHub actions is removed, as we already build on
Vercel.

# Additional Context

- Internal discussion:
https://zitadel.slack.com/archives/C087ADF8LRX/p1756277884928169
- Workflow dispatch test:
https://github.com/zitadel/zitadel/actions/runs/17760122959

---------

Co-authored-by: Florian Forster <florian@zitadel.com>
Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
(cherry picked from commit f69a6ed4f3)

# Conflicts:
#	.github/workflows/build.yml
#	.github/workflows/console.yml
#	.github/workflows/core.yml
#	CONTRIBUTING.md
#	Makefile
#	backend/v3/storage/database/events_testing/events_test.go
#	backend/v3/storage/database/events_testing/id_provider_instance_test.go
#	backend/v3/storage/database/events_testing/instance_test.go
#	console/README.md
#	console/package.json
#	internal/api/grpc/group/v2/integration_test/query_test.go
#	pnpm-lock.yaml
2025-10-09 16:53:19 +02:00
..
2025-10-09 15:37:34 +02:00
2025-10-09 16:53:19 +02:00
2025-10-09 16:53:19 +02:00
2025-10-09 16:53:19 +02:00
2025-10-09 16:53:19 +02:00

Zitadel Console

The Console is Zitadels management UI.

It is built using Angular and part of the Zitadel monorepo.

To get started follow the contributing quick start.

Building

To build for production:

pnpm nx run @zitadel/console:build

This will:

  1. Generate proto files (via prebuild script)
  2. Build the Angular app with production optimizations

Linting

To run linting and formatting checks:

pnpm nx @zitadel/console:lint

To auto-fix formatting issues:

pnpm nx @zitadel/console:lint-fix

Project Structure

  • src/app/proto/generated/ - Generated proto files (Angular-specific format)
  • buf.gen.yaml - Local proto generation configuration
  • project.json - Nx orchestration and caching for builds and tests
  • prebuild.development.js - Development environment configuration script

Dependency Chain

The Console app has the following build dependencies managed by Nx:

  1. @zitadel/proto:generate - Generates the protobuf stubs
  2. @zitadel/client:build - Builds the TypeScript gRPC client library
  3. @zitadel/console:generate - Generates Console-specific protobuf stubs
  4. @zitadel/console:build - Creates a production build from Console

This ensures that the Console always has access to the latest client library and protobuf definitions.

Proto Generation Details

  1. @zitadel/proto generation: Modern ES modules with @bufbuild/protobuf for v2 APIs
  2. Local buf.gen.yaml generation: Traditional protobuf JavaScript classes for v1 APIs

The Console app calls Zitadel v1 and v2 APIs. As long as the Console still calls v1 APIs, it needs to import client stubs from separate sources:

Legacy v1 API (Traditional Protobuf)

  • Uses local buf.gen.yaml configuration
  • Generates traditional Google protobuf JavaScript classes extending jspb.Message
  • Uses plugins: protocolbuffers/js, grpc/web, grpc-ecosystem/openapiv2
  • Output: src/app/proto/generated/
  • Used for: Most existing Console functionality

Modern v2 API (ES Modules)

  • Uses @zitadel/proto package generation
  • Generates modern ES modules with @bufbuild/protobuf
  • Uses plugin: @bufbuild/es with ES modules and JSON types
  • Output: login/packages/zitadel-proto/
  • Used for: New user v2 API and services

Dependency Management

The Console's project.json ensures proper execution order:

  1. @zitadel/proto:generate runs first (modern ES modules)
  2. Console's local generation runs second (traditional protobuf)
  3. Build/lint/start tasks depend on both generations being complete

This approach allows the Console app to use both v1 and v2 APIs while maintaining proper build dependencies.

Legacy Information

This project was originally generated with Angular CLI version 8.3.20 and has been updated over time.