Using HTMX with Frappe Framework

In this video, we will add HTMX to our custom app's portal pages.
Repository: github.com/BuildWithHussain/h...
HTMX docs: htmx.org/docs
Static Assets in Frappe Framework: frappeframework.com/docs/user...
For schedule, past episodes and more, check website: buildwithhussain.dev
My Setup: buildwithhussain.dev/setup/
Articles: buildwithhussain.dev/articles
Reach Out:
My Twitter: x.com/NagariaHussain
More Resources:
ERPNext: erpnext.com
Frappe School: frappe.school
Frappe Framework: frappeframework.com
About Frappe: frappe.io
Chapters
00:00 - Introduction to HTMX
01:24 - Demo Book Shelf App
01:50 - Creating a portal page in our Frappe app
02:50 - Adding HTMX to the portal page
03:33 - Ping with HTMX directives
05:46 - Using Pico.css for styling
06:56 - Building the book shelf page
09:02 - Creating a Book DocType
10:33 - Rendering the list of Books
12:25 - Creating a Form for new book
14:11 - Handling form submit with HTMX
15:43 - Returning HTML from our API endpoint in Frappe
19:36 - Using Jinja "includes" feature for DRY templates
23:45 - Implementing a refresh list button
27:12 - Using Static Assets in Frappe to server HTMX lib
Get 15 days free trial Frappe site (without Credit Card details!) here: frappecloud.com/frappe/signup
#frappe #erpnext #webdevelopment #markdown

[@BuildWithHussain]

In order for HTMX requests to work without disabling CSRF check on our site (which I have on my local), we need to attach CSRF token to it. I have pushed a fix to the demo app, you can implement the same in your template/HTML file: github.com/BuildWithHussain/htmx_portal/commit/4a762ec41ece784b45ee2af93e270260c616d50d

[@omarm.k.shehada3959]

Thank you for this great episode.
Just one question, how can we set a filter field?

[@erpadminpspl7868]

yes we want detailed HTMX in future

[@AdamDawoodjee3]

I like this shorter, more direct video format. Was also admiring htmx a few months ago and feeling a little left behind but this is here now 🎉

[@BuildWithHussain]

🙌

[@aminudangaata]

Beginning to get a hang of importing assets. Frappe rocks!!

[@simonpeterwanyama1088]

Thank you very much Hussain for this. 👏👏🕺🕺

[@pythondjango9406]

i am currently trying to implement project using vue js in frappe ui, but now i have watched this video aswell, can you tell me which is better vue.js or htmx?
also, i wanted to know that currently i do run yarn dev to run development server, but i have also used frappe drive, in that I dont have to run yarn dev(it directly runs on the main port) , so after development how can i configure in to work on main website?

[@AhmedAbdEl-Sattar]

Awesome

[@Danger-qi2my]

Thank Hussain this is great !
Do you know if there is a way to have hot reload with this workflow ?

[@BuildWithHussain]

With the present setup, we can’t get hot reload working (Jinja rendering). Maybe separate tooling has to be built to get that working.. 😄

[@galaxylab6282]

this is more amazing for my workflow app please enhance it to add items and add users from the frontend with custom details and roles , Thanks for the video lot off concepts clearance but everyday is new day with new thing 😎😎😎😎😎😎

[@ksivasuriyaprakash9976]

Wow! Interesting

[@akarapol99]

is it possible to add the htmx script inside the normal doctype form

[@BuildWithHussain]

It is, but I don’t know why that can be useful. Maybe you want to combine the Custom Page feature with HTMX, that might be more useful…

[@akarapol99]

@@BuildWithHussain I want to call the external system via api and get related data and display to the user while they create new doc in frappe

[@mixchannel7460]

what about rout and authentication ?

[@BuildWithHussain]

You can apply auth at context + Jinja level.

[@pheakdey2008]

What if 1000+record, how can manage pagging

[@BuildWithHussain]

Limit the records and paginate, you should be good. Check htmx examples page to get some more idea on this.

[@kongorodickens9014]

I am getting the error below:
{
"errors": [
{
"type": "CSRFTokenError",
"message": "Invalid Request",
"title": "Message",
"indicator": "red"
}
]
}

[@BuildWithHussain]

I will fix it in app, you can set ignore_csrf to 1 in your local.

[@BuildWithHussain]

Check this: github.com/BuildWithHussain/htmx_portal/commit/4a762ec41ece784b45ee2af93e270260c616d50d

[@kongorodickens9014]

Thank You.

[@adnankhafabi4671]

Sorry, what is your browser?

[@BuildWithHussain]

Arc (arc.net)

[@adnankhafabi4671]

thank you@@BuildWithHussain

[@adnankhafabi4671]

bro, can you tell me why my frappe always must run bench clear-cache when i want to look the changed?@@BuildWithHussain

[@chanukyamaruthisuravarapu2540]

@@adnankhafabi4671 just hard refresh since it wont make request again for all static files so if u clear cache it will make new request to fetch those files.