I got really confused with file I/O in JS/TS. most examples I see works with DOM and has browser-based solutions.

Also, I did not understand how to make fs work, it seems to need a webpack config, where I use CRA and do not want to eject.

in a React component I want to fetch some data from a server then save them as a JSON file in the project folder (the same path, root, public folder, no matter) or directly download (no button needed).

//data type just in case
inteface IAllData{ name:string; allData:IData[];}

so after fetching some data want to save them to name.json

public componentDidMount(){
   this.fetchData().then(()=>this.saveData())
}

public async fetchData(){/* sets data in state*/}

public saveData(){
    const {myData}=this.state;
    const fileName=myData.name;
    const json=JSON.stringify(myData);
    const blob=new Blob([json],{type:'application/json'})
    /* How to write/download this blob as a file? */
}

here trying window.navigator.msSaveOrOpenBlob(blob, 'export.json'); did not work

note: I know it has security risks, it is not for production. save the file in the project folder is preferred but a download is totally ok.