React in Desk Pages ERPNext 15

We wanted to add React code to our custom app for Desk Pages. We have the complete react dashboard ready, and now we need to add it to our custom app.

We are using ERPNext 15.

Can anyone help me or guide me on how I can add React code to custom desk pages? In our custom app there are around 35+ pages in react dashboard.

You can set up a page running React via Doppio.

Example app: Whiteboard by @buildwithhussain : GitHub - NagariaHussain/tldraw_whiteboard: tldraw powered whiteboard, right in Frappe's Admin UI / desk

Dropio is not an option because it’s create completely separate url like /dashboard and then it’s work

We wanted to run inside erpnext deak

Check this: https://github.com/NagariaHussain/doppio?tab=readme-ov-file#creating-desk-pages - you can create Desk pages using Doppio now.

Hello nikkil, I tried using react-router inside that page. It is not changing the components. Can we use router inside that pages or is it only for one component with a single route?

Hello @nikkothari22 When run command build after that changed some code in react desk page app then run build , it was not updated , I have to change file name then It make build and I can able to see those changes .
and react touter is not working . any solution ??

@nikkothari22, sir, if you can guide us on how we can use the react route, it will be perfect.

React router won’t work inside Desk since the routing is handled by Frappe framework. You can only use React components inside desk. Create separate pages if needed.