Skip to content

Commit f0335df

Browse files
Updated readme files and ps1 script
1 parent a9cfd39 commit f0335df

File tree

6 files changed

+262
-254
lines changed

6 files changed

+262
-254
lines changed

ASP.NET Core/Readme.md

Lines changed: 20 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,32 @@
1-
# ASP.NET Core
1+
# ASP.NET Core DevExtreme Example
22

3-
## Installation
3+
For more information about this example check the [Readme](../README.md).
44

5-
Download the example and use Visual Studio 2019 to open the project.
5+
## Build and Run
66

7-
## Client-side resources and bundling
7+
Prerequisites: .NET 8 SDK, Node.js (for npm/gulp resource bundling).
88

9-
This project uses [NPM](http://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+
Restore and build:
10+
```sh
11+
dotnet restore
12+
dotnet build
13+
```
1014

11-
The resulted bundles will be located in the `wwwroot` folder:
12-
* `css/vendor.css` - a file with all CSS styles.
13-
* `css/icons` and `css/fonts` - folders that contain fonts and icons for DevExtreme themes.
14-
* `js/vendor.js` - a file that contains all scripts.
15+
Run (HTTPS on 5001, HTTP on 5000 by default):
16+
```sh
17+
dotnet run
18+
```
1519

16-
The default bundle includes jQuery, Bootstrap, and DevExtreme.
17-
18-
### Add more 3rd-party libraries for additional features/components
19-
20-
The main logic is located in the the `gulpfile.js` file at the root application level. The file contains two tasks:
21-
22-
* the `add-resouces` task
23-
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`
27-
28-
* the `clean` task removes all previously created files (`vendor.js` and `vendor.css`) and folders (`icons` and `fonts`)
29-
30-
If you need to include more features, you can uncomment one of the following sections:
31-
32-
* Gantt - scripts and styles for [dxGantt](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Gantt/Getting_Started_with_Gantt/).
33-
* Diagram - scripts and styles for [dxDiagram](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Diagram/Getting_Started_with_Diagram/).
34-
* Export - scripts and styles for the exporting feature: [Export Data to Excel](https://js.devexpress.com/DevExtreme/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/#Export_Data).
35-
* HtmlEditor - scripts and styles for [dxHtmlEditor](https://js.devexpress.com/DevExtreme/Guide/UI_Components/HtmlEditor/Overview/).
36-
* Full Bundle - scripts and styles for all above mentioned features/components.
37-
38-
## Code
39-
40-
Take a look at the following files of this example to see the required code:
41-
42-
A list of files goes here
43-
44-
## Development server
45-
46-
Use the Visual Studio `Run (F5)` command to run the project.
20+
You can also use Visual Studio: F5 / Ctrl+F5.
4721

4822
## Further help
4923

50-
You can learn more about the ASP.NET Core components' syntax in our documentation: [Concepts](https://docs.devexpress.com/AspNetCore/400574/devextreme-based-controls/concepts/razor-syntax)
51-
The client-side API is based on jQuery [jQuery documentation](https://api.jquery.com/) and described in the following topics:
52-
* [Get and Set Properties](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties)
53-
* [Call Methods](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods)
54-
* [Get a UI Component Instance](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance)
24+
DevExtreme ASP.NET Core Razor syntax: https://docs.devexpress.com/AspNetCore/400574/devextreme-based-controls/concepts/razor-syntax
25+
Client-side API basics:
26+
* Get/Set properties: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties
27+
* Call methods: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods
28+
* Get instance: https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance
5529

56-
To get more help on DevExtreme submit an issue in the [Support Center](https://www.devexpress.com/Support/Center/Question/Create)
30+
To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
5731

5832

Angular/README.md

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
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+
For more information about this example check the [Readme](../README.md).
44

5-
## Development server
5+
## Build and Lint
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+
Install dependencies:
8+
```sh
9+
npm install
10+
```
811

9-
## Code scaffolding
12+
Start dev server:
13+
```sh
14+
npm start
15+
```
16+
Open: http://localhost:4200/
1017

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`.
18+
Build production bundle:
19+
```sh
20+
npm run build
21+
```
1222

13-
## Build
14-
15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16-
17-
## Running unit tests
18-
19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20-
21-
## Running end-to-end tests
22-
23-
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.
23+
Run linter:
24+
```sh
25+
npm run lint
26+
```
2427

2528
## Further help
2629

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://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)
30+
Angular CLI docs: https://angular.dev/tools/cli
31+
DevExtreme Angular docs: https://js.devexpress.com/Angular/Documentation
32+
33+
To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).

React/README.md

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
1-
# React
1+
# React + TypeScript + Vite + DevExtreme
22

3-
Take a look at the following files of this example to see the required code:
3+
For more information about this example check the [Readme](../README.md).
44

5-
Your files go here
5+
## Build and Lint
66

7-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
7+
Install dependencies:
8+
```sh
9+
npm install
10+
```
811

9-
## Available Scripts
12+
Start dev server:
13+
```sh
14+
npm run dev
15+
```
16+
Open: http://localhost:5173/
1017

11-
In the project directory, you can run:
18+
Build production bundle:
19+
```sh
20+
npm run build
21+
```
1222

13-
### `npm start`
14-
15-
Runs the app in the development mode.<br>
16-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
17-
18-
The page will reload if you make edits.<br>
19-
You will also see any lint errors in the console.
20-
21-
### `npm run build`
22-
23-
Builds the app for production to the `build` folder.<br>
24-
It correctly bundles React in production mode and optimizes the build for the best performance.
25-
26-
The build is minified and the filenames include the hashes.<br>
27-
Your app is ready to be deployed!
28-
29-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
23+
Run linter:
24+
```sh
25+
npm run lint
26+
```
3027

3128
## Further help
3229

33-
You can learn more about React in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
34-
35-
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)
36-
37-
30+
React docs: https://react.dev/learn
31+
Vite docs: https://vite.dev/
32+
DevExtreme React docs: https://js.devexpress.com/React/Documentation
3833

34+
To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).

Vue/README.md

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,33 @@
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+
For more information about this example check the [Readme](../README.md).
44

5-
## Recommended IDE Setup
6-
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.vscode-typescript-vue-plugin).
8-
9-
## Type Support for `.vue` Imports in TS
10-
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.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12-
13-
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14-
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.
19-
20-
## Customize configuration
21-
22-
See [Vite Configuration Reference](https://vitejs.dev/config/).
23-
24-
## Project Setup
5+
## Build and Lint
256

7+
Install dependencies:
268
```sh
279
npm install
2810
```
2911

30-
### Compile and Hot-Reload for Development
31-
32-
```sh
33-
npm run dev
34-
```
35-
36-
### Type-Check, Compile and Minify for Production
37-
12+
Build the production bundle:
3813
```sh
3914
npm run build
4015
```
4116

42-
### Run Unit Tests with [Vitest](https://vitest.dev/)
43-
17+
Run the linter:
4418
```sh
45-
npm run test:unit
19+
npm run lint
4620
```
4721

48-
### Lint with [ESLint](https://eslint.org/)
49-
22+
Dev server to preview locally:
5023
```sh
51-
npm run lint
24+
npm run dev
5225
```
53-
### Further help
26+
27+
## Further help
5428

5529
You can learn more about Vue in the [Vue documentation](https://vuejs.org/guide/introduction.html).
30+
You can learn more about Vite in the [Vite documentation](https://vite.dev/).
31+
You can learn more about DevExtreme Vue components in the [DevExtreme Vue documentation](https://js.devexpress.com/Vue/).
5632

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)
33+
To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).

jQuery/README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
# jQuery
1+
# jQuery DevExtreme Example
22

3-
## Installation
3+
For more information about this example check the [Readme](../README.md).
44

5-
Download the example and use NPM to install required libraries.
5+
## Build and Lint
66

7-
```
7+
Install dependencies:
8+
```sh
89
npm install
910
```
1011

11-
## Code
12-
13-
Take a look at the following files of this example to see the required code:
14-
15-
Your files go here
16-
17-
## Development server
18-
19-
Run the `npm run start` command to run the development server. Use the following link to check the example:
12+
Start dev server:
13+
```sh
14+
npm start
2015
```
21-
http://localhost:3000/src/index.html
16+
App URL: http://localhost:5050/src/index.html
17+
18+
Run linter:
19+
```sh
20+
npm run lint
2221
```
2322

2423
## Further help
2524

26-
You can learn more about jQuery API in the [jQuery documentation](https://api.jquery.com/).
25+
jQuery docs: https://api.jquery.com/
26+
DevExtreme docs: https://js.devexpress.com/jQuery/Documentation
2727

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)
28+
To get more help with DevExtreme, submit a ticket through the [Support Center](https://supportcenter.devexpress.com/ticket/create).
2929

3030

0 commit comments

Comments
 (0)