# Create with Electron Forge (the official scaffolding tool)
npm create electron-app@latest my-app -- --template=vite-typescript
cd my-app && npm start

// main.ts — runs in Node.js context
import { app, BrowserWindow, ipcMain, dialog, shell } from "electron";
import { join } from "path";
import Store from "electron-store";
import { autoUpdater } from "electron-updater";

const store = new Store<{ windowBounds: { width: number; height: number } }>();

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  const { width, height } = store.get("windowBounds", { width: 1200, height: 800 });

  mainWindow = new BrowserWindow({
    width,
    height,
    titleBarStyle: "hiddenInset",
    webPreferences: {
      preload: join(__dirname, "preload.js"),
      contextIsolation: true, // Security: never disable this
      nodeIntegration: false, // Security: never enable this
    },
  });

  if (process.env.NODE_ENV === "development") {
    mainWindow.loadURL("http://localhost:5173");
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(join(__dirname, "renderer/index.html"));
    autoUpdater.checkForUpdatesAndNotify();
  }

  mainWindow.on("close", () => {
    store.set("windowBounds", mainWindow!.getBounds());
  });
}

app.whenReady().then(createWindow);

// IPC handlers — bridge between renderer and Node.js
ipcMain.handle("dialog:openFile", async () => {
  const { filePaths } = await dialog.showOpenDialog(mainWindow!, {
    properties: ["openFile"],
    filters: [{ name: "JSON Files", extensions: ["json"] }],
  });
  return filePaths[0];
});

ipcMain.handle("shell:openExternal", (_event, url: string) => {
  return shell.openExternal(url);
});

// preload.ts — context bridge between renderer and main
import { contextBridge, ipcRenderer } from "electron";

contextBridge.exposeInMainWorld("electronAPI", {
  openFile: () => ipcRenderer.invoke("dialog:openFile"),
  openExternal: (url: string) => ipcRenderer.invoke("shell:openExternal", url),
  onUpdateAvailable: (callback: () => void) =>
    ipcRenderer.on("update-available", callback),
});

// TypeScript declaration for renderer
declare global {
  interface Window {
    electronAPI: {
      openFile: () => Promise<string | undefined>;
      openExternal: (url: string) => Promise<void>;
      onUpdateAvailable: (callback: () => void) => void;
    };
  }
}

// App.tsx — runs in Chromium
import { useState } from "react";

export function App() {
  const [file, setFile] = useState<string | null>(null);

  const handleOpenFile = async () => {
    const filePath = await window.electronAPI.openFile();
    if (filePath) setFile(filePath);
  };

  return (
    <div>
      <button onClick={handleOpenFile}>Open File</button>
      {file && <p>Selected: {file}</p>}
    </div>
  );
}

// electron-builder.config.js
module.exports = {
  appId: "com.yourcompany.app",
  productName: "My App",
  publish: {
    provider: "github",
    owner: "your-org",
    repo: "your-app",
  },
  mac: { category: "public.app-category.developer-tools" },
  win: { target: "nsis" },
  linux: { target: ["AppImage", "deb"] },
};

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

# Create Tauri app
npm create tauri-app@latest my-tauri-app
# Select: Vite + TypeScript + React (or Vue/Svelte)
cd my-tauri-app
npm install
npm run tauri dev

// src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::{Manager, State};
use std::sync::Mutex;

// Shared state across commands
struct AppState {
    counter: Mutex<u32>,
}

// Commands are type-safe functions exposed to the frontend
#[tauri::command]
async fn read_file(path: String) -> Result<String, String> {
    tokio::fs::read_to_string(&path)
        .await
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn increment_counter(state: State<AppState>) -> u32 {
    let mut counter = state.counter.lock().unwrap();
    *counter += 1;
    *counter
}

#[tauri::command]
async fn fetch_data(url: String) -> Result<String, String> {
    // Tauri's fetch is separate from WebView's fetch
    // This runs in Rust — bypasses CORS restrictions
    let response = reqwest::get(&url)
        .await
        .map_err(|e| e.to_string())?
        .text()
        .await
        .map_err(|e| e.to_string())?;
    Ok(response)
}

fn main() {
    tauri::Builder::default()
        .manage(AppState { counter: Mutex::new(0) })
        .invoke_handler(tauri::generate_handler![
            read_file,
            increment_counter,
            fetch_data,
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// Tauri's invoke is fully type-safe with @tauri-apps/api
import { invoke } from "@tauri-apps/api/core";
import { open } from "@tauri-apps/plugin-dialog";
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
import { emit, listen } from "@tauri-apps/api/event";

// Call Rust commands
const count = await invoke<number>("increment_counter");
console.log("Counter:", count);

// File operations via official plugins
const filePath = await open({
  multiple: false,
  filters: [{ name: "JSON", extensions: ["json"] }],
});

if (filePath) {
  const contents = await readTextFile(filePath as string);
  console.log("File contents:", contents);
}

// Listen to events from Rust backend
const unlisten = await listen<{ message: string }>("backend-event", (event) => {
  console.log("Event from Rust:", event.payload.message);
});

// Emit events to Rust backend
await emit("frontend-action", { action: "save", data: "..." });

{
  "app": {
    "security": {
      "csp": "default-src 'self'; img-src 'self' data: https:"
    }
  },
  "plugins": {
    "fs": {
      "scope": {
        "allow": ["$APPDATA/**", "$DOCUMENT/**"],
        "deny": ["$APPDATA/sensitive/**"]
      }
    },
    "dialog": {
      "all": true
    },
    "http": {
      "scope": ["https://api.yourservice.com/**"]
    }
  }
}

# Official plugin ecosystem
npm install @tauri-apps/plugin-fs
npm install @tauri-apps/plugin-dialog
npm install @tauri-apps/plugin-notification
npm install @tauri-apps/plugin-shell
npm install @tauri-apps/plugin-store      # Persistent key-value storage
npm install @tauri-apps/plugin-updater    # Auto-updates
npm install @tauri-apps/plugin-sql        # SQLite via sqlx

# Install Neutralino CLI
npm install -g @neutralinojs/neu

# Create project
neu create my-app --template neutralinojs/neutralinojs-minimal
cd my-app && neu run

{
  "applicationId": "js.neutralino.myapp",
  "version": "1.0.0",
  "defaultMode": "window",
  "port": 0,
  "documentRoot": "/resources/",
  "url": "/",
  "enableServer": true,
  "enableNativeAPI": true,
  "tokenSecurity": "one-time",
  "logging": {
    "enabled": true,
    "writeToLogFile": true
  },
  "nativeAllowList": [
    "app.*",
    "os.*",
    "filesystem.*",
    "storage.*",
    "window.*"
  ],
  "modes": {
    "window": {
      "title": "My Neutralino App",
      "width": 1200,
      "height": 800,
      "minWidth": 800,
      "minHeight": 600,
      "resizable": true,
      "maximize": false
    }
  },
  "cli": {
    "binaryName": "myapp",
    "resourcesPath": "/resources/",
    "extensionsPath": "/extensions/",
    "frontendLibrary": {
      "patchFile": "/resources/index.html",
      "devUrl": "http://localhost:5173"
    }
  }
}

// Neutralino's built-in API — no npm packages needed
import Neutralino from "@neutralinojs/lib";

Neutralino.init();

// File system
const data = await Neutralino.filesystem.readFile("./data/config.json");
const parsed = JSON.parse(data);

await Neutralino.filesystem.writeFile(
  "./data/output.json",
  JSON.stringify({ result: "ok" }, null, 2)
);

// OS operations
const info = await Neutralino.os.getEnv("HOME");
const pid = await Neutralino.os.execCommand("ls -la /tmp", {
  background: false,
  stdIn: "",
});
console.log(pid.stdOut);

// Storage (simple key-value, no npm needed)
await Neutralino.storage.setData("user-preferences", JSON.stringify({ theme: "dark" }));
const prefs = await Neutralino.storage.getData("user-preferences");

// Window management
await Neutralino.window.setTitle("Updated Title");
await Neutralino.window.setSize({ width: 1400, height: 900 });
await Neutralino.window.center();

// extensions/backend/main.js — Node.js or Python process you spawn
// Neutralino doesn't have a built-in backend runtime
// For complex logic, write extensions:
const NeutralinoExtension = require("@neutralinojs/neu-extension");

const ext = new NeutralinoExtension();

ext.on("initExtension", () => {
  console.log("Extension initialized");
});

ext.on("customLogic.processData", async (event) => {
  const { data } = event.detail;
  // Do compute-intensive work here
  const result = heavyComputation(data);
  await ext.sendMessage("customLogic.result", { result });
});

ext.init();