Full-stack Apps with React & Frappe Framework Training : Day 1
HTML-код
- Опубликовано: 17 окт 2024
- In this training, we'll learn how to build high quality apps with Frappe Framework and React using shadcn, RadixUI and Frappe React SDK.
Specifically, we'll try to build a Project Management tool by extending the in-built Project Management module available in ERPNext by giving it a better user interface using React.
Who is this for?
If you're a React developer (or team) who's looking to build apps with great tailored UI/UX with Frappe framework - this training is for you. We'll cover the basics like setting up a React app with Frappe, fetching and updating data with React hooks, real-time updates with SocketIO and advanced topics like caching and optimistic updates. Knowledge of ERPNext is not required.
Prerequisites
Working knowledge of Frappe Framework and React.
Since this is an intermediate level training where we'll jump straight on, it is recommended to have some knowledge of both React and Frappe framework. We'll use TypeScript with React - but it's not required for this course. We'll also use other libraries like RadixUI, React Hook Form and TailwindCSS - but it's not necessary to be familiar with it.
Content
Setting up a React app
We will set a Frappe app with a React frontend on a local bench using Doppio. This will also include an in-depth explanation of how a React frontend can be bundled up with a Frappe app and then served on a Frappe site.
Authentication
We'll create a simple login page for our app and cover username and password login. We'll also walkthrough Raven's login and signup pages to give you more idea about how you can implement login via OAuth, Magic link and 2FA on your custom React apps.
Create, Read, Update, Delete
The basics - how do you perform operations on documents in Frappe via simple React hooks available in Frappe React SDK. Along the way, we'll build the UI for our project management app - working with the DocTypes already available in ERPNext.
Custom API calls
We'll use a few hooks to make calls to custom endpoints using GET/POST requests.
Realtime Updates & Optimistic Data
Frappe React SDK supports real-time updates out of the box - we'll use those to make our app more collaborative and user friendly. We'll also try performing updates to our documents "optimistically", i.e. updating the state of the app as soon as the user performs an action without waiting for a response from the server.
Refactor the whole thing (yes)
Once we're done with the above, we'll use some new hooks in Frappe React SDK to share state globally and reduce the amount of data we send as props. No more prop-drilling. We'll also cover ways to magically update data across the entire app without writing much code since the heavy lifting is done by Frappe React SDK. This part will feel magical, really.
By the end of it, you should be pretty comfortable in building amazing frontends with React for your Frappe apps!
Tools/Libraries we will be using:
Frappe React SDK
RadixUI
Shadcn
Doppio
TailwindCSS
SWR
React Hook Form
CMDK
this is the best bootcamp ever! thank you!
Thank you for uploading this tutorial this is excellent please upload day2.
I've managed to configure Next.js to fit its specific requirements, but I'm curious if this approach is advisable in the long run. Have you had any experience with this setup, and would you recommend it?
I think you can use Next.js - especially if your site requires great SEO - for example an e-commerce website. For most business apps though, SEO isn’t required and you can make a SPA which is much simpler IMO
Waiting for day 2
Please make a multipage website using frappe react sdk and also teach how to do the routing between the page
Yes that's part of the current training batch on Frappe School. This is just Day 1
@@TheCommitCompany This is such a cool topic! I've been playing around with shadcn, Next.js, RadixUI, and Frappe React SDK too, and I'm really excited to learn more. Are you saying you'll be sharing the training content from other days as well?
@@linmai Yes, videos till Day 3 have been uploaded. Day 4 and 5 will be uploaded once they are ready.
@@TheCommitCompany Thank you for sharing; it's very useful. I’ve recently been interacting with Frappe/ERPNext in a similar way. I noticed you initialized using Doppio for integration with Frappe. If my application is not based on Doppio but built with Next.js, React, Shadcn, and TailwindCSS, can I manually configure the Frappe-React-SDK to access Frappe/ERPNext? Is my understanding correct? A reference could be the video you shared: React app setup | Frappe React SDK - The Explainer | Episode 3.
@@linmai Yes you can. You would need to use OAuth to authenticate users and use the bearer token obtained from the OAuth flow and pass it to the FrappeProvider. Also, Frappe React SDK will only work on client components, not inside server components. To fetch data for server components, you need to create your own fetching solution (or use frappe-js-sdk).
2:05:00 extensions
Please make a video on converting the react app to PWA
Probably something that I can show on Day 5 I guess.
Thanks for sharing this tutorial
I face an issue
I have created site name library
When I write bench start then try to open the site it only works at
library.localhost:8000
So when create react app and try to use any hook from frappe react sdk it push request to library.localhost and respond with 404
library.localhost not found
Any help please
You should make your requests to port 8000. Configure this in the site URL of the FrappeProvider