Using HTMX with Frappe Framework

[@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

[@erpadminpspl7868]

yes we want detailed HTMX in future

[@MS-ht9su]

Hi, very good content about HTMX in frappe. Please make more videos about using htmx with frappe. Much appreciated!

[@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]

🙌

[@OliverBlackstock]

Hussain, this is amazing content! Format was fantastic, but this is also the exact content I was looking for. I just sold my leadership to adopt ERPNext and for our custom stack, we are looking to adopt HTMX. I would very much love to see a more complete course on Frappe with HTMX. If I can show an impressive set of results, I've got our team lined up to all get certified and become a dedicated Frappe/ERPNext shop. Excellent work!

[@BuildWithHussain]

Glad you found this useful! Happy to chat more on this on telegram if you like: @buildwithhussain

[@omarm.k.shehada3959]

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

[@aminudangaata]

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

[@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?

[@simonpeterwanyama1088]

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

[@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.. 😄

[@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

[@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 😎😎😎😎😎😎

[@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.

[@AhmedAbdEl-Sattar]

Awesome

[@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.

[@ksivasuriyaprakash9976]

Wow! Interesting

[@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.