Skip to content

Commit 59a0710

Browse files
Resolved merge conflicts by keeping current branch version of README.md
2 parents 589d023 + fcd0131 commit 59a0710

File tree

8 files changed

+208
-99
lines changed

8 files changed

+208
-99
lines changed

.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,3 +303,8 @@ TesterMetadata.xml
303303

304304
# Backup files
305305
*.bak
306+
307+
*/wwwroot/*
308+
309+
!*/wwwroot/css/Site.css
310+
*.DS_Store

ASP.NET Core/Readme.md

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
# ASP.NET Core
1+
# ASP.NET Core DevExtreme Example
22

33
## Installation
44

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.
66

77
## Client-side resources and bundling
88

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
1017

1118
The resulted bundles will be located in the `wwwroot` folder:
1219
* `css/vendor.css` - a file with all CSS styles.
@@ -19,11 +26,11 @@ The default bundle includes jQuery, Bootstrap, and DevExtreme.
1926

2027
The main logic is located in the the `gulpfile.js` file at the root application level. The file contains two tasks:
2128

22-
* the `add-resouces` task
29+
* the `add-resources` task
2330

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`
2734

2835
* the `clean` task removes all previously created files (`vendor.js` and `vendor.css`) and folders (`icons` and `fonts`)
2936

@@ -37,13 +44,32 @@ If you need to include more features, you can uncomment one of the following sec
3744

3845
## Code
3946

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
59+
- `Views/Shared/_Layout.cshtml` - Layout template
60+
- `Views/_ViewImports.cshtml` - Global imports
61+
- `Views/_ViewStart.cshtml` - View start configuration
4162

42-
A list of files goes here
63+
**Configuration:**
64+
- `Program.cs` - Application entry point
65+
- `Startup.cs` - Service configuration
66+
- `gulpfile.js` - Build automation
67+
- `package.json` - NPM dependencies
68+
- `ASP.NET Core.csproj` - Project file
4369

4470
## Development server
4571

46-
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).
4773

4874
## Further help
4975

@@ -53,6 +79,6 @@ The client-side API is based on jQuery [jQuery documentation](https://api.jquery
5379
* [Call Methods](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods)
5480
* [Get a UI Component Instance](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance)
5581

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)
5783

5884

Angular/README.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
1-
# AngularTest
1+
# Angular DevExtreme Example
22

3-
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.
44

55
## Development server
66

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.
88

99
## Code scaffolding
1010

1111
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`.
1212

1313
## Build
1414

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.
1616

1717
## Running unit tests
1818

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
2027

2128
## Running end-to-end tests
2229

2330
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.
2431

2532
## Further help
2633

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)

Angular/src/app/app.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.default-style {
22
margin: 50px;
3-
width: 90vh;
3+
width: 90vw;
44
}

React/README.md

Lines changed: 72 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,78 @@
1-
# React + TypeScript + Vite
1+
# React + TypeScript + Vite + DevExtreme
22

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
412

513
Currently, two official plugins are available:
614

715
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
816
- [@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
917

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
69+
70+
**Configuration Files:**
71+
- `vite.config.ts` - Vite configuration
72+
- `package.json` - Dependencies and scripts
73+
- `tsconfig.json` - TypeScript configuration
74+
- `vitest.config.ts` - Vitest testing configuration
75+
1076
## Expanding the ESLint configuration
1177

1278
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
@@ -55,6 +121,8 @@ export default tseslint.config({
55121

56122
## Further help
57123

58-
You can learn more about React in the [React documentation](https://18.react.dev/learn).
124+
You can learn more about React in the [React documentation](https://react.dev/learn).
125+
You can learn more about Vite in the [Vite documentation](https://vite.dev/).
126+
You can learn more about DevExtreme React components in the [DevExtreme React documentation](https://js.devexpress.com/React/).
59127

60-
To get more help on DevExtreme submit an issue in the [Support Center](https://www.devexpress.com/Support/Center/Question/Create)
128+
To get more help on DevExtreme submit an issue in the [Support Center](https://supportcenter.devexpress.com/ticket/create)

Readme.md

Lines changed: 0 additions & 49 deletions
This file was deleted.

Vue/README.md

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
# vue-project
1+
# Vue 3 + TypeScript + Vite + DevExtreme
22

3-
This template should help get you started developing with Vue 3 in Vite.
3+
This template should help get you started developing with Vue 3 in Vite and DevExtreme components.
4+
5+
This project includes:
6+
- Vue 3.2.45
7+
- TypeScript 4.7.4
8+
- Vite for fast development and building
9+
- DevExtreme Vue 24.2.3
10+
- Vue Router 4.1.6
11+
- Vitest for testing
12+
- ESLint and Prettier for code quality
413

514
## Recommended IDE Setup
615

7-
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
16+
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).
817

918
## Type Support for `.vue` Imports in TS
1019

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).
1221

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:
1422

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 recommended in the [official Vue TypeScript guide](https://vuejs.org/guide/typescript/overview.html).
1929
2030
## Customize configuration
2131
@@ -27,12 +37,31 @@ See [Vite Configuration Reference](https://vite.dev/config/).
2737
npm install
2838
```
2939
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
46+
- `src/components/__tests__/` - Component tests
47+
- `src/views/HomeView.vue` - Home page view
48+
- `src/router/index.ts` - Vue Router configuration
49+
- `src/assets/` - Static assets
50+
51+
**Configuration Files:**
52+
- `vite.config.ts` - Vite configuration with Vue and DevExtreme optimizations
53+
- `package.json` - Dependencies and scripts
54+
- `tsconfig.json` - TypeScript configuration
55+
- `tsconfig.vitest.json` - Vitest-specific TypeScript configuration
56+
3057
### Compile and Hot-Reload for Development
3158
3259
```sh
3360
npm run dev
3461
```
3562
63+
The application will be available at `http://localhost:5173/`
64+
3665
### Type-Check, Compile and Minify for Production
3766
3867
```sh
@@ -53,5 +82,7 @@ npm run lint
5382
### Further help
5483
5584
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/).
5687
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

Comments
 (0)