@eui/cli 22.0.0-alpha.20 → 22.0.0-alpha.22

package/README.md

@@ -1,157 +1,370 @@
 # @eui/cli
 
-Command-line interface for scaffolding and managing eUI applications.
+Command-line interface for **scaffolding, serving and building eUI applications**. It generates a
+ready-to-run project (Angular, React, mobile, or a Java web module) pre-wired with the eUI design
+system, then acts as the app's build/serve tool so every eUI app is driven the same way regardless
+of its underlying framework.
+
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [`eui-cli new` — generate an application](#eui-cli-new--generate-an-application)
+  - [The interactive wizard, step by step](#the-interactive-wizard-step-by-step)
+  - [Application types explained](#application-types-explained)
+  - [Non-interactive / automated mode](#non-interactive--automated-mode)
+  - [Full configuration reference](#full-configuration-reference)
+- [Working with a generated app](#working-with-a-generated-app)
+  - [`eui-cli serve-app`](#eui-cli-serve-app)
+  - [`eui-cli build-app`](#eui-cli-build-app)
+  - [`eui-cli lint-app`](#eui-cli-lint-app)
+  - [`eui-cli inject-config-app`](#eui-cli-inject-config-app)
+  - [`eui-cli generate-sprite`](#eui-cli-generate-sprite)
+- [Generated project layouts](#generated-project-layouts)
+- [Requirements](#requirements)
+- [License](#license)
+
+---
 
 ## Installation
 
+Install globally to get the `eui-cli` binary on your `PATH`:
+
 ```sh
 npm install -g @eui/cli
 ```
 
-## Usage with npx
-
-Run without installing globally:
+Or run it on demand without installing, using `npx`:
 
 ```sh
 npx @eui/cli new
 ```
 
-## Usage
-
-### Generate a new application
+Check the installed version at any time:
 
 ```sh
-eui-cli new
+eui-cli --version
 ```
 
-Or simply:
+---
+
+## Quick start
 
 ```sh
-eui-cli
+# 1. create an empty folder and move into it
+mkdir my-app && cd my-app
+
+# 2. scaffold interactively (answers a few questions)
+eui-cli new
+
+# 3. once generated + installed, start the app (opens http://localhost:4200)
+npm start
 ```
 
-The CLI will prompt you to configure your application:
+> The generator **requires an empty target directory**. If the current (or `--targetPath`) folder
+> is not empty, the CLI stops with `DIR_NOT_EMPTY` to avoid overwriting your files.
 
-1. **Application Type**: Choose between:
-   - Desktop (Angular)
-   - Mobile Ionic
-   - eUI + Spring Boot web module (requires JDK + Maven)
-   - eUI + Maven web module (JEE Spring, requires JDK + Maven)
+---
 
-2. **Maven Configuration** (for web-spring-boot type only):
-   - groupId (e.g., `ec.europa.digit`)
-   - artifactId (e.g., `myapp`)
+## `eui-cli new` — generate an application
 
-3. **Additional Options** (not available for Mobile):
-   - eUI ECL app-shell template (for ec.europa.eu apps)
-     - If selected, choose between EC theme or EU theme
+`new` is the default command, so `eui-cli` and `eui-cli new` are equivalent. It asks a series of
+questions, scaffolds the matching skeleton into the target folder, optionally installs
+dependencies, optionally sets up [eui-skills](https://sdlc.webcloud.ec.europa.eu/csdr/eui-skills.git),
+and can start the app immediately.
 
-4. **Dependency Installation**: Choose whether to install dependencies automatically
-5. **Package Manager**: Select Yarn 1.x or Pnpm (experimental)
-6. **eui-skills Setup**: Optionally install [eui-skills](https://sdlc.webcloud.ec.europa.eu/csdr/eui-skills.git) after generation
-   - **Install all** (`--all`): install all skills to all agents without prompts
-   - Or configure individually:
-     - **Agent(s)**: target specific agents (e.g. `cursor`, `claude-code`, or `*` for all)
-     - **Skill(s)**: specific skill names to install (or `*` for all)
-     - **Global**: install at user-level instead of project-level
-     - **Skip confirmations**: auto-confirm all skills prompts
+```sh
+eui-cli new [--targetPath <dir>] [--config <string>] [skills flags…]
+```
 
-#### CLI Flags
+| Flag | Description |
+| --- | --- |
+| `-t, --targetPath <dir>` | Folder to generate into. Created if missing. Defaults to the current directory. |
+| `-c, --config <string>` | Non-interactive config string (see [automated mode](#non-interactive--automated-mode)). When present, **all prompts are skipped**. |
+| `--skills` | Set up eui-skills after generation (enables the skills sub-flags). |
+| `--skillsAll` | Install all skills to all agents, no prompts. Requires `--skills`. |
+| `--skillsAgent <agents>` | Target agent(s), space-separated, or `*` for all. Requires `--skills`. |
+| `--skillsSkill <skills>` | Skill name(s), space-separated, or `*` for all. Requires `--skills`. |
+| `--skillsGlobal` | Install skills at user level instead of project level. Requires `--skills`. |
+| `--skillsYes` | Auto-confirm all skills prompts. Requires `--skills`. |
+
+> All `--skills*` sub-flags require `--skills`; using one without it exits with an error.
+
+### The interactive wizard, step by step
+
+Running `eui-cli new` with no `--config` walks you through these prompts. Some are conditional —
+they only appear for certain earlier answers.
+
+1. **Application type** — the main choice. See
+   [Application types explained](#application-types-explained) below. Determines which skeleton is
+   generated and which of the following prompts appear.
+
+2. **Maven groupId / artifactId** — *only for the Spring Boot web module.* Standard Maven
+   coordinates for the generated Java module (e.g. `ec.europa.digit` / `myapp`). Both are required.
+
+3. **App-shell option** — *only for `Desktop` (plain Angular); skipped for Desktop EDS, React EDS,
+   Mobile, and the Java web modules.* Choose the shell/theme layer:
+   - **eUI default app-shell** — the standard `@eui/components` `eui-app` layout.
+   - **eUI ECL app-shell** — the Europa Component Library site layout, for `ec.europa.eu` apps.
+     If selected, a follow-up prompt asks for the **ECL theme**: **EC theme** (`ecl-ec`) or
+     **EU theme** (`ecl-eu`).
+
+   > Desktop EDS pre-selects the EDS app-shell up-front, so it never shows this prompt.
+
+4. **Install dependencies now?** — `Yes` runs the package manager right after scaffolding; `No`
+   leaves you to install manually later.
+
+5. **Package manager** — *only if you chose to install.* **Yarn 1.x** (default) or
+   **pnpm** (experimental). The choice also selects the matching `package.json` variant for
+   Angular and React skeletons (pnpm needs all dependencies listed explicitly rather than via the
+   `@eui/deps-*` meta-packages).
+
+6. **Set up eui-skills?** — `No` by default. `Yes` reveals the skills sub-flow:
+   - **Install all** (`--all`) — install every skill to every detected agent with no further
+     questions, **or**
+   - **Configure individually**:
+     - **Agent(s)** — which AI agents to install into (e.g. `cursor`, `claude-code`, `*` for all;
+       empty = default).
+     - **Skill(s)** — which skills to install (space-separated names, `*` for all, empty = all).
+     - **Global** — install at user level instead of project level.
+     - **Skip confirmations** — auto-confirm the skills installer's prompts.
+
+7. **Start the app?** — when dependencies were installed, the CLI can launch the app immediately
+   (`npm start`), opening the browser on `http://localhost:4200`.
+
+### Application types explained
+
+The **primary choice** is the application type. The two flagship desktop tracks are
+**Desktop / Desktop EDS** (Angular) and **React EDS** (React); the remaining types cover mobile and
+server-rendered Java web modules.
+
+| Menu entry | Stack | App shell / UI layer | Notes |
+| --- | --- | --- | --- |
+| **Desktop** | Angular | `@eui/components` (`eui-app`) — legacy app-shell | Prompts for the app-shell option (default vs ECL theme). The classic eUI desktop app. |
+| **Desktop EDS** | Angular | `@eui/eds` (`eds-shell` + EDS components) — modern design system | Same desktop skeleton as *Desktop* (identical routes, features, config, HTTP interceptors) but the shell is composed with `eds-shell`, `eds-user-profile`, `eds-icon-button`, etc. Skips the app-shell prompt. |
+| **React EDS** | React + Vite | `@eui/eds-react` (`EdsShell` + pure-React EDS components) | A Vite React app with an `EdsShell` (toolbar + collapsible sidebar + routed content) and example pages, using React Router (`HashRouter`). |
+| **Mobile Ionic** | Angular + Ionic | eUI mobile layer | A mobile app skeleton. No app-shell / ECL prompt. |
+| **eUI + Spring Boot web module** | Angular inside a Spring Boot Maven module | eUI (default or ECL) | Generates a Java Spring Boot web module with an embedded Angular front-end. **Requires JDK + Maven.** Prompts for Maven `groupId` / `artifactId`. |
+| **eUI + Maven web module** | Angular inside a JEE/Spring Maven module | eUI (default or ECL) | Generates a JEE Spring Maven web module with an embedded Angular front-end. **Requires JDK + Maven.** |
+
+**Desktop vs Desktop EDS** — pick *Desktop EDS* for new applications that should adopt the modern
+EU Design System (EDS) look and components; pick *Desktop* if you need the legacy `@eui/components`
+shell or the ECL site layout for `ec.europa.eu` public sites. Both share the same underlying
+Angular application structure, so switching later is mostly a shell/template change.
+
+**React EDS** — the React equivalent of Desktop EDS, built on `@eui/eds-react`. It ships a working
+`EdsShell` app (toolbar, collapsible icon sidebar, routed content, Home + About pages) and is
+served/built through the same `eui-cli` commands as the Angular apps (see
+[Working with a generated app](#working-with-a-generated-app)).
+
+### Non-interactive / automated mode
+
+Pass `--config` (with an optional `--targetPath`) to skip **all** prompts — ideal for CI, scripts,
+or reproducible scaffolding. The value is a comma-separated list of `key:value` pairs; any option
+you omit falls back to its default.
 
-Skip prompts by passing flags directly:
+```sh
+eui-cli new --config <config-string> --targetPath <output-directory>
+```
+
+Examples for the main tracks:
 
 ```sh
-# Generate with skills setup (interactive sub-prompts)
-eui-cli new --skills
+# Desktop (plain Angular), no install
+eui-cli new --config appType:angular,npmInstall:false --targetPath eui-desktop
+
+# Desktop with the ECL app-shell, EC theme
+eui-cli new --config appType:angular,appOptions:ecl,appOptionsEclTheme:ecl-ec,npmInstall:false --targetPath eui-desktop-ecl
+
+# Desktop EDS (Angular + eds-shell)
+eui-cli new --config appType:angular,appOptions:eds,npmInstall:false --targetPath eui-desktop-eds
 
-# Install all skills to all agents without prompts
-eui-cli new --skills --skillsAll
+# React EDS (React + Vite + @eui/eds-react)
+eui-cli new --config appType:react,npmInstall:false --targetPath eui-react-eds
 
-# Target specific agents and skip confirmations
-eui-cli new --skills --skillsAgent "cursor claude-code" --skillsYes
+# Spring Boot web module (needs JDK + Maven)
+eui-cli new --config appType:web-spring-boot,groupId:ec.europa.digit,artifactId:myapp,npmInstall:false --targetPath eui-web
 
-# Install a specific skill globally
-eui-cli new --skills --skillsSkill "pr-review" --skillsGlobal
+# Fully automated with pnpm + install + skills
+eui-cli new --config appType:angular,appOptions:eds,npmInstall:true,packageManager:pnpm --skills --skillsAll --targetPath eui-app
 ```
 
-> Skills sub-options (`--skillsAgent`, `--skillsSkill`, `--skillsGlobal`, `--skillsYes`, `--skillsAll`) require `--skills` to be set, otherwise the CLI will exit with an error.
+> **Note on `appOptions`.** In a `--config` string, `appOptions` accepts multiple values joined by
+> an underscore (e.g. `ecl_something`) and is parsed into a list. Use `appOptions:eds` for the EDS
+> desktop shell and `appOptions:ecl` (with `appOptionsEclTheme`) for the ECL shell.
+
+### Full configuration reference
+
+Every key accepted in the `--config` string (and its interactive-prompt equivalent):
+
+| Key | Values | Applies to | Meaning |
+| --- | --- | --- | --- |
+| `appType` | `angular` · `react` · `mobile` · `web-spring-boot` · `web-maven` | all | The skeleton to generate. `Desktop` and `Desktop EDS` both use `angular` (differentiated by `appOptions`). `React EDS` uses `react`. |
+| `appOptions` | `''` (default) · `ecl` · `eds` (underscore-join for multiple) | Angular | App-shell layer. Empty = default eUI shell; `ecl` = ECL site shell; `eds` = EDS desktop shell. |
+| `appOptionsEclTheme` | `ecl-ec` · `ecl-eu` | Angular + `appOptions:ecl` | ECL theme flavor (EC vs EU). |
+| `groupId` | any Maven groupId | `web-spring-boot` | Maven groupId (e.g. `ec.europa.digit`). |
+| `artifactId` | any Maven artifactId | `web-spring-boot` | Maven artifactId (e.g. `myapp`). |
+| `npmInstall` | `true` · `false` | all | Install dependencies right after scaffolding. |
+| `packageManager` | `yarn` · `pnpm` | all (when installing) | Package manager to install with; also selects the pnpm `package.json` variant. |
+| `appStart` | `true` · `false` | all | Start the app (`npm start`) after a successful install. Only runs when `npmInstall` is `true`. |
+| `skills` | `true` · `false` | all | Set up eui-skills after generation. |
+| `skillsAll` | `true` · `false` | with `skills` | Install all skills to all agents, no prompts. |
+| `skillsAgent` | agent name(s), space-separated or `*` | with `skills` | Target agents. |
+| `skillsSkill` | skill name(s), space-separated or `*` | with `skills` | Skills to install. |
+| `skillsGlobal` | `true` · `false` | with `skills` | Install at user level instead of project level. |
+| `skillsYes` | `true` · `false` | with `skills` | Auto-confirm skills prompts. |
+
+---
+
+## Working with a generated app
 
-#### Automated Mode
+Every generated app exposes the same npm scripts, which delegate to `eui-cli`. The CLI's
+`serve-app` and `build-app` are **framework-aware**: they detect whether the project is an Angular
+app (`angular.json`) or a Vite React app (`vite.config.*`) and run the correct toolchain. This is
+what lets both Desktop/Desktop EDS (Angular) and React EDS (Vite) be driven with identical commands.
 
-Generate an application without prompts using a configuration string:
+Common scripts in the generated `package.json`:
+
+| Script | Angular apps | React EDS app |
+| --- | --- | --- |
+| `npm start` | Mock server + `eui-cli serve-app` (proxy-mock) in parallel | Mock server + `eui-cli serve-app` (Vite dev server) in parallel |
+| `npm run start-local` | `eui-cli serve-app` (no proxy) | `eui-cli serve-app` (Vite) |
+| `npm run build` | `eui-cli build-app` | `tsc -b && eui-cli build-app` (Vite build) |
+
+### `eui-cli serve-app`
+
+Serves the application on a local dev server.
 
 ```sh
-eui-cli new --config <config-string> --targetPath <output-directory>
+eui-cli serve-app [options]
 ```
 
-Configuration format:
+| Option | Angular | React (Vite) |
+| --- | --- | --- |
+| `-c, --configuration <config>` | Angular build configuration | ignored |
+| `-p, --port <port>` | dev-server port (default 4200) | Vite port |
+| `-h, --host <host>` | host to bind | Vite host |
+| `--proxyConfig <path>` | proxy config file | ignored (use `vite.config.ts` `server.proxy`) |
+| `--baseHref, --base-href <href>` | base href | ignored |
+| `--servePath <path>` | serve path | ignored |
+| `--open <value>` | open browser (default on; `--open=false` to disable) | `--open` / `--no-open` |
+| `--configEnvTarget <target>` | inject env config before serving | ignored |
+| `--noLiveReload` | disable live reload | ignored |
+| `--disableHostCheck` | disable host check | ignored |
+| `--maxSpaceSize` | raise Node memory to 8 GB | ignored |
+| `-d, --debug` | verbose logging | verbose logging |
+
+### `eui-cli build-app`
+
+Builds the application for production.
+
+```sh
+eui-cli build-app [options]
 ```
-appType:angular,appOptions:ecl,appOptionsEclTheme:ecl-ec,npmInstall:false
+
+| Option | Angular | React (Vite) |
+| --- | --- | --- |
+| `--skipLint` | skip `ng lint` | n/a (lint is a separate script) |
+| `--skipTest` | skip unit tests | n/a |
+| `--skipCompile` | skip the final compile step | n/a |
+| `-c, --configuration <config>` | Angular build configuration (default `production`) | ignored |
+| `--baseHref, --base-href <href>` | base href | mapped to Vite `--base` |
+| `--servePath <path>` | serve path | ignored |
+| `--statsJson` | emit `stats.json` | ignored |
+| `--sourceMap` | emit source maps | ignored |
+| `--deployUrl <url>` | deploy URL | ignored |
+| `--configEnvTarget <target>` | inject env config before build | ignored |
+| `--maxSpaceSize` | raise Node memory to 8 GB | ignored |
+| `--ci` | disable progress output | ignored |
+| `--dryRun` | print commands without running them | print without running |
+| `-w, --watch` | watch mode for tests | ignored |
+| `-d, --debug` | verbose logging | verbose logging |
+
+> For React apps, TypeScript type-checking stays in the app's own `tsc -b` step (part of the
+> `build` npm script); `eui-cli build-app` runs the Vite bundle step. The Angular-only quality
+> gates (`--skipLint` / `--skipTest`) and env-config injection do not apply to React.
+
+### `eui-cli lint-app`
+
+Lints an Angular application.
+
+```sh
+eui-cli lint-app [-p, --project <name>] [-d, --debug]
 ```
 
-Available options:
-- `appType`: `angular`, `mobile`, `web-spring-boot`, `web-maven`
-- `groupId`: Maven groupId (for web-spring-boot, e.g., `ec.europa.digit`)
-- `artifactId`: Maven artifactId (for web-spring-boot, e.g., `myapp`)
-- `appOptions`: `ecl` (use underscore for multiple: `ecl_option2`)
-- `appOptionsEclTheme`: `ecl-ec`, `ecl-eu`
-- `npmInstall`: `true`, `false`
-- `packageManager`: `yarn`, `pnpm`
-- `skills`: `true`, `false`
-- `skillsAll`: `true`, `false`
-- `skillsAgent`: agent name(s), space-separated or `*`
-- `skillsSkill`: skill name(s), space-separated or `*`
-- `skillsGlobal`: `true`, `false`
-- `skillsYes`: `true`, `false`
+### `eui-cli inject-config-app`
 
-### Build application
+Injects an environment-specific configuration file (`env-json-config-<target>.json`) into the app
+before serving/building. Used by the Angular `build-*` / `start-*` scripts via `--configEnvTarget`.
 
 ```sh
-eui-cli build-app [options]
+eui-cli inject-config-app -c, --configEnvTarget <target> [-d, --debug]
 ```
 
-Options:
-- `--skipLint` - Skip linting step
-- `--skipTest` - Skip testing step
-- `--skipCompile` - Skip compilation step
-- `-c, --configuration <config>` - Angular build configuration
-- `--baseHref, --base-href <href>` - Base href for the application
-- `--statsJson` - Generate stats.json file
-- `--sourceMap` - Generate source maps
+### `eui-cli generate-sprite`
 
-### Serve application
+Generates an SVG sprite from a folder of individual SVG files.
 
 ```sh
-eui-cli serve-app [options]
+eui-cli generate-sprite -i <input-folder> -o <output-file.svg>
 ```
 
-Options:
-- `-c, --configuration <config>` - Angular build configuration
-- `-p, --port <port>` - Port number (default: 4200)
-- `-h, --host <host>` - Host to serve on
-- `--proxyConfig <path>` - Path to proxy configuration file
-- `--open` - Open browser automatically
+| Option | Description |
+| --- | --- |
+| `-i, --inFolder <path>` | Input folder containing SVG files (**required**). |
+| `-o, --outFile <filename>` | Output sprite filename; must end in `.svg` (**required**). |
+| `-d, --debug` | Verbose logging. |
 
-### Lint application
+---
 
-```sh
-eui-cli lint-app
+## Generated project layouts
+
+### Angular (Desktop / Desktop EDS)
+
+```
+├── angular.json            # Angular workspace (EDS variant also wires @eui/eds-styles)
+├── package.json            # scripts delegate to eui-cli; deps via @eui/deps-base(+dev)
+├── proxy.conf.json         # dev proxy to a real backend
+├── proxy-mock.conf.json    # dev proxy to the local mock server
+├── mock/                   # json-server mock API (server.js, db/, app/routes, app/models)
+└── src/
+    ├── index.html          # Desktop EDS adds class="eui-21" on <body> (EDS token scope)
+    ├── main.ts
+    ├── styles.scss
+    ├── config/             # eUI app config
+    ├── environments/       # environment.ts / environment.prod.ts
+    └── app/
+        ├── app.component.*  # Desktop = eui-app shell · Desktop EDS = eds-shell
+        ├── app.config.ts    # providers, HTTP interceptors, i18n, app initializer
+        ├── app.routes.ts    # lazy-loaded feature routes
+        └── features/        # home / module1 / module2 sample features
 ```
 
-### Generate SVG sprite
+### React EDS
 
-```sh
-eui-cli generate-sprite -i <input-folder> -o <output-file>
+```
+├── index.html              # <body class="eui-21"> (EDS token scope)
+├── vite.config.ts          # Vite config; serves EDS icon sprites, proxies /api to the mock
+├── tsconfig*.json          # project references (app + node)
+├── eslint.config.mjs       # flat ESLint config (single quotes, TS recommended)
+├── package.json            # scripts delegate to eui-cli; deps via @eui/deps-base-react
+├── mock/                   # json-server mock API (same shape as the Angular mock)
+├── public/                 # host-owned static assets
+└── src/
+    ├── main.tsx            # mounts <App/> in a HashRouter; loads EDS + component styles
+    ├── App.tsx             # the EdsShell (toolbar + sidebar + routed content)
+    ├── routes.ts           # sidebar/route table
+    ├── styles.css          # app-level styles
+    └── pages/              # home / about example pages
 ```
 
-Options:
-- `-i, --inFolder <path>` - Input folder containing SVG files (required)
-- `-o, --outFile <filename>` - Output sprite filename with .svg extension (required)
+---
 
 ## Requirements
 
-- Node.js 24.x or higher
-- npm or yarn
+- **Node.js** `^20.19.0 || ^22.12.0 || >=24.15.0`
+- **Yarn** `>=1.22.4 <2` (or pnpm, experimental)
+- **JDK + Maven** — only for the `web-spring-boot` / `web-maven` application types.
+
+---
 
 ## License
 

package/lib/app-utils/build.js

@@ -51,6 +51,11 @@ module.exports.run = () => {
     prjName = project;
   }
 
+  // Vite React app — build with the Vite bundler instead of the Angular CLI.
+  if (utils.detectAppTool() === 'vite') {
+    return buildVite({ baseHref, dryRun });
+  }
+
   utils.logTitle(`Building application : ${prjName}...`);
 
   const ng = path.resolve(process.cwd(), 'node_modules', '@angular', 'cli', 'bin', 'ng');
@@ -140,3 +145,24 @@ module.exports.run = () => {
       }
 };
 
+/**
+ * Builds a standalone Vite React app via the local `vite` binary. TypeScript type-checking is
+ * done by the app's own `tsc -b` (kept in the app's `build` script chain); this runs the bundle
+ * step so the `eui-cli build-app` surface stays the same for both Angular and React apps.
+ */
+const buildVite = ({ baseHref, dryRun }) => {
+  utils.logTitle('Building Vite React application...');
+
+  const args = ['vite', 'build'];
+
+  if (baseHref) {
+    args.push(`--base=${baseHref}`);
+  }
+
+  utils.logInfo(`vite build with args ${args.join(' ')}`);
+
+  if (!dryRun) {
+    execSync(`npx ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
+  }
+};
+

package/lib/app-utils/serve.js

@@ -32,6 +32,11 @@ module.exports.run = () => {
 
   let { configuration, baseHref, servePath, host, proxyConfig, maxSpaceSize, port, disableHostCheck, open, debug, configEnvTarget, noLiveReload, project } = utils.getArgs();
 
+  // Vite React app — serve with the Vite dev server instead of the Angular CLI.
+  if (utils.detectAppTool() === 'vite') {
+    return serveVite({ port, host, open });
+  }
+
   const ng = path.resolve(process.cwd(), 'node_modules', '@angular', 'cli', 'bin', 'ng');
 
   let prjName = 'app';
@@ -93,3 +98,30 @@ module.exports.run = () => {
 
       return execSync(`node ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
 }
+
+/**
+ * Serves a standalone Vite React app via the local `vite` binary. Maps the shared serve options
+ * (port / host / open) onto Vite's flags so the `eui-cli serve-app` surface stays the same for
+ * both Angular and React apps.
+ */
+const serveVite = ({ port, host, open }) => {
+  utils.logTitle('Serving Vite React application...');
+
+  const args = ['vite'];
+
+  if (port) {
+    args.push(`--port=${port}`);
+  }
+  if (host) {
+    args.push(`--host=${host}`);
+  }
+  if (open === 'false') {
+    args.push('--no-open');
+  } else {
+    args.push('--open');
+  }
+
+  utils.logInfo(`vite serve with args ${args.join(' ')}`);
+
+  return execSync(`npx ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
+};

package/lib/build.js

@@ -5,11 +5,7 @@ const utils = require('./utils');
 const config = require('./config');
 
 module.exports.start = (options) => {
-    try {
-      build(options.config, options.targetPath)
-    } catch (e) {
-      throw e;
-    }
+    build(options.config, options.targetPath);
 }
 
 const build = (cliConfig, targetPath) => {
@@ -33,6 +29,14 @@ const build = (cliConfig, targetPath) => {
             copyAngular(angularPath, cliConfig, true);
       }
 
+      // BUILD REACT
+      if (appType === 'react') {
+            console.log('---building react');
+            const reactPath = utils.getAngularPath(targetPath, appName, appType, artifactId);
+            console.log(reactPath);
+            copyReact(reactPath, cliConfig);
+      }
+
       // BUILD web-maven
       if (appType === 'web-maven') {
             console.log('--building web-maven');
@@ -63,12 +67,29 @@ const copyAngular = (targetPath, cliConfig, overwrite = true) => {
         utils.copydir(config.angularBaseMobilePath, targetPath, overwrite);
       }
 
-      if (cliConfig.appOptions === 'ecl') {
+      // appOptions may be a plain string (interactive mode) or an array (automated `--config`
+      // parses `appOptions` on `_`, e.g. `ecl_something` -> ['ecl', ...]). Normalize to an array.
+      const appOptions = [].concat(cliConfig.appOptions || []);
+
+      if (appOptions.includes('ecl')) {
         console.log(`eUI ECL theme selected : ` + cliConfig.appOptionsEclTheme);
         utils.copydir(config.optionsPath[cliConfig.appOptionsEclTheme], targetPath, true);
       }
 
+      if (appOptions.includes('eds')) {
+        console.log(`eUI EDS desktop app-shell selected`);
+        utils.copydir(config.edsOptionPath, targetPath, true);
+      }
+
+      if (cliConfig.packageManager === 'pnpm') {
+        utils.copy(path.join(config.pnpmOptionPath.angular, 'package.json'), path.join(targetPath, 'package.json'));
+      }
+}
+
+const copyReact = (targetPath, cliConfig) => {
+      utils.copydir(config.reactBasePath, targetPath, true);
+
       if (cliConfig.packageManager === 'pnpm') {
-        utils.copy(path.join(config.pnpmOptionPath, 'package.json'), path.join(targetPath, 'package.json'));
+        utils.copy(path.join(config.pnpmOptionPath.react, 'package.json'), path.join(targetPath, 'package.json'));
       }
 }

package/lib/cli.js

@@ -50,9 +50,11 @@ module.exports.start = async (options) => {
 
     const appTypePrompt = new Select({
       name: 'appType',
-      message: 'Select an eUI Angular application type :',
+      message: 'Select an eUI application type :',
       choices: [
         'Desktop',
+        'Desktop EDS',
+        'React EDS',
         'Mobile Ionic',
         'eUI + Spring Boot web module - JDK + Maven required !!!',
         'eUI + Maven web module (JEE Spring maven web module) - JDK + Maven required !!!'
@@ -64,12 +66,22 @@ module.exports.start = async (options) => {
     // Map display name to value
     const appTypeMap = {
       'Desktop': 'angular',
+      'Desktop EDS': 'angular',
+      'React EDS': 'react',
       'Mobile Ionic': 'mobile',
       'eUI + Spring Boot web module - JDK + Maven required !!!': 'web-spring-boot',
       'eUI + Maven web module (JEE Spring maven web module) - JDK + Maven required !!!': 'web-maven'
     };
     answers.appType = appTypeMap[appTypeChoice];
 
+    // "Desktop EDS" is an Angular desktop app whose shell is composed with @eui/eds (eds-shell +
+    // EDS components) instead of the legacy @eui/components app-shell. It pre-selects the `eds`
+    // app-shell option, so the ECL/default app-shell prompt below is skipped for it.
+    const isEdsDesktop = appTypeChoice === 'Desktop EDS';
+    if (isEdsDesktop) {
+      answers.appOptions = 'eds';
+    }
+
     if (answers.appType === 'web-spring-boot') {
       const groupIdPrompt = new Input({
         name: 'groupId',
@@ -88,7 +100,9 @@ module.exports.start = async (options) => {
       answers.artifactId = await artifactIdPrompt.run();
     }
 
-    if (answers.appType !== 'mobile') {
+    // ECL app-shell options apply to the Angular-based types only (not mobile, not react, and
+    // not when the EDS desktop shell was already chosen up-front).
+    if (answers.appType !== 'mobile' && answers.appType !== 'react' && !isEdsDesktop) {
       const appOptionsPrompt = new Select({
         name: 'appOptions',
         message: 'Select one or more additional configuration options :',