demos: restore theme switcher in local demo server (#33221)

EugeniyKiyashko · web-flow · commit 1b2269048485 · 2026-04-10T13:45:35.000+04:00
diff --git a/apps/demos/index.html b/apps/demos/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="node_modules/devextreme-dist/css/dx.dark.css" />
+    <link rel="stylesheet" type="text/css" href="node_modules/devextreme-dist/css/dx.fluent.blue.dark.css" />
     <script src="node_modules/devextreme-dist/js/dx.all.js"></script>
     <style>
       body,
@@ -72,7 +72,7 @@
 
       const processLink = () => {
         if (window.location.hash === "") {
-          window.location.hash = "#Demos/DataGrid/Overview/jQuery/dx.light.css";
+          window.location.hash = "#Demos/DataGrid/Overview/jQuery/dx.fluent.blue.light.css";
         }
 
         const pathParts = window.location.hash
diff --git a/apps/demos/utils/shell/server.js b/apps/demos/utils/shell/server.js
@@ -8,15 +8,18 @@ const open = require('open');
 const { join, normalize } = require('path');
 const { readFileSync, readdirSync } = require('fs');
 
-const root = join(__dirname, '..', '..', '..', '..');
+const root = join(__dirname, '..', '..');
 const indexFileName = 'index.html';
-const cssDirectory = join(root, 'node_modules', 'devextreme', 'dist', 'css');
+const cssDirectory = join(root, 'node_modules', 'devextreme-dist', 'css');
 const getAvailableThemes = readdirSync(cssDirectory).filter((f) => /^dx\.(?!common).*\.css$/i.test(f));
 const baseTheme = 'dx.light.css';
-const port = process.argv[2] ?? 3000;
+const portArgument = process.argv.slice(2).findLast((argument) => argument !== '--');
+const port = Number(portArgument) || 8080;
+
+const getDemoPath = (requestPath) => requestPath.replace(/^\/apps\/demos(?=\/|$)/, '');
 
 const demoIndexHandler = (request, response) => {
-  const parts = request.path.split('/');
+  const parts = getDemoPath(request.path).split('/');
 
   parts.unshift(root);
 
@@ -39,8 +42,12 @@ const demoIndexHandler = (request, response) => {
 const app = express();
 app.use(cookieParser());
 
+app.get('/apps/demos', (request, response) => response.redirect('/'));
+app.get(`/apps/demos/${indexFileName}`, (request, response) => response.redirect('/'));
 app.get('/Demos/:widget/:name/:approach', demoIndexHandler);
 app.get(`/Demos/:widget/:name/:approach/${indexFileName}`, demoIndexHandler);
+app.get('/apps/demos/Demos/:widget/:name/:approach', demoIndexHandler);
+app.get(`/apps/demos/Demos/:widget/:name/:approach/${indexFileName}`, demoIndexHandler);
 app.get('/themes', (request, response) => response.send(getAvailableThemes));
 app.use(
   serveStatic(root, { index: [indexFileName] }),
@@ -49,4 +56,4 @@ app.use(
 
 app.listen(port);
 
-open(`http://localhost:${port}/apps/demos`);
+open(`http://localhost:${port}/`);
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "all:build-dev": "pnpm run all:build --dev",
     "all:pack-and-copy": "nx run-many -t pack-and-copy",
     "demos:prepare": "nx run devextreme-demos:prepare-js",
-    "demos:start": "http-server ./apps/demos --port 8080 -c-1"
+    "demos:start": "node apps/demos/utils/shell/server.js"
   },
   "nx": {},
   "private": true,
