Context: I want to create a new front-end website to display products (Item doctype) from ERPNext in custom way. So far I focused fully on backend and desk customization, so I would like to make correct architectural decision before moving to writing actual code.
Can I embed websites generated in Frappe Builder in ERPNext custom apps or do they need to be treated as standalone apps on the same site? I like the design philosophy of Frappe Builder, but complete lack of documentation (only Setting Up) does not help.
Frappe Builder is the newer generation and replacement of the āWeb Pageā and is useful to create static/dynamic web pages.
The upcoming Frappe Studio is the newer generation and replacement of āPortal Pageā and is useful to create Vue web applications.
Both of the above offer interactive drag-and-drop builders (no-code / low-code). And as far as I know, they use Frappe UI as a component library.
However if you would like to build your own web application (React/Vue) for your custom frappe application you can utilize Frappe Doppio with or without Frappe UI (Check āThe Commit Companyā and āBuild with Husseinā on YouTube).
Regarding your scenario, if your purpose is to simply display your products then Frappe Builder is the perfect solution for you. (Check Build With Hussein 2-episode series on YouTube)
If your plan is to make ecommerce so users can shop and order your products, then your best option is to create your custom frontend (Vue/React) through Frappe Doppio (with or without Frappe UI). Alternatively, if you prefer low-code / no-code builders then you might want to wait until Frappe Studio is released (promised in 2025 but no eta yet)
Regarding the original web page builder that ships with Frappe Framework, I think it will be discontinued in favor of the new Frappe Builder. And a similar scenario awaits Portal Pages which will be replaced by Frappe Studio.
Thank you for taking the time to write this summary. Earlier, they seemed redundant to me at first and I always wondered what problems each of those tried to solve, but now things got much clearer.
If you could elaborate more on:
Frappe UI vs Doppio
Frappe Doppio Without Frappe UI: what benefits does it provide over a conventional React/Vue? Why not directly React/Vue?
Frappe Doppio With Frappe UI: What underlying front-end technology is it? Can we customize/extend our app using the underlying technology or are we limited to what Frappe Doppio With Frappe UI provides?
I am not from a front-end background but I am trying to understand each approachās consequences.
Frappe Doppio does the hard work for you in setting up a Vue/React environment that connects seamlessly with your Custom Frappe App backend through āfrappe react sdkā in case of react, or Frappe UI in case of Vue.
These kits provide you the essentials to connect to your frappe backend (Fetch and CRUD on docs and doctypes) as well as other essentials like managing socket connections, authentication, etcā¦
You can definitely create a separately hosted frontend for your app and connect them through API calls.
To understand more and to answer your questions read these resources;
I appreciate your well-structured responses. Thanks again.
One more clarification and one related question, if you donāt mind.
So frappe react sdk for React is what Frappe UI for Vue, right? Does the same job for each respective front-end technology, right? My question is: do you know if Frappe has a preference for one or the other? Since Frappe apps mainly use Vue, is frappe react sdk a non-sustainable choice?
For custom Desk Pages (for logged-in users, via DocType: Page), and for Custom HTML Blocks, can we use Vue out of the box? I checked examples of Page and as far as I remember they were only Jinija which looked legacy or limited to me. And what about apps like Insights with their complete custom front?
I tried both of them in two different projects. While both options are poorly documented, I found Frappe UI easier to integrate with a frappe backend.
1a. Again, Frappe UI is a Vue component library (buttons, input fields, etcā¦) however it uses frappe-js-sdk to integrate with your frappe backend.
1b. Almost all frappe applications have been / are being rebuilt with Frappe UI. (HRMS, Drive, Insights, Builder, Studio, CRM, Gameplan, Helpdesk) so I am pretty certain that Frappe UI will be supported on the long term.
1c. Regarding the React SDKās long-term support, it depends on The Commit Company, the legends behind Raven.
I donāt think you can, unless you wanna go build-less through Vue/React-Babel CDN/ESM. (For component management, you can create a doctype with a code field, and a data field to store your file name then write an on_update server script method to automatically generate and insert the file into the āFileā doctype (After deleting any existing similar file name). Your āPageā or āWebpageā will now serve as your index.html that will import all the external components)
Example
<script type="module">
import React from 'https://esm.sh/react'
// import your component files that were made through our custom code management doctype
import App from '/files/frontend/App.js '
</script>
Inside app you can do imports for your other components.
Notes on using the above method
You will need to version/timestamp your imports to bust cache
You have direct access to frappe js which is very nice
Remember to enable version history tracking for your code files management doctype
The Frappe core team has invested heavily in Vue, and Frappe UI is the āofficialā modern front end solution. The shift is definitely towards site-hosted single-page apps (like Drive, Insights, etc.), with Builder and Studio intended to fill a user-friendly complementary role. Desk seems likely to remain the āone UI to rule them allā.
One huge advantage to Vue is that it can be added to a site incrementally. You can go big with a build step to make any application you imagine with modern tools, but you can also embed Vue easily into any existing webpage. I use Vue extensively on the Desk and have been really happy with the results. I donāt do much with Page doctypes, but Iāve built template-driven dashboards in Custom HTML Blocks and full interactive applications in singelton doctypes. (Iām sure Pages would work too, though Iām not sure Iād invest much time or energy in those at this point.)
Frappe React SDK and FrappeUI wouldnāt be comparable IMO.
Frappe React SDK is meant to only be a library to help you fetch/update data in Frappe and manage realtime connections. Under the hood it uses SWR. Itās got first class support for Typescript and we use it with frappe-types (another Frappe app created by us for developers). However, Frappe React SDK does not contain any UI components - so itās only React based utilities for fetching data and managing global state of that data.
FrappeUI does a lot more than just data fetching and updates. It also contains UI components - and you can see it being used in all new Frappe apps. The UI consistency between all Frappe apps is because of FrappeUI - it handles both data fetching/updates as well as provide you with building blocks to build the user interface.
As far as long term stability goes, I would argue both are equally well maintained. Since the React SDK is just for data fetching, we donāt need to update it a lot as compared to a UI library. We use React SDK on Raven and Commit, along with another large product weāre working on. Frappe UI will obviously be maintained since itās being used in so many Frappe products.
Which one should you use ā Whatever youāre most comfortable with.
If you build a desk page with React, you should not (and maybe cannot?) use Frappe React SDK since you have all the data fetching utilities from Frappe itself.
