I'm building a desktop app using Tauri + React + Vite.

I have a form in React that collects customer information, and I want to save this data locally in a data.json file inside my app folder — while the app is running.

I don’t want to use any backend or external API, just save and read data from a local JSON file.

Here’s a simplified version of my component:

import { useState } from 'react';
import { TextField, Button } from '@mui/material';

export default function AddCastumer() {
  const [castumerName, setCastumerName] = useState('');
  const [castumerAddress, setCastumerAddress] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // I want to save these values to a local JSON file (data.json)
  };

  return (
    

       setCastumerName(e.target.value)} />
       setCastumerAddress(e.target.value)} />
      Add Customer
    
  );
}

What I tried

• Using axios.post() to a local file — didn't work.

• Using the @tauri-apps/plugin-fs API — it gives errors or doesn’t seem to write to the file.

• Tried dynamic import of the Tauri FS plugin to avoid Vite errors, but still no success.

Question

What is the correct and reliable way to write and read JSON files locally from a React (frontend) component in a Tauri app?

My environment

• Tauri: v2.x

• React: v18

• Vite

• Windows 10