Giters

NagariaHussain / doppio

A Frappe app (CLI) to magically setup single page applications and Vue/React powered desk pages on your custom Frappe apps.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support for React

nikkothari22 opened this issue · comments

commented

Hey @NagariaHussain ,

I am planning to create a similar Frappe app to setup a React SPA with Frappe. Should I contribute to this repository or would you recommend creating a new project (Frappe app) for React?

commented

Hi!

Awesome! I had a plan for react too, but was not able to make time and I had very little experience with react at that time.

Let's add it to this app itself: we can ask the user which JS framework she wants to setup in the prompt or directly via a flag.

I think we can use a lot of existing boilerplate code. I will help you as much as I can.

Let's do it! 🚀

commented

Yep I was thinking I would use a lot of the boilerplate code that you've already written, but would add a few things related to React:

  1. Hooks to perform CRUD operations on Documents
  2. A User Context that can be used throughout the React app that listens to the logged in state of the user and shares it with all components in the app
  3. Hooks to listen to changes using Socket
  4. Hooks to call API's (using the call method that you've written).

I feel like these hooks can be written in a separate npm library - and then installed when the users use Doppio. This way, they would be able to reliably update these hooks if we ever need to fix bugs, or add new features. Currently, the code is only added during installation - and updates need to made manually if needed.

I'm currently working on setting up React with all these hooks for a project. I should be done by this weekend, and will create an npm library as well as a PR in this repository to add React support.

commented

Hey @nikkothari22! Any update on this?

commented

Hey,

We are still working on the standard libraries for React. We are currently building it in one of our projects as a proof of concept, and then we will bring it to this repository as part of the install process.

We have currently built the following:

  1. Common function to call API endpoints
  2. Real-time listener with socket IO.
  3. React Hooks to perform CRUD operation with Frappe.
  4. User login/logout with UserContext.

What's remaining is hooks to upload files, hooks to start and stop document listeners.

We're also making sure that the hooks we write are built using the best practices - since React 18 changed a few things related to Effects and their usage is fetching data 😅

Will share more updates as we build and test all the features. The plan is to publish these hooks as a npm package, and then install the npm package whenever a user uses Doppio to install a React SPA on Frappe.

commented

Hey @nikkothari22! Just wanted to check in how is it going? Need any help?

commented

Hey @NagariaHussain ,

We're almost done with our library - in fact we're using it in one of our projects right now.

The only thing remaining is to create an option in Doppio to install a React PWA, instead of a Vue PWA. I'll look into the code you've written + bench documentation to get started on adding that option. I have not created a "bench-only app" before 😅

In the meantime, I'll publish the library we've created on npm, and share the link here by end of week.

Thanks!