diff --git a/packages/devextreme-cli/src/application.js b/packages/devextreme-cli/src/application.js index 22186055a..a5a65228b 100644 --- a/packages/devextreme-cli/src/application.js +++ b/packages/devextreme-cli/src/application.js @@ -2,12 +2,33 @@ const angularApplication = require('./applications/application.angular'); const reactApplication = require('./applications/application.react'); const nextjsApplication = require('./applications/application.nextjs'); const vueApplication = require('./applications/application.vue'); +const getReactAppType = require('./utility/prompts/react-app-type'); const printHelp = require('./help').printHelp; const isApplicationCommand = (command) => { return [ 'new', 'add' ].includes(command); }; +const handleWrongAppType = (appType, command) => { + console.error(`The '${appType}' application type is not valid`); + printHelp(command); +}; + +const createReact = async(appName, options, command) => { + const reactAppType = await getReactAppType(options['app-type']); + + switch(reactAppType) { + case 'vite': + await reactApplication.create(appName, options); + return; + case 'nextjs': + await nextjsApplication.create(appName, options); + return; + default: + handleWrongAppType(reactAppType, command); + } +}; + const run = async(commands, options, devextremeConfig) => { if(!commands[1]) { console.error('Command is incomplete. Please specify parameters.'); @@ -24,18 +45,15 @@ const run = async(commands, options, devextremeConfig) => { await angularApplication.create(appName, options); return; case 'react-app': - await reactApplication.create(appName, options); - return; - case 'nextjs-app': - await nextjsApplication.create(appName, options); + await createReact(appName, options, commands[0]); return; case 'vue-app': await vueApplication.create(appName, options); return; default: - console.error(`The '${app}' application type is not valid`); - printHelp(commands[0]); + handleWrongAppType(app, commands[0]); } + } else { if(commands[0] === 'add') { if(commands[1] === 'devextreme-angular') { diff --git a/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx b/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx index ffd680ad3..1b76cc188 100644 --- a/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx +++ b/packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx @@ -69,7 +69,7 @@ export default function Page() {

Thanks for using the DevExtreme React App Template.

This application was built using - create-vite + NextJs and DevExtreme CLI and includes the following DevExtreme components: diff --git a/packages/devextreme-cli/src/utility/prompts/react-app-type.js b/packages/devextreme-cli/src/utility/prompts/react-app-type.js new file mode 100644 index 000000000..6f400696c --- /dev/null +++ b/packages/devextreme-cli/src/utility/prompts/react-app-type.js @@ -0,0 +1,17 @@ +const prompts = require('./prompts'); + +const choices = [ + { value: 'vite', title: 'React+Vite' }, + { value: 'nextjs', title: 'Next.js-based' } +]; + +const question = { + message: 'Specify the desired React application type:', + choices: choices +}; + +const getReactAppType = async(defaultValue) => { + return await prompts(question, choices, defaultValue); +}; + +module.exports = getReactAppType; diff --git a/packages/devextreme-cli/testing/env.nextjs.js b/packages/devextreme-cli/testing/env.nextjs.js index a187b582a..5c76e2c20 100644 --- a/packages/devextreme-cli/testing/env.nextjs.js +++ b/packages/devextreme-cli/testing/env.nextjs.js @@ -29,7 +29,8 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi await runCommand('node', [ path.join(process.cwd(), './index.js'), 'new', - 'nextjs-app', + 'react-app', + '--app-type=nextjs', `--template=${template}`, '--layout=side-nav-outer-toolbar', ...additionalArguments diff --git a/packages/devextreme-cli/testing/env.react.js b/packages/devextreme-cli/testing/env.react.js index 5dcf44a28..52971525c 100644 --- a/packages/devextreme-cli/testing/env.react.js +++ b/packages/devextreme-cli/testing/env.react.js @@ -30,6 +30,7 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi path.join(process.cwd(), './index.js'), 'new', 'react-app', + '--app-type=vite', '--layout=side-nav-outer-toolbar', `--template=${template}`, `--transpiler=${transpiler}`,