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

package/lib/config.js

@@ -9,6 +9,8 @@ module.exports.skeletonsPath = skeletonsPath;
 module.exports.angularBasePath = path.join(skeletonsPath, '_angular/base');
 module.exports.angularBaseMobilePath = path.join(skeletonsPath, '_angular/base-mobile');
 
+module.exports.reactBasePath = path.join(skeletonsPath, '_react/base');
+
 module.exports.webMavenPath = path.join(skeletonsPath, 'web-maven');
 module.exports.webSpringBootPath = path.join(skeletonsPath, 'web-spring-boot');
 
@@ -19,7 +21,14 @@ module.exports.optionsPath = {
     "ecl-ec": path.join(skeletonsPath, '_angular/options/ecl-ec'),
     "ecl-eu": path.join(skeletonsPath, '_angular/options/ecl-eu'),
 };
-module.exports.pnpmOptionPath = path.join(skeletonsPath, '_angular/options/pnpm');
+// pnpm package.json overlays, keyed by the app stack (Angular vs React). The pnpm variant lists
+// all dependencies explicitly (no @eui/deps-* meta-package) since pnpm is stricter about
+// hoisting; each stack needs its own set.
+module.exports.pnpmOptionPath = {
+    angular: path.join(skeletonsPath, '_angular/options/pnpm'),
+    react: path.join(skeletonsPath, '_react/options/pnpm'),
+};
+module.exports.edsOptionPath = path.join(skeletonsPath, '_angular/options/eds');
 
 module.exports.version = version;
 

package/lib/skeletons/_angular/base/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.21",
+    "version": "22.0.0-alpha.22",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -20,9 +20,10 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "22.0.0-alpha.21"
+        "@eui/deps-base": "22.0.0-alpha.22"
     },
     "devDependencies": {
+        "@eui/deps-base-dev": "22.0.0-alpha.22",
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",
         "nodemon": "3.1.11",

package/lib/skeletons/_angular/base-mobile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.21",
+    "version": "22.0.0-alpha.22",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",

package/lib/skeletons/_angular/options/eds/src/app/app.component.html

@@ -0,0 +1,35 @@
+<eds-shell>
+    <!-- Toolbar -->
+    <eds-shell-toolbar>
+        <eds-shell-menu-toggle (menuToggle)="onToggleSidebar()"></eds-shell-menu-toggle>
+        <eds-shell-toolbar-logo></eds-shell-toolbar-logo>
+        <eds-shell-toolbar-environment>MOCK</eds-shell-toolbar-environment>
+        <eds-shell-toolbar-app appName="appName"></eds-shell-toolbar-app>
+
+        <eds-shell-toolbar-end>
+            <button edsIconButton color="brand" icon="bell" ariaLabel="Notifications"></button>
+            <button edsIconButton color="brand" icon="gear" ariaLabel="Settings"></button>
+            <eds-user-profile
+                fullName="John Doe"
+                [isShowUserInfos]="false"
+                [isShowAvatarInitials]="true">
+                <eds-user-profile-menu>
+                    <eds-user-profile-menu-item>{{ 'eui.my-profile-informations' | translate }}</eds-user-profile-menu-item>
+                    <eds-user-profile-menu-item>{{ 'eui.sign-out' | translate }}</eds-user-profile-menu-item>
+                </eds-user-profile-menu>
+            </eds-user-profile>
+        </eds-shell-toolbar-end>
+    </eds-shell-toolbar>
+
+    <!-- Sidebar -->
+    <eds-shell-sidebar collapseMode="icons">
+        <eds-shell-sidebar-nav [items]="sidebarItems" [hasIcons]="true"></eds-shell-sidebar-nav>
+    </eds-shell-sidebar>
+
+    <!-- Main content -->
+    <eds-shell-content>
+        <router-outlet></router-outlet>
+    </eds-shell-content>
+
+    <eds-shell-footer copyright="© European Union"></eds-shell-footer>
+</eds-shell>

package/lib/skeletons/_angular/options/eds/src/app/app.component.spec.ts

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { EDS_SHELL } from '@eui/eds/eds-shell';
+import { routes } from './app.routes';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { AppStarterService } from './app-starter.service';
+import { CONFIG_TOKEN, I18nService, I18nState, translateConfig, UserService } from '@eui/core';
+import { EuiAppConfig } from '@eui/core';
+import { Observable, of } from 'rxjs';
+import { provideTranslateService } from '@ngx-translate/core';
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+// eslint-disable-next-line
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+    let userServiceMock: SpyObj<UserService>;
+    let i18nServiceMock: SpyObj<I18nService>;
+    let configMock: EuiAppConfig;
+    beforeEach(async () => {
+        type GetStateReturnType<T> = T extends keyof I18nState ? Observable<I18nState[T]> : Observable<I18nState>;
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = {
+            init: vi.fn(),
+            getState: vi.fn(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
+                if (typeof key === 'string') {
+                    return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
+                }
+                return of({ activeLang: 'en' }) as GetStateReturnType<K>;
+            })
+        } as SpyObj<I18nService>;
+        configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
+        await TestBed.configureTestingModule({
+            imports: [
+                RouterModule.forRoot(routes),
+                ...EDS_SHELL,
+                provideTranslateService(translateConfig),
+            ],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                AppStarterService,
+                {provide: UserService, useValue: userServiceMock},
+                {provide: I18nService, useValue: i18nServiceMock},
+                {provide: CONFIG_TOKEN, useValue: configMock},
+            ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+    });
+    it('should create the app', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/lib/skeletons/_angular/options/eds/src/app/app.component.ts

@@ -0,0 +1,44 @@
+import { Component, viewChild } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EDS_SHELL, EdsShell, EdsMenuItem } from '@eui/eds/eds-shell';
+import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
+import { EDS_USER_PROFILE } from '@eui/eds/eds-user-profile';
+
+/**
+ * Desktop EDS application shell. Mirrors the default Angular desktop skeleton (same routes,
+ * features, config and interceptors) but composes the layout with the modern `@eui/eds`
+ * `eds-shell` and EDS components instead of the legacy `@eui/components` `eui-app`.
+ *
+ * The sidebar nav items carry a `url` that the `eds-menu` resolves through Angular's router
+ * (`[routerLink]`), so navigation is declarative — no manual `navigate()` call is needed.
+ */
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [
+        RouterOutlet,
+        TranslatePipe,
+        ...EDS_SHELL,
+        ...EDS_ICON_BUTTON,
+        ...EDS_USER_PROFILE,
+    ],
+})
+export class AppComponent {
+    private shell = viewChild.required(EdsShell);
+
+    sidebarItems: EdsMenuItem[] = [
+        { label: 'Home', url: 'screen/home', icon: 'house' },
+        {
+            label: 'Module 1', url: 'screen/module1', icon: 'stack', children: [
+                { label: 'page 1', url: 'screen/module1/page1' },
+                { label: 'page 2', url: 'screen/module1/page2' },
+            ],
+        },
+        { label: 'Module 2', url: 'screen/module2', icon: 'folder' },
+    ];
+
+    onToggleSidebar(): void {
+        this.shell().toggleSidebar();
+    }
+}

package/lib/skeletons/_angular/options/eds/src/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Application name</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<!-- The `eui-21` scope class is required by EDS styling (it provides the --eds-* tokens). -->
+<body class="eui-21">
+  <app-root>
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+    </div>
+  </app-root>
+</body>
+
+</html>

package/lib/skeletons/_angular/options/pnpm/package.json

@@ -1,71 +1,121 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.21",
+    "version": "22.0.0-alpha.22",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
         "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
-        "start-serve": "eui-cli serve-app --configuration=proxy-mock",
+        "start-serve": "eui-cli serve-app --configuration=proxy-mock --configEnvTarget=mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
         "start-proxy": "eui-cli serve-app --configuration=proxy",
         "start-local": "eui-cli serve-app",
         "build": "eui-cli build-app",
         "build-dev": "eui-cli build-app --configuration=development --configEnvTarget=dev",
-        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipLint --skipTest",
-        "app:inject-config": "eui-cli inject-config-app"
+        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "build-prod-skip-test": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipTest",
+        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "app:build": "eui-cli build-app",
+        "app:inject-config": "eui-cli inject-config-app",
+        "generate-sprite": "eui-cli generate-sprite"
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "21.2.5",
-        "@angular/common": "21.2.5",
-        "@angular/compiler": "21.2.5",
-        "@angular/core": "21.2.5",
-        "@angular/forms": "21.2.5",
-        "@angular/platform-browser": "21.2.5",
-        "@angular/platform-browser-dynamic": "21.2.5",
-        "@angular/router": "21.2.5",
-        "@angular/elements": "21.2.5",
-        "@angular/language-service": "21.2.5",
-        "@angular/service-worker": "21.2.5",
-        "@angular/cdk": "21.2.3",
-        "@angular/material": "21.2.3",
-        "@angular/material-moment-adapter": "21.2.3",
-        "@angular-devkit/build-angular": "21.2.3",
+        "@angular/animations": "22.1.2",
+        "@angular/common": "22.1.2",
+        "@angular/compiler": "22.1.2",
+        "@angular/core": "22.1.2",
+        "@angular/forms": "22.1.2",
+        "@angular/platform-browser": "22.1.2",
+        "@angular/platform-browser-dynamic": "22.1.2",
+        "@angular/router": "22.1.2",
+        "@angular/elements": "22.1.2",
+        "@angular/service-worker": "22.1.2",
+        "@angular/cdk": "22.1.2",
+        "@angular/material": "22.1.2",
+        "@angular/material-moment-adapter": "22.1.2",
+        "@angular/material-luxon-adapter": "22.1.2",
+        "luxon": "3.7.2",
         "rxjs": "7.8.2",
         "tslib": "2.8.1",
-        "zone.js": "0.15.1",
-        "@types/lodash": "4.17.20",
-        "intl": "1.2.5",
-        "deepmerge-ts": "7.1.5",
-        "@ngx-translate/core": "15.0.0",
-        "@ngx-translate/http-loader": "8.0.0",
-        "reselect": "5.1.1",
-        "ngx-mask": "20.0.3",
-        "hammerjs": "2.0.8",
-        "pikaday": "1.8.2",
-        "lodash-es": "4.17.23",
+        "zone.js": "0.16.2",
+        "deepmerge-ts": "8.0.1",
+        "deepmerge": "4.3.1",
+        "reselect": "5.2.0",
+        "ngx-mask": "22.0.1",
+        "@ngx-translate/core": "18.0.0",
+        "@ngx-translate/http-loader": "18.0.0",
+        "lodash-es": "4.18.1",
         "localforage": "1.10.0",
-        "@eui/base": "22.0.0-alpha.21",
-        "@eui/core": "22.0.0-alpha.21",
-        "@eui/styles": "22.0.0-alpha.21",
-        "@eui/components": "22.0.0-alpha.21",
-        "@eui/ecl": "22.0.0-alpha.21",
-        "@eui/eds": "22.0.0-alpha.21",
-        "@eui/eds-styles": "22.0.0-alpha.21"
+        "hammerjs": "2.0.8",
+        "@duetds/date-picker": "1.4.0",
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0",
+        "embla-carousel-angular": "22.0.0",
+        "embla-carousel-auto-scroll": "8.6.0",
+        "moment": "2.31.0",
+        "quill": "2.0.3",
+        "quill-delta": "5.1.0",
+        "quill-better-table": "1.2.10",
+        "apexcharts": "5.16.0",
+        "marked": "18.0.5",
+        "ngx-markdown": "22.0.0",
+        "prismjs": "1.30.0",
+        "@stackblitz/sdk": "1.11.1",
+        "@eui/base": "22.0.0-alpha.22",
+        "@eui/core": "22.0.0-alpha.22",
+        "@eui/styles": "22.0.0-alpha.22",
+        "@eui/components": "22.0.0-alpha.22",
+        "@eui/showcase": "22.0.0-alpha.22",
+        "@eui/ecl": "22.0.0-alpha.22",
+        "@eui/eds": "22.0.0-alpha.22",
+        "@eui/eds-styles": "22.0.0-alpha.22",
+        "@eui/eds-wc": "22.0.0-alpha.22"
     },
     "devDependencies": {
-        "@angular/compiler-cli": "21.2.5",
-        "@angular/build": "21.2.3",
-        "@angular/cli": "21.2.3",
-        "ng-packagr": "23.0.0-alpha.1",
-        "@eui/cli": "22.0.0-alpha.21",
-        "typescript": "~6.0.2",
+        "@eui/cli": "22.0.0-alpha.22",
+        "@angular/compiler-cli": "22.1.2",
+        "@angular/language-service": "22.1.2",
+        "@angular/build": "22.1.4",
+        "@angular/cli": "22.1.4",
+        "ng-packagr": "22.1.1",
+        "typescript": "6.0.3",
+        "@types/node": "24.13.3",
+        "@types/lodash-es": "4.17.12",
+        "@types/quill": "2.0.14",
+        "ts-node": "10.9.2",
+        "eslint": "10.8.1",
+        "angular-eslint": "22.1.0",
+        "@angular-eslint/builder": "22.1.0",
+        "@angular-eslint/eslint-plugin": "22.1.0",
+        "@angular-eslint/eslint-plugin-template": "22.1.0",
+        "@angular-eslint/schematics": "22.1.0",
+        "@angular-eslint/template-parser": "22.1.0",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "eslint-plugin-jsdoc": "63.0.12",
+        "eslint-plugin-import": "2.32.0",
+        "typescript-eslint": "8.63.0",
+        "@typescript-eslint/parser": "8.63.0",
+        "@typescript-eslint/eslint-plugin": "8.63.0",
+        "@eslint/js": "9.39.1",
+        "@eslint/eslintrc": "3.3.5",
+        "vitest": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "jsdom": "30.0.1",
+        "xhr-mock": "2.5.1",
+        "@compodoc/compodoc": "2.0.0",
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",
-        "nodemon": "3.1.10",
+        "nodemon": "3.1.11",
         "lowdb": "1.0.0",
-        "body-parser": "2.2.0",
-        "express": "5.1.0",
-        "uuid": "13.0.0"
+        "body-parser": "1.20.3",
+        "express": "4.21.2"
+    },
+    "resolutions": {
+        "semver": ">=7.5.2",
+        "dompurify": ">=3.2.4",
+        "tmp": ">0.2.4",
+        "tablesort": "5.6.0"
     }
 }

package/lib/skeletons/_react/base/README.md

@@ -0,0 +1,65 @@
+# eUI React App
+
+A React + Vite starter application built with [`@eui/eds-react`](https://eui.ecdevops.eu) — the
+pure-React port of the EU Design System (EDS) components — and React Router.
+
+## Prerequisites
+
+- Node.js `^20.19.0 || ^22.12.0 || >=24.15.0`
+- Yarn 1.x (or pnpm)
+
+## Getting started
+
+Install dependencies (done automatically by the eUI CLI when you opt in):
+
+```sh
+yarn
+```
+
+Start the dev server (opens on http://localhost:4200):
+
+```sh
+npm start
+```
+
+## Available scripts
+
+| Script | Description |
+| --- | --- |
+| `npm start` | Start the Vite dev server with HMR |
+| `npm run build` | Type-check and build the production bundle into `dist/` |
+| `npm run preview` | Preview the production build locally |
+| `npm run lint` | Lint the `src` folder with ESLint |
+| `npm run test` | Run unit tests with Vitest |
+
+## Project structure
+
+```
+├── index.html          # App entry; <body class="eui-21"> provides the EDS token scope
+├── vite.config.ts      # Vite config; serves EDS icon sprites under /assets/eds
+├── tsconfig*.json       # TypeScript project references
+├── eslint.config.mjs   # Flat ESLint config (single quotes, TS recommended)
+└── src/
+    ├── main.tsx        # Mounts <App/> in a HashRouter; loads EDS + component styles
+    ├── App.tsx         # The EdsShell (toolbar + sidebar + routed content)
+    ├── routes.ts       # Navigation table (sidebar items)
+    ├── styles.css      # App-level styles
+    └── pages/          # Route pages (home, about)
+```
+
+## Adding a page
+
+1. Create `src/pages/my-page.tsx` exporting a component.
+2. Add an entry to `NAV_ITEMS` in `src/routes.ts` (path, label, EDS icon name).
+3. Add a `<Route>` for it in `src/App.tsx`.
+
+## Styling
+
+The EDS design tokens (`--eds-*`) are provided by `@eui/eds-styles` and are available anywhere
+under the `eui-21` scope (set on `<body>`). Prefer the `eds-u-*` utility classes for layout. All
+`@eui/eds-react` component styles are loaded via the combined `@eui/eds-react/styles.css` barrel
+in `main.tsx`; to reduce bundle size you can instead import only the per-component CSS you use.
+
+## License
+
+EUPL-1.1

package/lib/skeletons/_react/base/eslint.config.mjs

@@ -0,0 +1,17 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    { ignores: ['dist', 'node_modules'] },
+    {
+        files: ['src/**/*.{ts,tsx}'],
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        rules: {
+            quotes: ['error', 'single', { avoidEscape: true }],
+            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            'prefer-const': 'error',
+            'no-var': 'error',
+        },
+    },
+);

package/lib/skeletons/_react/base/gitignore_TO_REPLACE

@@ -0,0 +1,34 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+**/node_modules
+**/dist
+**/out-tsc
+**/tmp
+**/coverage
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+npm-debug.log
+yarn-error.log
+*.local
+
+# Vite
+.vite
+
+# System Files
+.DS_Store
+Thumbs.db

package/lib/skeletons/_react/base/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>eUI React App</title>
+    </head>
+    <!-- The `eui-21` scope class is required by EDS styling (it provides the --eds-* tokens). -->
+    <body class="eui-21">
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/lib/skeletons/_react/base/mock/app/models/user.js

@@ -0,0 +1,6 @@
+module.exports = {
+  userId: '',
+  firstName: '',
+  lastName: '',
+  email: '',
+}

package/lib/skeletons/_react/base/mock/app/routes/index.js

@@ -0,0 +1,5 @@
+const userRoutes = require('./user_routes');
+
+module.exports = function (app, db) {
+    userRoutes(app, db);
+};

package/lib/skeletons/_react/base/mock/app/routes/user_routes.js

@@ -0,0 +1,44 @@
+const crypto = require('crypto');
+const User = require('../models/user');
+
+module.exports = function (app, db) {
+  db.then(db => {
+    app.get('/api/user-details', (req, res) => {
+      res.send(db.get('user-details'))
+    });
+
+    app.get('/api/users', (req, res) => {
+      res.send(db.get('users'))
+    });
+
+    app.get('/api/users/:userId', (req, res) => {
+      res.send(
+        db.get('users')
+          .find({ userId: req.params.userId })
+      );
+    });
+
+    app.put('/api/users/:userId', (req, res) => {
+      db.get('users')
+        .find({ userId: req.params.userId })
+        .assign( { ...req.body } )
+        .write()
+        .then(user => res.send(user))
+    });
+
+    app.delete('/api/users/:userId', (req, res) => {
+      db.get('users')
+        .remove({ userId: req.params.userId })
+        .write()
+        .then(res.send())
+    });
+
+    app.post('/api/users', (req, res) => {
+      db.get('users')
+        .push({ ...User, ...req.body, ...{ userId: crypto.randomUUID() } })
+        .last()
+        .write()
+        .then(user => res.send(user))
+    });
+  });
+};

package/lib/skeletons/_react/base/mock/db/db.json

@@ -0,0 +1,10 @@
+{
+  "user-details": {
+    "userId": "doejohn",
+    "firstName": "John",
+    "lastName": "Doe",
+    "email": "John.DOE@ec.europa.eu"
+  },
+  "users": [
+  ]
+}

package/lib/skeletons/_react/base/mock/server.js

@@ -0,0 +1,23 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const app = express();
+const low = require('lowdb');
+const FileAsync = require('lowdb/adapters/FileAsync');
+const adapter = new FileAsync('mock/db/db.json');
+const db = low(adapter);
+const port = 3000;
+
+app.use(express.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+// const cors = require('cors');
+// if needed to be reached from another localhost server for local testing a distributed app f.e.
+// app.use(cors({
+//     origin: 'http://127.0.0.1:8080',
+//     credentials: true,
+// }));
+
+require('./app/routes')(app, db);
+
+app.listen(port, () => {
+    console.log('We are live on ' + port);
+});

package/lib/skeletons/_react/base/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "eui-react-app",
+    "version": "22.0.0-alpha.22",
+    "license": "EUPL-1.1",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-serve": "eui-cli serve-app",
+        "start": "npm-run-all --parallel start-mock-server start-serve",
+        "start-local": "eui-cli serve-app",
+        "build": "tsc -b && eui-cli build-app",
+        "preview": "vite preview",
+        "lint": "eslint src --ext .ts,.tsx",
+        "test": "vitest run"
+    },
+    "dependencies": {
+        "@eui/deps-base-react": "22.0.0-alpha.22"
+    },
+    "devDependencies": {
+        "@eui/cli": "22.0.0-alpha.22",
+        "npm-run-all": "4.1.5",
+        "json-server": "1.0.0-beta.3",
+        "nodemon": "3.1.11",
+        "lowdb": "1.0.0",
+        "body-parser": "1.20.3",
+        "express": "4.21.2"
+    }
+}