Create a Guide on Custom Frontend Dev

ERPNext
, , , ,
1

Hi all,

I feel like there is near to no documentation or straight forward guides on how to create a fully functional and secure front-end (Possibly using frameworks like Vue or React) that communicates to the back end (Note that depending on the Version this changes too).

I mention this as I threw myself in the deep-end and learnt as I went (Especially for implementing Vue), but most information provided on the docs or forums did not help much.
I understand that there are currently some custom made apps on github to make static pages, but I’m talking about taking it a step further.

Frappe and ERPNext have an amazing UI and Desk experience, but for companies outsourcing or giving access to the site to customers, its some times more professional/preference to provide a custom front end if the need arises. I came to Frappe with past project experiences in Django and Flask, and I would like to work on sharing how to make Frappe, a battery-included framework integrate easier with other front-end/custom frameworks like the guides provided by Django or Flask.

Am I the only one that thinks this? or is only a small part of the community actually interested in this?

If so, would anyone be interested in working together, to create documentation to add to the existing official documentation?

Thanks.

5 Likes
2

Take a look here … I think that FrappeUI is the way …

Some talks in the next ERPNext conference are related to this area.
Hope this helps.

3

Thank avc, I worked with these repos during the work I was doing, but my post was more in regards of documenting from start to finish, how someone can get Frappe working with a front end like VUE via docs, no need to rely on installing repos as apps on a site. An ABC doc, detailing how to make it work, depending on the framework and frappe/erp version.

8 Likes
5

Hey @Mortodus, I strongly agree with you. There should be a documentation of how to go around Frappe UI. Listing the components is not enough.

1 Like
6

@buildwithhussain maybe you can do few more of these :wink:

2 Likes
7

Sure!

1 Like
8

Let me briefly introduce my practical experience on my end. Currently, I’m using PrimeVue along with Frappe-JS-SDK for development.

  1. At the core, I’m still using Frappe and ERPNext for building business logic.
  2. On the front end, I’m utilizing PrimeVue (Sakai Vue) along with Frappe-JS-SDK, all of which are open source.
  3. When it comes to deployment, setting up routes in Nginx is all it takes.

The specific steps are also quite straightforward:

  1. On the machine where Frappe and ERPNext are installed, simply create a directory and pull the PrimeVue git repository.
  2. Run “yarn vite --host 0.0.0.0” for development and testing.
  3. Configure Nginx for deployment.

The key differences from Frappe UI are:

  1. How data is obtained - Frappe UI can quickly read/operate on doctypes using createResource, while with a custom setup, you’d need to rely on Frappe-JS-SDK.
  2. If you opt for pre-built frameworks, the development process can indeed be much faster.

After looking at the way Frappe UI is constructed, I’m also considering combining Frappe UI’s data encapsulation with the integration of PrimeVue.

4 Likes