However I’m not really sure if I understand your answers correctly.
What do you mean by “config proxy”?
output will be js file, if old version of js framework is used then it’ll also output a css file
I’m not sure if react and react-dom would output a css file during bench build process, and I suppose the version of them would be fixed as package-lock.json specified?
“<use-me data="hello components"></use-me>”, confused as this is supposed to be JSX or HTML?
I figured out how to use React inside a Desk Page.
Assuming you created hello.jsx and myapp.bundle.js above.
1-Use Desk to create a Page(not a WebPage) called mypage (anything you want). Make sure it’s standard and choose your module.
2-A directory named mypage will be created along with files named mypage.js and mypage.json.
3-In mypage.js add this
Thank you very much for the detailed instructions.
I tried but failed at the attached the hello.jsx into window.myapp.hello.
In step 2, you wrote
2-create jsx file in same dir, e.g. hello.jsx
I tried with in my bench/app/myapp directory and also public/js but neither of them worked for me.
Could you please clarify which directory should I use, from the syntax import hello from "./hello", I suppose I need to attached the hello.jsx along with myapp.bundle.js in the same directory?
the jsx and bundle.js files must go in public/js.
Also you must rename your react-bundle.js to react.bundle.js.
You can see here frappe/esbuild.js at develop · frappe/frappe · GitHub
that frappe looks for files named *.bundle.js
Thank you for your answers, I realized that I’m still using Frappe 12.11.0 and ERPNext 12.13.0 which doesn’t have the esbuild.js. I suppose that’s also the reason why I keep getting the error “cannot use import statement outside a module”.
I will try to update these two apps version and let you know how it goes.
Thank you again for your efforts.
It’s been a good learning experience but I’m afraid I hit a dead end with Frappe.
Making React work in Frappe is possible it’s not practical.
My use case is simple, I tried to implement a Desk page to should PrimeReact table here
I was not able to import css(import 'primeicons/primeicons.css';) files easily and had to modified frappe’s esbuild script to do so.
After building, the resulting css bundle was in the wrong directory and was unable to be loaded by Desk.
Long story short, this is the end of the road for me in Frappe.
It’s a great framework that makes simple things easy, but unfortunately the hard things are impossible. Good luck everyone.
I’d recommend to first convert anything from any modern js framework to es5
and then use those packaged dist in frappe’s build.json
During first conversion setup your js build system however you like. Once we get it in es5 we can treat it as any other third party .min.js used in frappe framework.
There is a drawback in this method: frappe.* javascript object is not available during development of such app and you need to depend on dev server proxy to frappe gunicorn locally running on 8000. If dev server with proxy is setup then it can be used as api server during development, all backend ReST API calls can be made to /api/* routes from the frontend app without setting any URL.
The plus here is, you get all the power of metadata driven frappe framework to build the backend. If not you’ll need to wire up a lot of choices together to represent validated models in ReST/GraphQL API.
I got React working as frontend !, so the problem was esbuild will produce .js and .css and the .css file has no “entryPoint” so frappe simply ignores it. To fix this i avoided using css and used styled-components, using this esbuild does not produce a different css file and everything simply works !
You can access the frappe object in development as well, and there’s no need to use an api proxy nor there’s a need to build web-components
Also note that esbuild is only available on frappe’s develop branch, frappe v13 used rollup which doesn’t compile jsx on its own, there’s ways to make it work, but esbuild worked out-of-the-box
Thank you, although I am still using V12, so I am not able to verify your solution. But your steps make sense to me, so I marked it as a solution to the ones who might encounter the same issue.