From 9275ac7bfefa8332d3bd7c9a6b77aa2eb6d50468 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 25 Jun 2024 19:38:03 +0400 Subject: [PATCH 1/7] README auto update [skip ci] --- readme.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/readme.md b/readme.md index 778359e..ccc0f89 100644 --- a/readme.md +++ b/readme.md @@ -2,6 +2,7 @@ ![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/199043012/22.2.2%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T828553) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) +[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) # Dashboard for React - Get Started @@ -55,3 +56,10 @@ Open ```http://localhost:3000/``` in your browser to see the result. - [Dashboard for Angular - Get Started](https://github.com/DevExpress-Examples/dashboard-angular-app-get-started) - [Dashboard for Vue - Get Started](https://github.com/DevExpress-Examples/dashboard-vue-app-get-started) - [Dashboard for ASP.NET Core - Backend](https://github.com/DevExpress-Examples/asp-net-core-dashboard-backend) + +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=no) + +(you will be redirected to DevExpress.com to submit your response) + From f70691919a392b869cf454edecd6fe3181452e70 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Thu, 10 Oct 2024 14:17:24 +0300 Subject: [PATCH 2/7] Created a new file vale.yml [skip ci] --- .github/workflows/vale.yml | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 .github/workflows/vale.yml diff --git a/.github/workflows/vale.yml b/.github/workflows/vale.yml new file mode 100644 index 0000000..adadc73 --- /dev/null +++ b/.github/workflows/vale.yml @@ -0,0 +1,26 @@ +name: vale-validation +on: + pull_request: + paths: + - README.md + +jobs: + vale: + name: runner / vale + runs-on: ubuntu-latest + steps: + - name: clone repo + uses: actions/checkout@v4 + - name: clone vale-styles repo + uses: actions/checkout@v4 + with: + repository: DevExpress/vale-styles + path: vale-styles + ssh-key: ${{ secrets.VALE_STYLES_ACCESS_KEY }} + - name: copy vale rules to the root repo + run: shopt -s dotglob && cp -r ./vale-styles/vale/* . + - name: vale linter check + uses: DevExpress/vale-action@reviewdog + with: + files: README.md + fail_on_error: true From 6ed82e23a85706950bba1a3fa38c8a4cc0525696 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 15 Oct 2024 19:41:02 +0400 Subject: [PATCH 3/7] Vale auto update [skip ci] --- .github/workflows/vale.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/vale.yml b/.github/workflows/vale.yml index adadc73..068c35b 100644 --- a/.github/workflows/vale.yml +++ b/.github/workflows/vale.yml @@ -24,3 +24,5 @@ jobs: with: files: README.md fail_on_error: true + filter_mode: nofilter + reporter: github-check From 0cba66cda895fce52350c8222bac58ce0e86868a Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Fri, 20 Dec 2024 15:26:04 +0200 Subject: [PATCH 4/7] Created a new file CODEOWNERS [skip ci] --- CODEOWNERS | 1 + 1 file changed, 1 insertion(+) create mode 100644 CODEOWNERS diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000..a88e69e --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1 @@ +* @DevExpressExampleBot \ No newline at end of file From 44eb04303f9fd2fb4d165a5817acef0062412582 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 4 Mar 2025 17:13:27 +0400 Subject: [PATCH 5/7] Vale auto update [skip ci] --- .github/workflows/vale.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/vale.yml b/.github/workflows/vale.yml index 068c35b..fc11f81 100644 --- a/.github/workflows/vale.yml +++ b/.github/workflows/vale.yml @@ -3,6 +3,8 @@ on: pull_request: paths: - README.md + - readme.md + - Readme.md jobs: vale: @@ -22,7 +24,7 @@ jobs: - name: vale linter check uses: DevExpress/vale-action@reviewdog with: - files: README.md + files: '["README.md", "readme.md", "Readme.md"]' fail_on_error: true filter_mode: nofilter reporter: github-check From 2af7c4ab396503e5e75430c52c14fd5307a75d47 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Thu, 11 Sep 2025 19:11:52 +0400 Subject: [PATCH 6/7] README auto update [skip ci] --- readme.md | 130 +++++++++++++++++++++++++++--------------------------- 1 file changed, 65 insertions(+), 65 deletions(-) diff --git a/readme.md b/readme.md index ccc0f89..67b93cc 100644 --- a/readme.md +++ b/readme.md @@ -1,65 +1,65 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/199043012/22.2.2%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T828553) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) -[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - - -# Dashboard for React - Get Started - -This project demonstrates how you can incorporate a DevExpress Dashboard component into a client-side app built with React. Use it as a template when you need to create a similar web application. - -The example uses a modular client-server approach. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server. - -- The [asp-net-core-server](asp-net-core-server) folder contains the backend project that targets .NET 6. -- The [dashboard-react-app](dashboard-react-app) folder contains the client application built with React. - -## Quick Start - -### Server - -In the **asp-net-core-server** folder run the following command: - -``` -dotnet run -``` -The server starts at `http://localhost:5000` and the client gets data from `http://localhost:5000/api/dashboard`. To debug the server, run the **asp-net-core-server** application in Visual Studio and change the client's `endpoint` property according to the listening port: `https://localhost:44307/api/dashboard`. - -See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages). - -> This server allows CORS requests from _all_ origins with _any_ scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: [Cross-Origin Resource Sharing (CORS)](https://docs.devexpress.com/Dashboard/400709) - -### Client - -In the **dashboard-react-app** folder, run the following commands: - -``` -npm install -npm start -``` - -Open ```http://localhost:3000/``` in your browser to see the result. - -## Files to Review -* [App.js](./dashboard-react-app/src/App.js) -* [Program.cs](./asp-net-core-server/Program.cs) - -## Documentation - -- [Create a React Dashboard Application](https://docs.devexpress.com/Dashboard/402336/get-started/build-web-dashboard-applications/create-a-react-dashboard-application) -- [Dashboard Component for React](https://docs.devexpress.com/Dashboard/401977/web-dashboard/dashboard-component-for-react) -- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) - -## Examples - -- [Dashboard for React - Configuration](https://github.com/DevExpress-Examples/dashboard-react-app-configuration) -- [Dashboard for Angular - Get Started](https://github.com/DevExpress-Examples/dashboard-angular-app-get-started) -- [Dashboard for Vue - Get Started](https://github.com/DevExpress-Examples/dashboard-vue-app-get-started) -- [Dashboard for ASP.NET Core - Backend](https://github.com/DevExpress-Examples/asp-net-core-dashboard-backend) - -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=no) - -(you will be redirected to DevExpress.com to submit your response) - + +![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/199043012/22.2.2%2B) +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T828553) +[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) +[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) + + +# Dashboard for React - Get Started + +This project demonstrates how you can incorporate a DevExpress Dashboard component into a client-side app built with React. Use it as a template when you need to create a similar web application. + +The example uses a modular client-server approach. The server (backend) project communicates with the client (frontend) application that includes all the necessary styles, scripts and HTML templates. Note that the script version on the client must match the version of libraries on the server. + +- The [asp-net-core-server](asp-net-core-server) folder contains the backend project that targets .NET 6. +- The [dashboard-react-app](dashboard-react-app) folder contains the client application built with React. + +## Quick Start + +### Server + +In the **asp-net-core-server** folder run the following command: + +``` +dotnet run +``` +The server starts at `http://localhost:5000` and the client gets data from `http://localhost:5000/api/dashboard`. To debug the server, run the **asp-net-core-server** application in Visual Studio and change the client's `endpoint` property according to the listening port: `https://localhost:44307/api/dashboard`. + +See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages). + +> This server allows CORS requests from _all_ origins with _any_ scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: [Cross-Origin Resource Sharing (CORS)](https://docs.devexpress.com/Dashboard/400709) + +### Client + +In the **dashboard-react-app** folder, run the following commands: + +``` +npm install +npm start +``` + +Open ```http://localhost:3000/``` in your browser to see the result. + +## Files to Review +* [App.js](./dashboard-react-app/src/App.js) +* [Program.cs](./asp-net-core-server/Program.cs) + +## Documentation + +- [Create a React Dashboard Application](https://docs.devexpress.com/Dashboard/402336/get-started/build-web-dashboard-applications/create-a-react-dashboard-application) +- [Dashboard Component for React](https://docs.devexpress.com/Dashboard/401977/web-dashboard/dashboard-component-for-react) +- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) + +## Examples + +- [Dashboard for React - Configuration](https://github.com/DevExpress-Examples/dashboard-react-app-configuration) +- [Dashboard for Angular - Get Started](https://github.com/DevExpress-Examples/dashboard-angular-app-get-started) +- [Dashboard for Vue - Get Started](https://github.com/DevExpress-Examples/dashboard-vue-app-get-started) +- [Dashboard for ASP.NET Core - Backend](https://github.com/DevExpress-Examples/asp-net-core-dashboard-backend) + +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=no) + +(you will be redirected to DevExpress.com to submit your response) + From a2d76077d91ba4bb18f69055a02efd47c39603c8 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Thu, 11 Sep 2025 21:11:50 +0400 Subject: [PATCH 7/7] README auto update [skip ci] --- readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 67b93cc..9328f68 100644 --- a/readme.md +++ b/readme.md @@ -57,9 +57,9 @@ Open ```http://localhost:3000/``` in your browser to see the result. - [Dashboard for Vue - Get Started](https://github.com/DevExpress-Examples/dashboard-vue-app-get-started) - [Dashboard for ASP.NET Core - Backend](https://github.com/DevExpress-Examples/asp-net-core-dashboard-backend) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=dashboard-react-app-get-started&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response)