1010- ** Languages:** TypeScript, JavaScript, SCSS, C# (.NET for test runner)
1111- ** Package Manager:** pnpm 9.15.4 (specified in package.json)
1212- ** Node Version:** 20.x (required by CI)
13- - ** Build System:** Gulp + Nx + custom build scripts
13+ - ** Build System:** Gulp + Nx + custom build scripts + custom Nx executors (via ` devextreme-nx-infra-plugin ` )
1414- ** Test Frameworks:** QUnit, Jest, TestCafe, Karma (Angular)
1515
1616## Critical Setup Requirements
@@ -70,6 +70,8 @@ pnpm install --frozen-lockfile
7070 devextreme-themebuilder/ # Theme builder package
7171 devextreme-metadata/ # Metadata generation for wrappers
7272 devextreme-monorepo-tools/ # Internal tooling
73+ nx-infra-plugin/ # Custom Nx executors for build automation
74+ workflows/ # Cross-package NX build orchestration (all:build-dev, all:build-testing)
7375 testcafe-models/ # TestCafe page object models
7476
7577/apps/
@@ -150,20 +152,70 @@ pnpm run clean
150152```
151153
152154** Build process includes:**
153- 1 . Localization generation
155+ 1 . Localization generation (via ` devextreme-nx-infra-plugin:localization ` executor)
1541562 . Component generation (Renovation architecture)
155- 3 . Transpilation (Babel )
156- 4 . Bundle creation (Webpack)
157- 5 . TypeScript declarations
157+ 3 . Transpilation (via native NX executors: ` babel-transform ` for JS, ` build-typescript ` for TS )
158+ 4 . Bundle creation (Webpack via ` devextreme-nx-infra-plugin:bundle ` executor) - ` bundle:debug ` and ` bundle:prod ` targets
159+ 5 . TypeScript declarations - ` build:declarations ` target
1581606 . SCSS compilation (from devextreme-scss)
159- 7 . NPM package preparation
161+ 7 . NPM package preparation - ` build:npm ` target
162+
163+ ** Granular Nx build targets (can be run individually):**
164+ ``` bash
165+ pnpx nx build:localization devextreme # Generate localization files
166+ pnpx nx build:transpile devextreme # Transpile source code
167+ pnpx nx bundle:debug devextreme # Create debug bundle
168+ pnpx nx bundle:prod devextreme # Create production bundle
169+ pnpx nx build:npm devextreme # Prepare NPM packages
170+ ```
171+
172+ ** Build with testing configuration (for CI):**
173+ ``` bash
174+ pnpx nx build devextreme -c=testing
175+ ```
160176
161177** Important environment variables:**
162178- ` DEVEXTREME_TEST_CI=true ` - Enables test mode (skips building npm package)
163179- ` BUILD_ESM_PACKAGE=true ` - Builds ESM modules (skips building npm package)
164180- ` BUILD_TESTCAFE=true ` - Builds for TestCafe tests
165181- ` BUILD_TEST_INTERNAL_PACKAGE=true ` - Builds internal test package
166182
183+ ## Custom Nx Executors (nx-infra-plugin)
184+
185+ The ` packages/nx-infra-plugin ` provides custom Nx executors for build automation:
186+
187+ | Executor | Description |
188+ | ----------| -------------|
189+ | ` add-license-headers ` | Adds DevExtreme license headers to compiled files with version information |
190+ | ` babel-transform ` | Transforms JS/TS files using Babel with configurable presets, debug block removal, and extension renaming |
191+ | ` build-angular-library ` | Builds Angular libraries using ng-packagr programmatically |
192+ | ` build-typescript ` | Compiles TypeScript to CJS or ESM modules with configurable output format, tsconfig, and path alias resolution |
193+ | ` bundle ` | Bundles JavaScript files using webpack with debug or production mode, supporting multiple entry points and license validation |
194+ | ` clean ` | Removes directories and files with support for exclusion patterns |
195+ | ` concatenate-files ` | Concatenates files with optional content extraction via regex, header/footer, and find/replace transforms |
196+ | ` copy-files ` | Copies files and directories to specified destinations with glob pattern support |
197+ | ` create-dual-mode-manifest ` | Generates package.json files for dual-mode (ESM + CJS) support with main, module, typings, and sideEffects |
198+ | ` generate-component-names ` | Generates TypeScript file with component name constants for test automation |
199+ | ` generate-components ` | Generates framework components (React/Vue/Angular) from DevExtreme metadata |
200+ | ` karma-multi-env ` | Runs Karma tests across multiple Angular environments (client, server, hydration) |
201+ | ` localization ` | Generates CLDR data and compiles localization message files from JSON to JavaScript |
202+ | ` pack-npm ` | Creates npm packages using ` pnpm pack ` for distribution |
203+ | ` prepare-package-json ` | Creates distribution-ready package.json with cleaned dependencies for npm publishing |
204+ | ` prepare-submodules ` | Creates package.json entry points for submodule exports |
205+
206+ ** Example executor usage in project.json:**
207+ ``` json
208+ {
209+ "build:localization:generate" : {
210+ "executor" : " devextreme-nx-infra-plugin:localization" ,
211+ "options" : {
212+ "messagesDir" : " ./js/localization/messages" ,
213+ "cldrDataOutputDir" : " ./js/__internal/core/localization/cldr-data"
214+ }
215+ }
216+ }
217+ ```
218+
167219## Testing
168220
169221### Test Types and Commands
@@ -348,8 +400,8 @@ pnpm run lint-ts -- --fix
348400- ` packages/devextreme-react/src/**/* ` (except templates)
349401- ` packages/devextreme-vue/src/**/* ` (except templates)
350402- ` packages/devextreme/js/renovation/**/*.j.tsx `
351- - ` packages/devextreme/js/common /core/localization/default_messages.js `
352- - ` packages/devextreme/js/common /core/localization/cldr-data/**/* `
403+ - ` packages/devextreme/js/__internal /core/localization/default_messages.ts `
404+ - ` packages/devextreme/js/__internal /core/localization/cldr-data/**/* `
353405
354406** Source files (EDIT THESE):**
355407- ` packages/devextreme/js/**/*.js ` (core logic)
@@ -378,13 +430,15 @@ pnpm run lint-ts -- --fix
378430## Key Facts
379431
380432- ** Nx is used for task orchestration** - prefer ` pnpx nx ` commands over direct npm scripts
433+ - ** Custom Nx executors** - ` devextreme-nx-infra-plugin ` provides specialized executors for localization, file operations, and build tasks
381434- ** Frozen lockfile is mandatory** - CI will fail without it
382435- ** Build artifacts are in gitignore** - never commit ` artifacts/ ` directories
383436- ** Wrappers are generated** - modify generators, not generated code
384437- ** Multiple test frameworks** - QUnit (legacy), Jest (new), TestCafe (E2E)
385438- ** Monorepo uses pnpm workspaces** - dependencies are hoisted
386439- ** CI uses custom runners** - ` devextreme-shr2 ` for most jobs, ` ubuntu-latest ` for some
387440- ** Timeouts are strict** - optimize for speed, use caching
441+ - ** Granular build caching** - individual build steps have proper Nx caching for faster rebuilds
388442
389443## Quick Reference
390444
@@ -398,6 +452,14 @@ pnpm run all:build-dev
398452# Build (prod)
399453pnpm run all:build
400454
455+ # Build with testing configuration (for CI)
456+ pnpx nx build devextreme -c=testing
457+
458+ # Build specific targets
459+ pnpx nx build:localization devextreme
460+ pnpx nx build:transpile devextreme
461+ pnpx nx bundle:debug devextreme
462+
401463# Test
402464pnpx nx run-many -t test
403465pnpm run test-jest # From devextreme package
@@ -411,6 +473,7 @@ pnpm run regenerate-all
411473
412474# Clean
413475pnpm run clean # From devextreme package
476+ pnpx nx clean:artifacts devextreme # Clean build artifacts only
414477
415478# Run demos
416479pnpm run webserver # From root, then visit localhost:8080
0 commit comments