Add a single script to build and prepare demos locally (#31616)

Author: alexslavr

apps/demos/README.md

@@ -1,65 +1,68 @@
 # DevExtreme Demos
 
-This repository contains technical DevExtreme demos for Angular, React, Vue, jQuery, ASP.NET MVC, and ASP.NET Core.
+This repository contains technical DevExtreme demos for Angular, React, Vue, and jQuery.
 
 To run the demos on your machine, clone this repository, run `pnpm install`, and follow the instructions below.
 
 ## Prepare Demos for Development
-Before running you need execute in `monorepo/root`:
 
-```
-pnpm run all:build-dev
-```
+### Run demos locally
 
-To prepare demos for development:
+In `monorepo/root`
 
+Build all dependencies and prepare systemJS configs by executing:
 ```
-pnpm run prepare-js
+pnpm run demos:prepare
 ```
 
-Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. Run the following command to create the bundles and replace the SystemJS configuration:
-
+Start webserver:
 ```
-pnpm run prepare-bundles
+pnpm run demos:start
 ```
+Navigate to http://localhost:8080/.
+
+You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks.
+
 
-To return to using separate files from `node_modules`, run `pnpm run prepare-js`.
+### Bundled mode
 
+Angular, Vue, and React demos can use bundles instead of separate files from `node_modules`. With bundles, demos launch faster but become harder to debug. 
 
-### Launch
+In `apps/demos`
+
+Run the following command to create the bundles and replace the SystemJS configuration:
 
-#### Option 1
 ```
-pnpm run launch-demo
+pnpm run prepare-bundles
 ```
 
-#### Option 2
-1. Run ```pnpm run webserver ``` from `monorepo/root`
-2. Navigate to http://localhost:8080/apps/demos.
+To return to using separate files from `node_modules`, run:
 
-You can pass additional parameter to specify port. It can be useful when you need to fast switching between one demo on different frameworks:
+```
+pnpm run prepare-js
+```
 
-### Before Commiting Сhanges
+### Before Commiting Changes
 
-For fix autofixed errors:
+Auto-fix lint errors:
 
 ```
 pnpm run fix-lint
 ```
 
-### Development
+### Adding new demo
 
 1. Run the following script to add a new demo:
 
     ```
     pnpm run add-demo
     ```
 
-1. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
+2. Use the built-in CLI to choose or enter the category, the demo name, and the technology for the new demo.
 
 ### TS React Infrastructure
 
-1. After you make any changes in React TypeScript sources, run the following command:
+After you make any changes in React TypeScript sources, run the following command:
 
 ```
 pnpm run convert-to-js split
@@ -71,9 +74,7 @@ If you want to run this script on specific folder you can pass it to the argumen
 pnpm run convert-to-js "JSDemos/Demos/Diagram/**/React"
 ```
 
-1. To ensure that React JavaScript and TypeScript sources are always in sync, the following GitHub action is used: "Check generated JS demos".
-
-
+The "Check generated JS demos" GitHub Action ensures that the React JavaScript and TypeScript sources remain in sync.
 ## See Also
 
 - [Technical demos online](https://js.devexpress.com/Demos/)

apps/demos/project.json

@@ -102,6 +102,25 @@
         "{projectRoot}/**/*"
       ],
       "cache": true
+    },
+    "prepare-js": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "prepare-js"
+      },
+      "dependsOn": [
+        { "projects": ["devextreme"], "target": "build" },
+        { "projects": ["devextreme-angular", "devextreme-react", "devextreme-vue"], "target": "pack" }
+      ],
+      "inputs": [
+        "default",
+        "{projectRoot}/gulpfile.js/**/*",
+        "{projectRoot}/rollup.devextreme-angular.umd.config.mjs"
+      ],
+      "outputs": [
+        "{projectRoot}/Demos/**/config.js"
+      ],
+      "cache": true
     }
   },
   "namedInputs": {

package.json

@@ -21,7 +21,8 @@
     "all:build": "ts-node tools/scripts/build-all.ts",
     "all:build-dev": "pnpm run all:build --dev",
     "all:pack-and-copy": "nx run-many -t pack-and-copy",
-    "webserver": "http-server --port 8080 -c-1"
+    "demos:prepare": "nx run devextreme-demos:prepare-js",
+    "demos:start": "http-server ./apps/demos --port 8080 -c-1"
   },
   "nx": {},
   "private": true,