CSRF Token Error during local development in React app with Vite + Frappe

[Nikhil Kothari]

Hi Hussain,

I know my issue isn't directly related to this project, but I tried setting up a SPA with React + Vite - by looking at your Vue + Vite example. Thank you!

I am able to run the React app, both on production (after bench update --build) as well as in live reload (yarn dev). However, my API calls to the backend encounter the CSRF Token Error while live reloading. The API calls work after building the application and serving it using bench start. I assume this is because the build files are generated when I run bench update --build and the Python context adds the CSRF token.

How do I make this work in live reload since that's critical to a great developer experience?

Thank you!

[Md Hussain Nagaria]

Hi! Glad you found the project helpful.

Yes, in development: add "ignore_csrf": 1 in your site config. This should fix it in dev environment. In production, the token is placed in a script tag in index.html.

Let me know if it works for you or not.

[Nikhil Kothari]

Yep. Just did that and it works!

This is pretty cool. Now I can use React with Frappe 🥳

Thank you.