DevExpress · GoodDayForSurf · Feb 4, 2025 · Feb 4, 2025 · Feb 4, 2025 · Feb 18, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/devextreme-cli/package-lock.json b/packages/devextreme-cli/package-lock.json
diff --git a/packages/devextreme-cli/package.json b/packages/devextreme-cli/package.json
@@ -52,6 +52,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "^10.1.0",
     "cross-env": "^5.2.1",
+    "create-vite": "6.3.1",
     "eslint": "^7.32.0",
     "eslint-config-angular": "^0.5.0",
     "eslint-config-prettier": "^8.10.0",

diff --git a/packages/devextreme-cli/src/applications/application.react.js b/packages/devextreme-cli/src/applications/application.react.js
@@ -13,23 +13,22 @@ const stringUtils = require('../utility/string');
 const typescriptUtils = require('../utility/typescript-extension');
 const removeFile = require('../utility/file-operations').remove;
 const latestVersions = require('../utility/latest-versions');
-const { extractToolingVersion } = require('../utility/extract-tooling-version');
 const defaultStyles = [
     'devextreme/dist/css/dx.light.css'
 ];
 
 const getExtension = (appPath) => {
-    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.js';
+    return fs.existsSync(path.join(appPath, 'src', 'App.tsx')) ? '.tsx' : '.jsx';
 };
 
 const pathToPagesIndex = () => {
     const extension = getExtension(process.cwd());
     return path.join(process.cwd(), 'src', 'pages', `index${extension}`);
 };
 
-const preparePackageJsonForTemplate = (appPath, appName, isTypeScript) => {
+const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'sass', version: '^1.34.1' },
+        { name: 'sass-embedded', version: '^1.85.1' },
         { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
         { name: 'react-router-dom', version: '^6.3.0' },
     ];
@@ -60,27 +59,25 @@ const create = async(appName, options) => {
         layout: stringUtils.classify(layoutType),
         isTypeScript: typescriptUtils.isTypeScript(templateType)
     });
-    const toolingVersion = extractToolingVersion(options);
-    const commandArguments = [`-p=create-react-app${toolingVersion}`, 'create-react-app', appName];
 
-    const templateSuffix = templateOptions.isTypeScript ? '-typescript' : '';
-    const templatePath = path.resolve(__dirname, `../templates/cra-template${templateSuffix}`);
+    const commandArguments = [`-p=create-vite@${latestVersions['create-vite']}`, 'create-vite', appName];
 
-    commandArguments.push(`--template file:${templatePath}`);
+    commandArguments.push(`--template react${templateOptions.isTypeScript ? '-ts' : ''}`);
 
     await runCommand('npx', commandArguments);
 
     const appPath = path.join(process.cwd(), appName);
 
     modifyIndexHtml(appPath, templateOptions.project);
+
     addTemplate(appPath, appName, templateOptions);
 };
 
 const modifyIndexHtml = (appPath, appName) => {
-    const indexHtmlPath = path.join(appPath, 'public', 'index.html');
+    const indexHtmlPath = path.join(appPath, 'index.html');
 
     let htmlContent = fs.readFileSync(indexHtmlPath).toString();
-    htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);
+    htmlContent = htmlContent.replace(/<title>[^<]+<\/title>/, `<title>${appName}<\/title>`);
     htmlContent = htmlContent.replace('<body>', '<body class="dx-viewport">');
 
     fs.writeFileSync(indexHtmlPath, htmlContent);
@@ -97,7 +94,6 @@ const addTemplate = (appPath, appName, templateOptions) => {
     );
 
     const manifestPath = path.join(appPath, 'public', 'manifest.json');
-    const indexPath = path.join(appPath, 'src', templateOptions.isTypeScript ? 'index.tsx' : 'index.js');
 
     const styles = [
         './themes/generated/theme.additional.css',
@@ -108,15 +104,15 @@ const addTemplate = (appPath, appName, templateOptions) => {
     ];
 
     templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
-    removeFile(path.join(appPath, 'src', 'App.css'));
-    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.js'));
+
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.jsx'));
+
     if(!templateOptions.empty) {
         addSamplePages(appPath, templateOptions);
     }
 
     preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
     updateJsonPropName(manifestPath, appName);
-    addPolyfills(packageJsonUtils.getPackageJsonPath(), indexPath);
     install({}, appPath, styles);
 };
 
@@ -130,15 +126,6 @@ const install = (options, appPath, styles) => {
     packageManager.runInstall({ cwd: appPath });
 };
 
-const addPolyfills = (packagePath, indexPath) => {
-    const packages = [
-        { name: 'react-app-polyfill', version: '^1.0.0' }
-    ];
-
-    packageJsonUtils.addDependencies(packagePath, packages);
-    moduleUtils.insertImport(indexPath, './polyfills');
-};
-
 const addStylesToApp = (filePath, styles) => {
     styles.forEach(style => {
         moduleUtils.insertImport(filePath, style);

diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/LICENSE b/packages/devextreme-cli/src/templates/cra-template-typescript/LICENSE
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/README.md b/packages/devextreme-cli/src/templates/cra-template-typescript/README.md
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/package.json b/packages/devextreme-cli/src/templates/cra-template-typescript/package.json
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template.json b/packages/devextreme-cli/src/templates/cra-template-typescript/template.json
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/README.md b/packages/devextreme-cli/src/templates/cra-template-typescript/template/README.md
diff --git a/packages/devextreme-cli/src/templates/cra-template-typescript/template/gitignore b/packages/devextreme-cli/src/templates/cra-template-typescript/template/gitignore