You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ASP.NET Core/Readme.md
+37-11Lines changed: 37 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,19 @@
1
-
# ASP.NET Core
1
+
# ASP.NET Core DevExtreme Example
2
2
3
3
## Installation
4
4
5
-
Download the example and use Visual Studio 2019 to open the project.
5
+
Download the example and use Visual Studio 2022 (or later) or Visual Studio Code to open the project. This project targets .NET 8.0.
6
6
7
7
## Client-side resources and bundling
8
8
9
-
This project uses [NPM](https://www.npmjs.com/) and [Gulp.js](https://gulpjs.com/) to install client-side libraries. The project restores NPM packages before the first build. Then, Gulp bundles required scripts and CSS files into the resulting package during the first and every next build.
9
+
This project uses [NPM](https://www.npmjs.com/) and [Gulp.js](https://gulpjs.com/) to install client-side libraries. The project restores NPM packages before the first build. Then, Gulp bundles required scripts and CSS files into the resulting package during the first and every next build.
10
+
11
+
The project includes:
12
+
- DevExtreme 24.2.3
13
+
- DevExtreme.AspNet.Core 24.2.*
14
+
- DevExtreme.AspNet.Data 5.*
15
+
- jQuery 3.7.1
16
+
- Bootstrap 5.3.3
10
17
11
18
The resulted bundles will be located in the `wwwroot` folder:
12
19
*`css/vendor.css` - a file with all CSS styles.
@@ -19,11 +26,11 @@ The default bundle includes jQuery, Bootstrap, and DevExtreme.
19
26
20
27
The main logic is located in the the `gulpfile.js` file at the root application level. The file contains two tasks:
21
28
22
-
* the `add-resouces` task
29
+
* the `add-resources` task
23
30
24
-
* copies JavaScript files located in the `scripts` array and adds them to `vendor.js`. The script bundle is moved to `wwwroot\scripts`.
25
-
* copies CSS styles located in the `styles` array and merges them into the `styles.css` bundle. Then, this bundle is moved to `wwwroot\styles`
26
-
* copies DevExtreme `fonts` and `icons` folders from NPM to `wwwroot\styles`
31
+
* copies JavaScript files located in the `scripts` array and adds them to `vendor.js`. The script bundle is moved to `wwwroot\js`.
32
+
* copies CSS styles located in the `styles` array and merges them into the `vendor.css` bundle. Then, this bundle is moved to `wwwroot\css`
33
+
* copies DevExtreme `fonts` and `icons` folders from NPM to `wwwroot\css`
27
34
28
35
* the `clean` task removes all previously created files (`vendor.js` and `vendor.css`) and folders (`icons` and `fonts`)
29
36
@@ -37,13 +44,32 @@ If you need to include more features, you can uncomment one of the following sec
37
44
38
45
## Code
39
46
40
-
Take a look at the following files of this example to see the required code:
47
+
Take a look at the following files of this example to see the required code:
48
+
49
+
**Controllers:**
50
+
-`Controllers/HomeController.cs` - Main controller with Index action
51
+
-`Controllers/SampleDataController.cs` - API controller for sample data
52
+
53
+
**Models:**
54
+
-`Models/SampleData.cs` - Sample data model
55
+
-`Models/SampleOrder.cs` - Sample order model
56
+
57
+
**Views:**
58
+
-`Views/Home/Index.cshtml` - Main page with DevExtreme components
Use the Visual Studio `Run (F5)` command to run the project.
72
+
Use the Visual Studio `Run (F5)` command or `dotnet run` command to run the project. The application will be available at `https://localhost:5001` (HTTPS) or `http://localhost:5000` (HTTP).
47
73
48
74
## Further help
49
75
@@ -53,6 +79,6 @@ The client-side API is based on jQuery [jQuery documentation](https://api.jquery
*[Get a UI Component Instance](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance)
55
81
56
-
To get more help on DevExtreme submit an issue in the [Support Center](https://www.devexpress.com/Support/Center/Question/Create)
82
+
To get more help on DevExtreme submit an issue in the [Support Center](https://supportcenter.devexpress.com/ticket/create)
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.3.
3
+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.4 and includes DevExtreme Angular components version 24.2.3.
4
4
5
5
## Development server
6
6
7
-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
7
+
Run `npm start` or `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8
8
9
9
## Code scaffolding
10
10
11
11
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12
12
13
13
## Build
14
14
15
-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
15
+
Run `npm run build` or `ng build` to build the project. The build artifacts will be stored in the `dist/Angular/` directory.
16
16
17
17
## Running unit tests
18
18
19
-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
19
+
Run `npm test` or `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20
+
21
+
## Linting
22
+
23
+
Run `npm run lint` to execute linting checks for TypeScript, CSS/SCSS, and HTML formatting.
24
+
-`npm run lint-ts` - ESLint for TypeScript files
25
+
-`npm run lint-css` - Stylelint for CSS/SCSS files
26
+
-`npm run lint-html` - Prettier for HTML formatting
20
27
21
28
## Running end-to-end tests
22
29
23
30
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24
31
25
32
## Further help
26
33
27
-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://v17.angular.io/cli) page.
28
-
To get more help on DevExtreme submit an issue on [GitHub](https://github.com/DevExpress/devextreme/issues) or [Support Center](https://www.devexpress.com/Support/Center/Question/Create)
34
+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
35
+
To get more help on DevExtreme submit an issue on [GitHub](https://github.com/DevExpress/devextreme/issues) or [Support Center](https://supportcenter.devexpress.com/ticket/create)
Copy file name to clipboardExpand all lines: React/README.md
+72-4Lines changed: 72 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,78 @@
1
-
# React + TypeScript + Vite
1
+
# React + TypeScript + Vite + DevExtreme
2
2
3
-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+
This template provides a minimal setup to get React working in Vite with HMR, ESLint rules, and DevExtreme components.
4
+
5
+
This project includes:
6
+
- React 18.2.0
7
+
- TypeScript 5.8.2
8
+
- Vite for fast development and building
9
+
- DevExtreme React 24.2.3
10
+
- Vitest for testing
11
+
- ESLint and Stylelint for code quality
4
12
5
13
Currently, two official plugins are available:
6
14
7
15
-[@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8
16
-[@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9
17
18
+
## Getting Started
19
+
20
+
### Installation
21
+
22
+
```bash
23
+
npm install
24
+
```
25
+
26
+
### Development
27
+
28
+
Start the development server:
29
+
```bash
30
+
npm run dev
31
+
```
32
+
33
+
The application will be available at `http://localhost:5173/`
34
+
35
+
### Building
36
+
37
+
Build the project for production:
38
+
```bash
39
+
npm run build
40
+
```
41
+
42
+
### Testing
43
+
44
+
Run tests:
45
+
```bash
46
+
npm test
47
+
npm run test:watch # Run tests in watch mode
48
+
```
49
+
50
+
### Linting
51
+
52
+
Run linting checks:
53
+
```bash
54
+
npm run lint # Run all linting checks
55
+
npm run lint-ts # ESLint for TypeScript files
56
+
npm run lint-css # Stylelint for CSS files
57
+
```
58
+
59
+
## Code Structure
60
+
61
+
**Source Files:**
62
+
-`src/App.tsx` - Main React component with DevExtreme Button example
63
+
-`src/App.test.tsx` - Tests for the main component
64
+
-`src/main.tsx` - Application entry point
65
+
-`src/App.css` - Component styles
66
+
-`src/index.css` - Global styles
67
+
-`src/setupTests.ts` - Test setup configuration
68
+
-`src/vite-env.d.ts` - Vite environment type definitions
For best TypeScript support in VS Code, see the official Vue guide: [Using Vue with TypeScript in VS Code](https://vuejs.org/guide/typescript/overview#using-vue-with-typescript).
8
17
9
18
## Type Support for `.vue` Imports in TS
10
19
11
-
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
20
+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. For editor integration, see the official Vue guide: [Using Vue with TypeScript in VS Code](https://vuejs.org/guide/typescript/overview#using-vue-with-typescript).
12
21
13
-
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/vuejs/language-tools/discussions/471) that is more performant. You can enable it by the following steps:
14
22
15
-
1. Disable the built-in TypeScript Extension
16
-
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17
-
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18
-
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
23
+
> **Note:**
24
+
> To type-check your project, use:
25
+
> ```sh
26
+
> npm run type-check
27
+
>```
28
+
> This uses `vue-tsc` to provide type checking for`.vue` files, as recommendedin the [official Vue TypeScript guide](https://vuejs.org/guide/typescript/overview.html).
19
29
20
30
## Customize configuration
21
31
@@ -27,12 +37,31 @@ See [Vite Configuration Reference](https://vite.dev/config/).
27
37
npm install
28
38
```
29
39
40
+
## Code Structure
41
+
42
+
**Source Files:**
43
+
- `src/App.vue` - Main Vue application component with router
44
+
- `src/main.ts` - Application entry point
45
+
- `src/components/HomeContent.vue` - Example component with DevExtreme Button
The application will be available at `http://localhost:5173/`
64
+
36
65
### Type-Check, Compile and Minify for Production
37
66
38
67
```sh
@@ -53,5 +82,7 @@ npm run lint
53
82
### Further help
54
83
55
84
You can learn more about Vue in the [Vue documentation](https://vuejs.org/guide/introduction.html).
85
+
You can learn more about Vite in the [Vite documentation](https://vite.dev/).
86
+
You can learn more about DevExtreme Vue components in the [DevExtreme Vue documentation](https://js.devexpress.com/Vue/).
56
87
57
-
To get more help on DevExtreme submit an issue on [GitHub](https://github.com/DevExpress/devextreme/issues) or [Support Center](https://www.devexpress.com/Support/Center/Question/Create)
88
+
To get more help on DevExtreme submit an issue on [GitHub](https://github.com/DevExpress/devextreme/issues) or [Support Center](https://supportcenter.devexpress.com/ticket/create)
0 commit comments