From cfb89e7bffa1b1ae8fa160155b25e26db52f9b53 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 5 May 2025 09:36:48 +0400 Subject: [PATCH 1/5] DevExtreme CLI: add React Next.js info --- .../10 Add DevExtreme to an Existing Application.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md index cdc17488f0..fc369f7d85 100644 --- a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md +++ b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md @@ -43,6 +43,8 @@ This command does the following: These steps are explained in the [Add DevExtreme to a React Application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') article. +The `add devextreme-react` command supports React apps created with various build tools, such as Vite and Next.js. DevExtreme CLI supports Next.js apps created with different option combinations, such as with or without a `src` folder, using TypeScript or JavaScript, with or without App Routing, and more. + Once the command is executed, [import DevExtreme components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components'). --- From 5ead58629f40918f4a5e41adcfc692f876e96429 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 6 May 2025 11:11:31 +0400 Subject: [PATCH 2/5] Complete remaining changes --- MenuConfig.xml | 1 - .../05 Generate a New Application.md | 2 +- .../Common/DevExtreme CLI/00 Requirements.md | 2 +- ...d DevExtreme to an Existing Application.md | 2 +- .../10 Create a New Application.md | 22 +- ...e a DevExtreme application with Next.js.md | 193 ------------------ 6 files changed, 21 insertions(+), 201 deletions(-) delete mode 100644 concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md diff --git a/MenuConfig.xml b/MenuConfig.xml index 06278fb760..2cdaeaec87 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -39,7 +39,6 @@ - diff --git a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md index c977728341..0a08f9f2f3 100644 --- a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md +++ b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md @@ -2,6 +2,6 @@ // ===== or generate a template with TypeScript ===== npx devextreme-cli new react-app app-name --template=typescript cd app-name - npm run start + npm run dev The application already contains the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview) and [Form](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/Overview) components. You can find their configurations in the `src\pages\tasks\tasks.js` and `src\pages\profile\profile.js` files correspondingly. \ No newline at end of file diff --git a/concepts/Common/DevExtreme CLI/00 Requirements.md b/concepts/Common/DevExtreme CLI/00 Requirements.md index e736e3a757..e61cc2cb51 100644 --- a/concepts/Common/DevExtreme CLI/00 Requirements.md +++ b/concepts/Common/DevExtreme CLI/00 Requirements.md @@ -1,4 +1,4 @@ - Node.js v18.0.0 or later -- npm v6.2.0 or later +- npm v8.0.0 or later [tags] angular, vue, react \ No newline at end of file diff --git a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md index fc369f7d85..49bfe77619 100644 --- a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md +++ b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md @@ -43,7 +43,7 @@ This command does the following: These steps are explained in the [Add DevExtreme to a React Application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') article. -The `add devextreme-react` command supports React apps created with various build tools, such as Vite and Next.js. DevExtreme CLI supports Next.js apps created with different option combinations, such as with or without a `src` folder, using TypeScript or JavaScript, with or without App Routing, and more. +The `add devextreme-react` command supports React apps created with various build tools, such as Vite and Next.js. DevExtreme CLI supports Next.js apps created with different option combinations, such as with or without a `src` folder, using TypeScript or JavaScript, with or without app routing, and more. Once the command is executed, [import DevExtreme components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components'). diff --git a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md index c2d3324544..9d592b3ba5 100644 --- a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md +++ b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md @@ -47,9 +47,9 @@ Specifies whether to generate a Vue 2 or Vue 3 application. Available values: `2 Creates a new DevExtreme React application that uses the [DevExtreme layout template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/'): - devextreme new react-app app-name [--layout][--empty] + devextreme new react-app app-name [--layout][--empty][--template][--app-type][--transpiler] // ===== or without installing the DevExtreme CLI ===== - npx devextreme-cli new react-app app-name [--layout][--empty] + npx devextreme-cli new react-app app-name [--layout][--empty][--template][--app-type][--transpiler] Arguments: @@ -61,10 +61,24 @@ Specifies the DevExtreme layout. Available values: See the following topic to review both layouts: [Layouts](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts'). * `--empty` -Specifies whether to skip sample view generation (default: `false`). +Specifies whether to skip sample view generation. Available values: + * `false` (default) + * `true` * `--template` -Specifies whether to create an application template with TypeScript support. Available values: `javascript` and `typescript`. +Specifies whether to create an application template with TypeScript support. Available values: + * `javascript` + * `typescript` + +* `--app-type` +Specifies whether to create an application using [Next.js](https://nextjs.org/) or [Vite](https://vite.dev/). Available values: + * `nextjs` + * `vite` + +* `--transpiler` +Specifies whether to use [Babel](https://babeljs.io/) or [SWC](https://swc.rs/) as a compiler. Used only when `--app-type` is `vite`. Available values: + * `babel` + * `swc` --- diff --git a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md b/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md deleted file mode 100644 index 5af12601f3..0000000000 --- a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: DevExtreme React - Create a DevExtreme-powered Website/Application with Next.js ---- - -Next.js is a React-based web development framework. It can generate static websites and serve dynamic content. The creators of React endorse Next.js because Next is easy to use, feature-rich, and compatible with modern web development patterns (such as server-side page rendering). - -This help topic details the use of DevExtreme UI components alongside the Next.js framework. - -## 1. Create a New Project - -Consult the following external webpage if you are new to Next.js: [Getting Started: Installation | Next.js (nextjs.org)](https://nextjs.org/docs/getting-started/installation). - -The `create-next-app` wizard allows you to bootstrap a Next.js web app in a matter of minutes. - -![create-next-app](/images/NextJS/create-next-app.png) - -The wizard creates a folder for the project, installs the necessary dependencies, and populates the project with sample code. - -Run the following command to launch the wizard: - - npx create-next-app@latest - -Answer the wizard's prompts to configure your new app. For this tutorial, we enabled the following options: - -* TypeScript support -* ESLint support -* Store source code in the `src/` directory -* Use the Next.js App Router - -After the wizard completes its job, you can start the development server: - - npm run dev - -If you want to run your website in **production mode**, build the project first: - - npm run build; npm run start - -The server outputs the preview URL to the console. The default URL is `http://localhost:3000`. Open the URL in the browser to view the page. - -![Original front page](/images/NextJS/original-front-page.png) - -Proceed to the next step when you get the server up and running. - -## 2. Add Static Content to the Front Page - -During the set-up process we selected the "Store source code in the `src/` directory" option. As such, the `src/app/page.tsx` file stores the source for your app’s front page. - -Let's replace page content with a simple heading and a paragraph: - - - export default function Home() { - return ( -
-

Main Page

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
- ) - } - -### Clean-up - -The `page.tsx` file no longer references the `page.module.css` file. Delete the CSS file from disk. - -The `globals.css` file contains global styles, including the setting used to configure the default background color. It is **unsafe** to remove this file. Delete the following CSS code to apply a plain background: - - - body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); - } - -### View the server-rendered page - -Your page should appear as follows: - -![Modified page](/images/NextJS/modified-page.png) - -Next.js rendered this content on the server. This means you can view the page in a browser that prohibits execution of client-side JavaScript. Try it yourself - go to your browser settings, disable JavaScript, and refresh the page. - -![Disable JavaScript](/images/NextJS/disable-javascript.png) - -The page should not change. - -![Modified page](/images/NextJS/ssr-example.png) - -Activate JavaScript to continue the tutorial. - -## 3. Add a DevExtreme Grid - -### Install Dependencies - -Run the following command to install the necessary DevExtreme packages and save them to your package dependency list: - - npm install devextreme@25.1 devextreme-react@25.1 --save-exact - -### Set up the Necessary Imports - -Open the `page.tsx` file. Add the following `import` statements at the beginning: - - - import DataGrid from 'devextreme-react/data-grid'; - import 'devextreme/dist/css/dx.light.css'; - -The first `import` allows you to use the DataGrid component. The second applies the default "Light" theme to DevExtreme UI components. - -### Set up a Data Source - -[note] If you use [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), add a [`use client` directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) to ensure that the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client. - -Our DataGrid requires a data source. For the purpose of this tutorial, we'll use data from the publicly available [Cat Facts API](https://catfact.ninja). Add the following asynchronous code to the `page.tsx` file: - - - const getCatFacts = async (): Promise => { - const dataResponse = await fetch("https://catfact.ninja/facts", { - cache: "no-store", }); - const facts = (await dataResponse.json()).data; - return facts; - }; - - const dataItemsPromise = getCatFacts(); - -### Configure the DataGrid - -[note] The Next.js Router imposes additional limitations on DevExtreme UI components. Components without the ["use client" directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) only accept props of primitive data types. Include this directive to use custom DevExtreme data types such as `ArrayStore` and `ODataStore`. - -Create a new React component with the name `DemoGrid`. Use this component to define and configure a new instance of the DevExtreme DataGrid: - - - const DemoGrid: React.FC = async () => { - const dataItems = await dataItemsPromise; // Load the data from the Cat Facts API - return ( - <> - - - - ); - } - -### Insert the DataGrid Into the Page - -Modify the Home function to include the `DemoGrid` component we created in the previous step: - - - export default function Home() { - return ( -
-

Main Page

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- ) - } - -### View the Client-side Rendered Grid - -If your server runs in development mode, refresh the browser window. If your server runs in production mode, build the application, and restart the server: - - npm run build; npm run start - -The page should now display an interactive grid with data from the Cat Facts API. - -![Client-side grid](/images/NextJS/client-side-grid.png) - -DevExtreme renders the DataGrid on the client, even if the rest of the page is rendered server-side. If you disable JavaScript again, you'll see an empty `div` element in place of the grid: - -![Empty div in place of the grid](/images/NextJS/empty-div.png) - -## 4. Next Steps - -DevExtreme UI components are intuitive, easy to use, and fully compatible with Next.js. Review our [application templates](https://js.devexpress.com/React/Templates/) and [demos](https://js.devexpress.com/Demos/WidgetsGallery/) to explore the capabilities of DevExtreme UI components at your own pace. - -For additional information on the Next.js framework, refer to the following external webpage: [Introduction | Next.js (nextjs.org)](https://nextjs.org/docs). - -[tags] react From 583ecd4cf647827e28f5a0b3b333311e608c57f8 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 6 May 2025 12:19:37 +0400 Subject: [PATCH 3/5] Update following feedback --- .../10 Add DevExtreme to an Existing Application.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md index 49bfe77619..c05011aadb 100644 --- a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md +++ b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md @@ -43,7 +43,11 @@ This command does the following: These steps are explained in the [Add DevExtreme to a React Application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') article. -The `add devextreme-react` command supports React apps created with various build tools, such as Vite and Next.js. DevExtreme CLI supports Next.js apps created with different option combinations, such as with or without a `src` folder, using TypeScript or JavaScript, with or without app routing, and more. +The `add devextreme-react` command supports React apps created with Vite and Next.js. DevExtreme CLI supports Next.js apps created with the following option combinations: + +- With or without a `src` folder. +- Using TypeScript or JavaScript. +- With or without App Router. Once the command is executed, [import DevExtreme components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components'). From baf47083bc2cfba7ef29cc823b2b351e08b6fbc1 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Thu, 8 May 2025 10:44:53 +0400 Subject: [PATCH 4/5] Update all sections with Vite & Next.js info --- .../00 Application Template.md | 6 +++++- .../05 Generate a New Application.md | 16 +++++++++++----- .../50 Application Template/10 Layouts.md | 18 +++++++++++------- .../20 Add a New View.md | 7 ++++++- .../10 Configure Menu Items.md | 6 ++++-- .../20 Hide the Menu in the Closed State.md | 4 ++-- .../35 Add a Custom Toolbar Item.md | 6 ++++-- .../40 Configure Themes/10 Switch the Theme.md | 8 ++++---- .../20 Create a Custom Theme.md | 2 +- .../30 Apply a Color Swatch.md | 4 +++- ...Apply Theme Variables to Custom Elements.md | 2 +- .../45 Authentication/00 Authentication.md | 6 +----- .../00 Vite Authentication.md | 3 +++ .../10 Implement Stub Functions.md} | 8 ++++---- .../20 Get User Information.md | 2 +- .../00 Next.js Authentication.md | 3 +++ .../10 Generate Session Key.md | 9 +++++++++ .../20 Implement Authentication Functions.md | 18 ++++++++++++++++++ .../30 Implement Authorization Functions.md | 3 +++ .../50 Create an Empty Application.md | 5 +++-- 20 files changed, 97 insertions(+), 39 deletions(-) create mode 100644 concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md rename concepts/50 React Components/50 Application Template/45 Authentication/{10 Integrate with a Back End.md => 10 Vite Authentication/10 Implement Stub Functions.md} (50%) rename concepts/50 React Components/50 Application Template/45 Authentication/{ => 10 Vite Authentication}/20 Get User Information.md (94%) create mode 100644 concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md create mode 100644 concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md create mode 100644 concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md create mode 100644 concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md diff --git a/concepts/50 React Components/50 Application Template/00 Application Template.md b/concepts/50 React Components/50 Application Template/00 Application Template.md index fd68dadab4..37cbd6ec54 100644 --- a/concepts/50 React Components/50 Application Template/00 Application Template.md +++ b/concepts/50 React Components/50 Application Template/00 Application Template.md @@ -1,4 +1,8 @@ -The DevExtreme React Application Template helps you create a simple React application with a navigation menu and several sample views in a responsive layout (see live preview). +The DevExtreme React Application Template allows you to speed up the process of setting up a new React project that integrates the DevExtreme UI library. The template includes multiple components such as [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/), [Form](/Documentation/Guide/UI_Components/Form/Overview/), [TreeView](/Documentation/Guide/UI_Components/TreeView/Getting_Started_with_TreeView/), and more. It includes multiple sample views, as well as placeholder authentication functions for implementing a secure log-in system. + +#include btn-open-github with { + href: "https://devexpress.github.io/devextreme-react-template/#/home" +} DevExtreme React Template diff --git a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md index 0a08f9f2f3..c7ad80826c 100644 --- a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md +++ b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md @@ -1,7 +1,13 @@ - npx devextreme-cli new react-app app-name - // ===== or generate a template with TypeScript ===== - npx devextreme-cli new react-app app-name --template=typescript +You can create a new DevExtreme React Application Template using Vite or Next.js. Specify the `devextreme-cli new` command's `--app-type` argument to make a selection. If you leave the argument unspecified, the command will prompt you to choose an app type. + + // ===== generate a react app with Vite ===== + npx devextreme-cli new react-app app-name --app-type=vite + // ===== generate a react app with Next.js ===== + npx devextreme-cli new react-app app-name --app-type=nextjs + +[note] For more information on the `devextreme-cli new react-app` command, see the [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application) topic. + +Execute the following commands to run the generated application: + cd app-name npm run dev - -The application already contains the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview) and [Form](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/Overview) components. You can find their configurations in the `src\pages\tasks\tasks.js` and `src\pages\profile\profile.js` files correspondingly. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/10 Layouts.md b/concepts/50 React Components/50 Application Template/10 Layouts.md index 811a7e9cf8..ffe12fabcf 100644 --- a/concepts/50 React Components/50 Application Template/10 Layouts.md +++ b/concepts/50 React Components/50 Application Template/10 Layouts.md @@ -1,4 +1,4 @@ -The application includes two layouts. The only difference between them is where the toolbar is located: outer (default) or inner toolbar. +The application template includes two layouts. The only difference between them is what type of sidebar is implemented: outer (default) or inner. **Outer toolbar**
@@ -9,13 +9,17 @@ The application includes two layouts. The only difference between them is where Inner toolbar expanded
-To switch to another layout, open the `src\Content.js` file and replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar`: +To switch to another layout: - - import { - SideNavInnerToolbar as SideNavBarLayout, - SingleCard - } from './layouts'; +- If your project uses Vite, replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar` in `src\Content.js`. + + + import { SideNavInnerToolbar as SideNavBarLayout, SingleCard } from './layouts'; + +- If your project uses Next.js, replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar` in `src\app\pages\layout.jsx`. + + + import { SideNavInnerToolbar as SideNavBarLayout, SingleCard } from './src/layouts/index'; To generate a new application with an inner toolbar, set the `--layout` flag to `side-nav-inner-toolbar`: diff --git a/concepts/50 React Components/50 Application Template/20 Add a New View.md b/concepts/50 React Components/50 Application Template/20 Add a New View.md index 7b304f7eda..716f831688 100644 --- a/concepts/50 React Components/50 Application Template/20 Add a New View.md +++ b/concepts/50 React Components/50 Application Template/20 Add a New View.md @@ -2,4 +2,9 @@ Run the following command to add a new view. `--icon` specifies an icon from the npx devextreme add view view-name [--icon=IconName] -You can find the added view under the `src\pages` folder. This command also creates a navigation menu item for the added view in the `src\app-navigation.js` file. \ No newline at end of file +You can find the added view in: + +- `src\pages` if your project uses Vite. +- `src\app\pages` if your project uses Next.js. + +The `devextreme add view` command also creates a navigation menu item for the added view in `src\app-navigation.js`. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md index 612a170d48..f0e94fd64b 100644 --- a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md +++ b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md @@ -1,4 +1,6 @@ -Edit the `src\app-navigation.js` file to configure navigation menu items. Each item configuration can have the following fields: +To configure navigation menu items, edit `src\app-navigation.js`. + +Each item configuration can have the following fields: - **text** - the item's text @@ -8,7 +10,7 @@ Edit the `src\app-navigation.js` file to configure navigation menu items. Each i - **items** - child items -[note] A menu item should either navigate to a page OR include subitems. For that reason, do not specify both **path** and **items** for the same menu item. +[note] A menu item should either navigate to a page OR include subitems. Do not specify both **path** and **items** for the same menu item. { diff --git a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/20 Hide the Menu in the Closed State.md b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/20 Hide the Menu in the Closed State.md index 31e566afe6..fbf7c13567 100644 --- a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/20 Hide the Menu in the Closed State.md +++ b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/20 Hide the Menu in the Closed State.md @@ -1,11 +1,11 @@ -In the closed state, the navigation menu is partially visible because it displays item icons. If the items do not have icons, you can hide the menu. To do this, open the `SideNavOuterToolbar` or `SideNavInnerToolbar` component (depending on the used [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts')), find the [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/') configuration, and set its [minSize](/api-reference/10%20UI%20Components/dxDrawer/1%20Configuration/minSize.md '/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#minSize') property to 0: +In its closed state, the navigation menu is partially visible as it displays item icons. If items do not have icons, you can hide the menu. In the `SideNavOuterToolbar` or `SideNavInnerToolbar` component (depending on which [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') your project uses), find the [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/') configuration and set its [minSize](/api-reference/10%20UI%20Components/dxDrawer/1%20Configuration/minSize.md '/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#minSize') property to 0: // ... export default function ({ title, children }) { // ... return ( -
+
{/* ... */} diff --git a/concepts/50 React Components/50 Application Template/35 Add a Custom Toolbar Item.md b/concepts/50 React Components/50 Application Template/35 Add a Custom Toolbar Item.md index 492364cca9..03cf4251c7 100644 --- a/concepts/50 React Components/50 Application Template/35 Add a Custom Toolbar Item.md +++ b/concepts/50 React Components/50 Application Template/35 Add a Custom Toolbar Item.md @@ -1,4 +1,6 @@ -The application template uses the DevExtreme [Toolbar](/api-reference/10%20UI%20Components/dxToolbar '/Documentation/ApiReference/UI_Components/dxToolbar/') component. The Toolbar is part of the `Header` component whose configuration is in the `src\components\header\Header.js` file. To add a custom toolbar item, open this file and add an `Item` element inside `Toolbar`. Refer to the [items](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/') help section for information on `Item` properties. +The application template uses the DevExtreme [Toolbar](/api-reference/10%20UI%20Components/dxToolbar '/Documentation/ApiReference/UI_Components/dxToolbar/') component. The Toolbar is part of the `Header` component. To add a custom toolbar item, add an `Item` element inside `Toolbar` in `src\components\header\Header.js`. + +Refer to the [items](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/') help section for information on `Item` properties. The following code adds a search button to the toolbar: @@ -34,4 +36,4 @@ The following code adds a search button to the toolbar: ); } -In the code above, the button click handler is declared in the `SideNavOuterToolbar` component. This component applies when the outer toolbar [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') is used. If the application uses the inner toolbar layout, add the same code to the `SideNavInnerToolbar` component. +In the code above, the button click handler is declared in the `SideNavOuterToolbar` component. This component applies when the outer toolbar [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') is used. If your application uses the inner toolbar layout, add the same code to the `SideNavInnerToolbar` component. diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md index 870b8673d2..6c201c0ba6 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md @@ -1,6 +1,6 @@ [note] -For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also take a look at this GitHub Example: +For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also take a look at the following GitHub example: #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-project-template-theme-selector" @@ -8,7 +8,7 @@ For more information about switching themes, refer to the following help topic: [/note] -You can switch between themes in the DevExtreme React Template. `src\theme.tsx` contains the theme switcher logic. +You can switch between themes in the DevExtreme React Template. The theme switcher logic resides in `src\theme.js`. The template uses a main theme for view content and an additional theme ([color swatch](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/55%20Color%20Swatches.md '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches')) for the navigation menu. The corresponding .JSON files are shown below. @@ -30,7 +30,7 @@ The template uses a main theme for view content and an additional theme ([color -The default theme is `fluent.blue.light`. To switch to another theme, open the .JSON file and assign the theme name to the `baseTheme` field: +The default theme is `fluent.blue.light`. To switch to another theme, open the .JSON files mentioned above and assign a new theme to the `baseTheme` field: { @@ -64,6 +64,6 @@ You can find all theme names in the [Predefined Themes](/concepts/60%20Themes%20 [important] If you use a Generic theme, add the `generic.` prefix. For instance, `generic.dark` instead of `dark`. -After making changes in the .JSON files, run the following command to rebuild themes: +After making changes in .JSON files, run the following command to rebuild themes: npm run build-themes diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md index 057d58923b..4acbae4269 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md @@ -1,6 +1,6 @@ You can use the [DevExtreme ThemeBuilder](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/') to create custom themes based on predefined themes. Follow the steps below: -1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') to the ThemeBuilder. +1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') into ThemeBuilder. 1. [Customize the theme](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/10%20Customize%20the%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Customize_the_Theme'). diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/30 Apply a Color Swatch.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/30 Apply a Color Swatch.md index ff00ea9ee0..07e87c99c1 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/30 Apply a Color Swatch.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/30 Apply a Color Swatch.md @@ -1,6 +1,8 @@ [Color swatches](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/55%20Color%20Swatches.md '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches') are secondary color schemes used alongside a primary color scheme. -In the DevExtreme React Template, a color swatch is applied to the navigation menu. You can configure it in the `src\themes\metadata.additional.json` and `src\themes\metadata.additional.dark.json` files. To use this color swatch on an element, add the `dx-swatch-additional` class (or `dx-swatch-additional-dark` for a dark theme) to the element: +In the DevExtreme React Template, a color swatch is applied to the navigation menu. You can configure this color swatch in `src\themes\metadata.additional.json` and `src\themes\metadata.additional.dark.json`. + +To use this color swatch on an element, add the `dx-swatch-additional` class (or `dx-swatch-additional-dark` for a dark theme) to the element:
diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md index 11a50d74a9..69241e7d32 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md @@ -1,4 +1,4 @@ -Theme variables are defined in the `src\variables.scss` file. Apply the variables to custom elements, so that the elements have a uniform appearance with the rest of the application. +Theme variables are defined in `src\variables.scss`. Apply the variables to custom elements, so that the elements have a uniform appearance with the rest of the application. The following code applies the `var(--base-accent)` variable as the `background-color` of `my-element`: diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md index 3294197554..e684383b79 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md @@ -1,5 +1 @@ -A DevExtreme React application includes authentication UI and API. Client-side routing is configured so that unauthenticated users can navigate to authentication pages only. These pages allow the users to sign in, create a new account, or reset the password. - -Authentication pages are rendered by the `UnauthenticatedContent.js` component. The rest of the application is rendered by the `Content.js` component. - -[important] Do not rely on client-side routing to protect your application from unauthorized access. Always verify user credentials on the back end. +The DevExtreme React Application Template includes authentication UI and functions, including multiple authentication pages. These allow users to sign in, create accounts, and reset or change their passwords. Depeneding on the type of your application, your authentication functionality will be set up differently: \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md new file mode 100644 index 0000000000..af4dd05285 --- /dev/null +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md @@ -0,0 +1,3 @@ +The Vite template provides stub functions for authentication with client-side routing using [React Router](https://reactrouter.com/). Authentication pages are rendered by the `UnauthenticatedContent.js` component. The rest of the application is rendered by the `Content.js` component. + +[important] Do not rely on client-side routing to protect your application from unauthorized access. Always verify user credentials on the back end. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md similarity index 50% rename from concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md rename to concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md index 7127ac3698..878f23371b 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md @@ -1,4 +1,4 @@ -Stub authentication functions for back-end requests are located in the `src\api\auth.js` file. Update these functions to make actual requests to your back end. +Authentication functions for back-end requests are located in `src\api\auth.js`. You must update these functions to make requests to your server, such as to add or verify users. Each function returns an object with the following fields: @@ -9,7 +9,7 @@ Each function returns an object with the following fields: isOk - A Boolean value that is true if the request was successful and false otherwise. + A boolean value that represents whether the request was successful. message @@ -17,6 +17,6 @@ Each function returns an object with the following fields: data - The request result (user information). + The result of the request (user information). - + \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Get User Information.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md similarity index 94% rename from concepts/50 React Components/50 Application Template/45 Authentication/20 Get User Information.md rename to concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md index 6d1d2d6bfc..27c741c6f2 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/20 Get User Information.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md @@ -17,7 +17,7 @@ To access user information from any part of the application, use the `useAuth` h loading - A Boolean value that is true while user information is being loaded (an HTTP request is in progress). + A boolean value that is true while user information is being loaded (an HTTP request is in progress). diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md new file mode 100644 index 0000000000..27911dfa8d --- /dev/null +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md @@ -0,0 +1,3 @@ +The Next.js template implements server-side routing and authentication. The implementation follows the [Next.js Authentication Guide](https://nextjs.org/docs/app/guides/authentication) and offers session management with JSON Web Tokens (JWTs). + +[note] The Next.js template utilizes the third-party [Jose](https://www.npmjs.com/package/jose) session management library. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md new file mode 100644 index 0000000000..55093148c7 --- /dev/null +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md @@ -0,0 +1,9 @@ +To implement authentication functions in the Next.js template, you must first define a session key. This key is used to encrypt session cookies. You can find it in `application\.env`: + + + SESSION_SECRET= + +You can generate a secret key with the `openssl` command in terminal: + + + openssl rand -base64 32 \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md new file mode 100644 index 0000000000..0ba92d9e19 --- /dev/null +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md @@ -0,0 +1,18 @@ +Authentication functions for back-end requests are located in `src\app\actions\auth.jsx`. You must update these functions to make requests to your server, such as to add or verify users. + +Each function returns an object with the following fields: + + + + + + + + + + + + + + +
FieldDescription
isOkA boolean value that represents whether the request was successful.
messageAn error message (if an error occurred).
\ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md new file mode 100644 index 0000000000..545fe16b1b --- /dev/null +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md @@ -0,0 +1,3 @@ +Authorization functions allow you to verify if a given user has access to certain pages in your project. If a user is not authorized, you can redirect them to an authorization page. These functions are located in `middleware.js` in the root directory of your project. + +[important] The Next.js template includes a `_DEMO_logIn()` function in `middleware.js` that allows you to test your application in development without authorization. Remove this function and implement redirects in production. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md index 8a8973f470..0b75dca886 100644 --- a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md +++ b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md @@ -1,6 +1,7 @@ -To generate an application with empty data, use the `--empty` flag (the layout remains the same): +To generate an empty application without sample views, specify the `--empty` flag: npx devextreme-cli new react-app app-name --empty #####See Also##### -- [Add DevExtreme to a React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') \ No newline at end of file +- [Add DevExtreme to a React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') +- [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application) \ No newline at end of file From ac141c86c908c77429a02d7f187faa3a268c3111 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Thu, 8 May 2025 11:50:28 +0400 Subject: [PATCH 5/5] Update following feedback --- .../50 Application Template/00 Application Template.md | 2 +- .../05 Generate a New Application.md | 4 ++-- .../50 Application Template/10 Layouts.md | 2 +- .../10 Configure Menu Items.md | 2 +- .../40 Configure Themes/10 Switch the Theme.md | 6 +++--- .../40 Configure Themes/20 Create a Custom Theme.md | 2 +- .../45 Authentication/00 Authentication.md | 2 +- .../10 Vite Authentication/00 Vite Authentication.md | 2 +- ...nctions.md => 10 Implement Authentication Functions.md} | 4 ++-- .../10 Vite Authentication/20 Get User Information.md | 2 +- .../20 Next.js Authentication/10 Generate Session Key.md | 7 ++++--- .../20 Implement Authentication Functions.md | 2 +- .../30 Implement Authorization Functions.md | 2 +- .../50 Create an Empty Application.md | 2 +- .../10 Create a New Application.md | 6 +++--- 15 files changed, 24 insertions(+), 23 deletions(-) rename concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/{10 Implement Stub Functions.md => 10 Implement Authentication Functions.md} (81%) diff --git a/concepts/50 React Components/50 Application Template/00 Application Template.md b/concepts/50 React Components/50 Application Template/00 Application Template.md index 37cbd6ec54..a1e4359d58 100644 --- a/concepts/50 React Components/50 Application Template/00 Application Template.md +++ b/concepts/50 React Components/50 Application Template/00 Application Template.md @@ -1,4 +1,4 @@ -The DevExtreme React Application Template allows you to speed up the process of setting up a new React project that integrates the DevExtreme UI library. The template includes multiple components such as [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/), [Form](/Documentation/Guide/UI_Components/Form/Overview/), [TreeView](/Documentation/Guide/UI_Components/TreeView/Getting_Started_with_TreeView/), and more. It includes multiple sample views, as well as placeholder authentication functions for implementing a secure log-in system. +The DevExtreme React Application Template allows you to speed up the process of setting up a new React project that integrates the DevExtreme UI library. The template includes multiple components such as [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/), [Form](/Documentation/Guide/UI_Components/Form/Overview/), [TreeView](/Documentation/Guide/UI_Components/TreeView/Getting_Started_with_TreeView/), and more. Multiple sample views are included, as well as placeholder authentication functions for implementing a secure log-in system. #include btn-open-github with { href: "https://devexpress.github.io/devextreme-react-template/#/home" diff --git a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md index c7ad80826c..2dd4e9712b 100644 --- a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md +++ b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md @@ -1,11 +1,11 @@ -You can create a new DevExtreme React Application Template using Vite or Next.js. Specify the `devextreme-cli new` command's `--app-type` argument to make a selection. If you leave the argument unspecified, the command will prompt you to choose an app type. +You can create a new DevExtreme React Application Template with Vite or Next.js. Specify the `devextreme-cli new` command's `--app-type` argument to select an app type. If you leave the argument unspecified, the command prompts you to choose an app type. // ===== generate a react app with Vite ===== npx devextreme-cli new react-app app-name --app-type=vite // ===== generate a react app with Next.js ===== npx devextreme-cli new react-app app-name --app-type=nextjs -[note] For more information on the `devextreme-cli new react-app` command, see the [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application) topic. +[note] For more information on the `devextreme-cli new react-app` command, refer to the [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application) help topic. Execute the following commands to run the generated application: diff --git a/concepts/50 React Components/50 Application Template/10 Layouts.md b/concepts/50 React Components/50 Application Template/10 Layouts.md index ffe12fabcf..cc31fed62c 100644 --- a/concepts/50 React Components/50 Application Template/10 Layouts.md +++ b/concepts/50 React Components/50 Application Template/10 Layouts.md @@ -1,4 +1,4 @@ -The application template includes two layouts. The only difference between them is what type of sidebar is implemented: outer (default) or inner. +The application template includes two layouts. The only difference between them is what type of toolbar is implemented: outer (default) or inner. **Outer toolbar**
diff --git a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md index f0e94fd64b..0aa6896914 100644 --- a/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md +++ b/concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md @@ -1,6 +1,6 @@ To configure navigation menu items, edit `src\app-navigation.js`. -Each item configuration can have the following fields: +Each item configuration has the following fields: - **text** - the item's text diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md index 6c201c0ba6..0cdf0fdc4b 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md @@ -1,6 +1,6 @@ [note] -For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also take a look at the following GitHub example: +For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also refer the following GitHub example: #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-project-template-theme-selector" @@ -8,7 +8,7 @@ For more information about switching themes, refer to the following help topic: [/note] -You can switch between themes in the DevExtreme React Template. The theme switcher logic resides in `src\theme.js`. +You can switch between themes in the DevExtreme React Template. You can find the theme switcher logic in `src\theme.js`. The template uses a main theme for view content and an additional theme ([color swatch](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/55%20Color%20Swatches.md '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches')) for the navigation menu. The corresponding .JSON files are shown below. @@ -64,6 +64,6 @@ You can find all theme names in the [Predefined Themes](/concepts/60%20Themes%20 [important] If you use a Generic theme, add the `generic.` prefix. For instance, `generic.dark` instead of `dark`. -After making changes in .JSON files, run the following command to rebuild themes: +After making changes in theme .JSON files, run the following command to rebuild themes: npm run build-themes diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md index 4acbae4269..6d73394b5b 100644 --- a/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md +++ b/concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md @@ -1,6 +1,6 @@ You can use the [DevExtreme ThemeBuilder](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/') to create custom themes based on predefined themes. Follow the steps below: -1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') into ThemeBuilder. +1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') a [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') into ThemeBuilder. 1. [Customize the theme](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/10%20Customize%20the%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Customize_the_Theme'). diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md index e684383b79..2a29eb94d2 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md @@ -1 +1 @@ -The DevExtreme React Application Template includes authentication UI and functions, including multiple authentication pages. These allow users to sign in, create accounts, and reset or change their passwords. Depeneding on the type of your application, your authentication functionality will be set up differently: \ No newline at end of file +The DevExtreme React Application Template offers authentication UI and functions, including multiple authentication pages. These pages allow users to sign in, create accounts, and reset or change their passwords. The authentication functionality of the Vite and Next.js templates are different. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md index af4dd05285..1841071c21 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md @@ -1,3 +1,3 @@ -The Vite template provides stub functions for authentication with client-side routing using [React Router](https://reactrouter.com/). Authentication pages are rendered by the `UnauthenticatedContent.js` component. The rest of the application is rendered by the `Content.js` component. +The Vite template offers stub functions that utilize [React Router](https://reactrouter.com/) for authentication with client-side routing. The `UnauthenticatedContent.js` component renders authentication pages. The `Content.js` component renders the rest of the application. [important] Do not rely on client-side routing to protect your application from unauthorized access. Always verify user credentials on the back end. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md similarity index 81% rename from concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md rename to concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md index 878f23371b..fb400dd5ca 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Stub Functions.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md @@ -9,7 +9,7 @@ Each function returns an object with the following fields: isOk - A boolean value that represents whether the request was successful. + A Boolean value that represents whether the request was successful. message @@ -17,6 +17,6 @@ Each function returns an object with the following fields: data - The result of the request (user information). + The request result (user information). \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md index 27c741c6f2..6d1d2d6bfc 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md @@ -17,7 +17,7 @@ To access user information from any part of the application, use the `useAuth` h loading - A boolean value that is true while user information is being loaded (an HTTP request is in progress). + A Boolean value that is true while user information is being loaded (an HTTP request is in progress). diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md index 55093148c7..5ad82a56d0 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md @@ -1,9 +1,10 @@ -To implement authentication functions in the Next.js template, you must first define a session key. This key is used to encrypt session cookies. You can find it in `application\.env`: +To implement authentication functions in the Next.js template, define a session key first. This key is used to encrypt session cookies. You can find it in `application\.env`: SESSION_SECRET= You can generate a secret key with the `openssl` command in terminal: - - openssl rand -base64 32 \ No newline at end of file + openssl rand -base64 32 + +[important] To ensure the security of your application, define a unique session key. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md index 0ba92d9e19..b152fa022e 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md @@ -9,7 +9,7 @@ Each function returns an object with the following fields: isOk - A boolean value that represents whether the request was successful. + A Boolean value that represents whether the request was successful. message diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md index 545fe16b1b..c931b1e085 100644 --- a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md +++ b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md @@ -1,3 +1,3 @@ Authorization functions allow you to verify if a given user has access to certain pages in your project. If a user is not authorized, you can redirect them to an authorization page. These functions are located in `middleware.js` in the root directory of your project. -[important] The Next.js template includes a `_DEMO_logIn()` function in `middleware.js` that allows you to test your application in development without authorization. Remove this function and implement redirects in production. \ No newline at end of file +[note] The Next.js template includes a `_DEMO_logIn()` function in `middleware.js` that allows you to test your application in development without authorization. Remove this function and implement redirects in production. \ No newline at end of file diff --git a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md index 0b75dca886..6445e70c71 100644 --- a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md +++ b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md @@ -1,4 +1,4 @@ -To generate an empty application without sample views, specify the `--empty` flag: +To generate an application without sample data, specify the `--empty` flag. The application's layout remains the same. npx devextreme-cli new react-app app-name --empty diff --git a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md index 9d592b3ba5..37c37debd2 100644 --- a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md +++ b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md @@ -61,7 +61,7 @@ Specifies the DevExtreme layout. Available values: See the following topic to review both layouts: [Layouts](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts'). * `--empty` -Specifies whether to skip sample view generation. Available values: +Specifies whether to skip sample data generation. Available values: * `false` (default) * `true` @@ -71,12 +71,12 @@ Specifies whether to create an application template with TypeScript support. Ava * `typescript` * `--app-type` -Specifies whether to create an application using [Next.js](https://nextjs.org/) or [Vite](https://vite.dev/). Available values: +Specifies whether to create an application with [Next.js](https://nextjs.org/) or [Vite](https://vite.dev/). Available values: * `nextjs` * `vite` * `--transpiler` -Specifies whether to use [Babel](https://babeljs.io/) or [SWC](https://swc.rs/) as a compiler. Used only when `--app-type` is `vite`. Available values: +Specifies whether to use [Babel](https://babeljs.io/) or [SWC](https://swc.rs/) as a transpiler. Used only when `--app-type` is `vite`. Available values: * `babel` * `swc`