xcode-select --install

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

rustup update

npm create tauri-app

✔ Project name · tauri-quick-start-vite
✔ Choose your package manager · npm
✔ Choose your UI template · react-ts

Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already.

Done, Now run:
  cd tauri-quick-start-vite
  npm install
  npm run tauri dev

├── README.md
├── index.html
├── package.json
├── public
│   ├── tauri.svg
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── main.tsx
│   ├── style.css
│   └── vite-env.d.ts
├── src-tauri
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons
│   │   ├── 128x128.png
│   │   ├── 128x128@2x.png
│   │   ├── 32x32.png
│   │   ├── Square107x107Logo.png
│   │   ├── Square142x142Logo.png
│   │   ├── Square150x150Logo.png
│   │   ├── Square284x284Logo.png
│   │   ├── Square30x30Logo.png
│   │   ├── Square310x310Logo.png
│   │   ├── Square44x44Logo.png
│   │   ├── Square71x71Logo.png
│   │   ├── Square89x89Logo.png
│   │   ├── StoreLogo.png
│   │   ├── icon.icns
│   │   ├── icon.ico
│   │   └── icon.png
│   ├── src
│   │   └── main.rs
│   └── tauri.conf.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

cd tauri-quick-start-vite
npm install
npm run tauri dev

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

import { invoke } from '@tauri-apps/api'

// now we can call our Command!
// Right-click the application background and open the developer tools.
// You will see "Hello, World!" printed in the console!
invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))

{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../build",
+    "withGlobalTauri": true
  },

{
  "tauri": {
    "allowlist": {
      "fs": {
        "all": true, // enable all FS APIs
        "readFile": true,
        "writeFile": true,
        "readDir": true,
        "copyFile": true,
        "createDir": true,
        "removeDir": true,
        "removeFile": true,
        "renameFile": true,
        "exists": true
      }
    }
  }
}

{
  "tauri": {
    "allowlist": {
      "fs": {
        "scope": ["$APP/databases/*"]
      }
    }
  }
}

$AUDIO, $CACHE, $CONFIG, $DATA, $LOCALDATA, $DESKTOP, $DOCUMENT, $DOWNLOAD, $EXE, $FONT, $HOME, $PICTURE, $PUBLIC, $RUNTIME, $TEMPLATE, $VIDEO, $RESOURCE, $APP, $LOG, $TEMP

 "tauri": {
    "allowlist": {
      "fs": {
        "all": true, // 書き込みを含む全ての操作を許可
        "scope": ["$DOWNLOAD/*"] // download directory への書き込みを許可
      },
      "dialog": {
        "message": true // alert できるように
      }
    },
//...

import { BaseDirectory, writeTextFile } from '@tauri-apps/api/fs';
import { useState } from 'react';
import './CreateFile.css';

export const CreateFile = () => {
  const [fileName, setFileName] = useState('');
  const [content, setContent] = useState('');

  return (
    <div className='create-file'>
      <input value={fileName} onChange={(e) => setFileName(e.target.value)} />
      <textarea
        rows={10}
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <button
        onClick={async () => {
          if (!fileName) {
            alert('Enter FileName');
            return;
          }
          if (!content) {
            alert('Enter content');
            return;
          }

          try {
            await writeTextFile(fileName, content, {
              dir: BaseDirectory.Download,
            });
            alert('Success');
          } catch (e) {
            alert(e);
          }
        }}
      >
        Create New File
      </button>
    </div>
  );
};

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "message": true,
      }
    }
  }
}