chore(nx): migrate to monorepo structure [WPB-22420]

[aweiss-dev]

WPB-22420 [Web] General maintenance ticket for PR merges

PR Summary: Nx Monorepo Migration

Overview

This PR migrates the wire-webapp repository from a standard Yarn workspace to an Nx monorepo (v22.3.3). This is a major structural refactoring that introduces Nx's build system, improved caching, and better project organisation.

---

Major Technical Changes

1. Nx Monorepo Setup

New Configuration Files

File	Purpose
nx.json	Nx workspace configuration with caching and target defaults
tsconfig.base.json	Base TypeScript configuration for workspace
jest.preset.js	Shared Jest preset for all projects
eslint.config.ts	New flat ESLint 9+ configuration (replaces .eslintrc.js)
lint-staged.config.js	Lint-staged configuration

Root Project Configuration

• project.json - Workspace tools project with targets for:
  • Docker image building
  • Changelog generation (production/staging/rc)
  • Release automation
  • Jest cache clearing

2. Directory Restructuring

The repository structure has been reorganised to follow Nx conventions:

Before:                    After:
├── server/               ├── apps/
├── src/                 │   ├── server/
├── test/                │   └── webapp/
├── webpack.config.js     ├── libraries/ (empty, prepared for future migrations)
└── ...                  └── ...

Key Moves:

• server/ → apps/server/
• src/ → apps/webapp/src/
• test/ → apps/webapp/test/
• Root config files → apps/webapp/ (e.g., webpack.config.js, jest.config.ts)

3. Application Project Configurations

Webapp Application (apps/webapp/project.json)

Target	Description
build	Bundles webapp (depends on server:build)
test	Jest unit tests with CI configuration
e2e	Playwright end-to-end tests
lint	ESLint (depends on stylelint and type-check)
stylelint	Less/CSS linting with Prettier
type-check	TypeScript type checking
check-circular	Circular dependency detection
translate-*	Translation extraction/merge/type generation
configure	Environment config and icon generation

Server Application (apps/server/project.json)

Target	Description
build	TypeScript compilation + asset copying
package	Full server packaging with webapp bundling
serve	Nx node executor with watch mode
test	Jest unit tests
type-check	TypeScript type checking

4. Package Manager Upgrade

Component	Before	After
Yarn	v4.1.1	v4.12.0
Yarn lock file	server/yarn.lock	Root yarn.lock (consolidated)

5. TypeScript Configuration Changes

New Files

• tsconfig.base.json - Workspace-wide base config with path mappings
• apps/webapp/tsconfig.build.json - Webapp build config
• apps/webapp/tsconfig.eslint.json - ESLint type-aware linting
• apps/server/tsconfig.json - Server TypeScript config

Root tsconfig.json Changes

• Updated to reference workspace structure
• Added extends: "./tsconfig.base.json"

6. ESLint Migration to Flat Config (ESLint 9+)

The old .eslintrc.js has been replaced with eslint.config.ts:

Key Features:

• Flat config format (ESLint 9+ standard)
• Type-aware linting via TypeScript project service
• Project-specific parser options
• Separate rule sets for:
  • TypeScript/TSX files
  • JavaScript/JSX files
  • Test files (relaxed rules)
• Custom header rule with dynamic year
• Import resolver configured for apps/webapp

7. CI/CD Pipeline Updates

GitHub Workflows

All workflows in .github/workflows/ updated:

• ci.yml - Updated for Nx commands
• create_docker_image.yml - Docker build adjustments
• deploy-to-test-env.yml - Deployment path updates
• playwright-*.yml - E2E test configuration updates
• publish.yml - Release workflow updates
• precommit*.yml - Pre-commit workflow adjustments

Codecov Configuration

codecov.yml updated with new coverage paths:

• coverage/apps/webapp/
• coverage/apps/server/

Jenkinsfile

Updated to work with new Nx-based build commands.

8. Build System Changes

Webpack Configuration

• Moved from root to apps/webapp/webpack.config.js
• Updated output paths to match new structure
• webpack.config.common.js refactored

9. Nx Caching and Performance

The nx.json configuration enables intelligent caching

10. Workspace Configuration

Root package.json Changes

• Added Nx devDependencies (@nx/*)
• Updated workspaces: ["apps/*"] (ready for libraries/*)
• New scripts using Nx commands:
  • bundle:dev → nx build webapp --configuration=development
  • bundle:prod → nx build webapp --configuration=production
  • lint → nx run-many -t lint --all
  • test → nx run-many -t test --all
  • type-check → nx run-many -t type-check --all

11. File-Specific Changes

Deleted Files

• .eslintrc.js - Replaced by eslint.config.ts
• .lintstagedrc.json - Replaced by lint-staged.config.js
• server/yarn.lock - Consolidated into root yarn.lock
• Procfile - Moved to apps/server/
• tsconfig.build.json - Moved/replaced by app-specific configs

New Files

• apps/webapp/.gitignore - Webapp-specific ignores
• apps/webapp/bin/transalations_generate_types.js - Translation type generation (moved)
• apps/webapp/bin/translations_extract_formatter.js - Translation extraction formatter (moved)

12. Test Configuration Updates

Jest

• New jest.preset.js - Shared preset for all projects
• apps/webapp/jest.config.ts - Webapp Jest config
• apps/server/jest.config.js - Server Jest config

Playwright

• apps/webapp/playwright.config.ts - E2E test configuration updates

13. Additional Configuration Updates

File	Changes
.nvmrc	Node version requirement updated
.gitignore	Added patterns for new structure
.prettierignore	Updated ignore patterns
.elasticbeanstalk/config.yml	Deployment config updated
.github/labeler.yml	PR labeler updated
docs/ADRs/2025-12-29-nx-monorepo-migration.md	Added an ADR describing the change

---

Benefits of This Migration

1. Improved Build Performance - Nx caching prevents unnecessary rebuilds
2. Better Project Organization - Clear separation of concerns with apps/ and libraries/
3. Unified Tooling - Consistent commands across all projects
4. Type-Aware Linting - ESLint with TypeScript project service
5. Scalability - Ready for library migrations
6. Modern ESLint - Flat config format (ESLint 9+)

---

Security Checklist (required)

• External inputs are validated & sanitized on client and/or server where applicable.
• API responses are validated; unexpected shapes are handled safely (fallbacks or errors).
• No unsafe HTML is rendered; if unavoidable, sanitization is applied and documented where it happens.
• Injection risks (XSS/SQL/command) are prevented via safe APIs and/or escaping.

Accessibility (required)

• I have read and this PR upholds our Accessibility Best Practices.

Standards Acknowledgement (required)

• I have read and this PR upholds our Coding Standards and Tech Radar Choices.

---

Screenshots or demo (if the user interface changed)

Notes for reviewers

• Trade-offs:
• Follow-ups (linked issues):
• Linked PRs (e.g. web-packages):

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[markbrockhoff]

FYI: You'll need to update the dotenv config in playwright.config.ts in order for the tests to work again.

From

config({path: './test/e2e_tests/.env'});

to

import {resolve} from 'node:path';
 
config({path: resolve(__dirname, './test/e2e_tests/.env')});

dotenv uses the CWD as base by default which changed due to the monorepo migration. Resolving based of the dirname couples it to the file position instead. (I'd prefer to use import.meta.dirname instead, but that would require a migration to type: module in the package.json as well.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE