Reading/ Editing and Exporting JSON files app

[frank wind]

Hello, I've recently found Tauri and wanted to use it to create an app that can read JSON files, edit there contents, and export them to be used in another project I'm working on. I've been searching for hours now on documentation on how to potentially do this, however what I have found is rather sparse and(or) very hard to understand.

Could someone explain how I could go about doing this, or at least link to to some idiot proof documentation to achieve what I'm describing.
Also if someone else has already asked this, link me to their thread, didn't see anything from doing a little search, but figure I'd still ask if one exist.

Not using any frameworks atm, only standard js and rust, latest version of Tauri. I'd rather prefer to not use any frameworks but if it's not possible without any, then I'll consider looking into them.

[white trellis]

https://tauri.app/v1/api/js/fs/ unless I misunderstood something you could just use fs to read jsons, json.parse them, do the changes and the stringify and fs to save them. All in pure vanilla.

Anything I missed?

Also maybe consider tauris file dialog https://tauri.app/v1/api/js/dialog/
Which as I understand it should dynamically extend your file access scope so you don't have to crate unrestrictive scopes (described in here https://github.com/tauri-apps/tauri/discussions/5990 )

[frank wind]

I think I have fs and whatnot, tho I kept running into an error when I tried to call the json from console

I'd elaborate further but I've went to work now so I can't really show anything atm

[white trellis]

Understandable. Just post the error here if u want to I'll take a look. Tho I'm gmt+2

[frank wind]

main.js

Borrowed from a stack overflow post

import { BaseDirectory, readTextFile } from "/@tauri-apps/api/fs";

export const readFile1 = async() => {
  try {
    const result = await readTextFile("user_settings.json", {
      dir: BaseDirectory.App,
    });
    console.log("result: " + result);
    return result;
  } catch (error) {
    console.log(error);
    return false;
  }
};

index.html

<script type="module" src="/main.js" defer></script>

error

[lean jewel]

Not sure what StackOverflow post that is from but @tauri-apps/api is probably not in your src directory.

[white trellis]

This seems like a problem with some of your modules more than loading of the JSON

[lean jewel]

You can avoid using frameworks by setting "build" > "withGlobalTauri": true in tauri.conf.json then referencing the parts you want using constants. For example:

const BaseDirectory = window.__TAURI__.fs.BaseDirectory;
const readTextFile = window.__TAURI__.fs.readTextFile;

[frank wind]

"withGlobalTauri": true was already set to true in the config json.
Adding the constants just results in