Development Workflow

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• vite.config.js
• src-tauri/tauri.conf.json
• src-tauri/Cargo.toml
• src-tauri/src/lib.rs
• src/App.jsx
• src/components/Form/Form.jsx
• src/components/DetailView/DetailView.jsx
• README.md

The Scripty project is a desktop application built using Tauri, with a React frontend powered by Vite. This document outlines the project's structure, dependencies, build processes, and the communication flow between the frontend and the Rust backend, providing a comprehensive guide for developers. The development environment is designed for efficiency, leveraging Vite's fast Hot Module Replacement (HMR) for the frontend and Rust's performance for backend operations.

The core of the workflow involves running a Vite development server for the React UI and a Tauri process that wraps this UI in a native webview. The Tauri backend, written in Rust, exposes native functionalities to the frontend, such as file system access and command execution. This hybrid approach allows for rapid web-based UI development combined with the power of a native backend.

Project Structure

The repository is organized into two main parts: the frontend React application located in the src directory and the backend Rust/Tauri application in src-tauri.

This diagram shows the high-level directory and file structure of the project.

• src/: Contains all frontend React source code, including components, hooks, and the main application entry point (main.jsx).
• src-tauri/: Contains all backend Rust code, Tauri configurations (tauri.conf.json), Rust dependencies (Cargo.toml), and the main library entry point (lib.rs).
• package.json: Defines project metadata, scripts, and frontend dependencies.
• vite.config.js: Configuration for the Vite development server and build tool.
• index.html: The main HTML entry point for the React application.

Sources: package.json, vite.config.js, src-tauri/tauri.conf.json, src-tauri/Cargo.toml, src-tauri/src/lib.rs, src/main.jsx, index.html

Dependencies

The project relies on separate sets of dependencies for its frontend and backend components.

Frontend Dependencies

The frontend is built with React and utilizes several libraries for UI, state management, and interaction with the Tauri backend. Key dependencies are managed in package.json.

Package	Version	Description
react	^19.2.0	A JavaScript library for building user interfaces.
@vitejs/plugin-react	^4.3.4	The official Vite plugin for React projects.
@tauri-apps/api	^2	Provides the JavaScript API for interacting with the Tauri backend.
zustand	^5.0.7	A small, fast, and scalable state-management solution.
tailwindcss	^4.1.11	A utility-first CSS framework for rapid UI development.
motion	^12.23.12	A library for creating animations in React.
@heroicons/react	^2.2.0	A set of free, high-quality SVG icons.

Sources: package.json:12-26

Backend (Rust) Dependencies

The backend is a Rust application. Its dependencies, or "crates", are managed in src-tauri/Cargo.toml.

Crate	Version	Description
tauri	2	The main framework for building the desktop application.
serde	1	A framework for serializing and deserializing Rust data structures.
tauri-plugin-fs	2	Tauri plugin for file system access.
tauri-plugin-dialog	2	Tauri plugin for native system dialogs.
tauri-plugin-process	2	Tauri plugin for interacting with external processes.
tauri-plugin-updater	2	Tauri plugin for application auto-updates.

Sources: src-tauri/Cargo.toml:19-27

Build and Development Process

The development and build processes are orchestrated by NPM scripts defined in package.json and configured in tauri.conf.json and vite.config.js.

Development

To start the development environment, the npm run dev script is used. This command is also specified as the beforeDevCommand in the Tauri configuration.

1. npm run dev executes vite.
2. Vite starts a development server on http://localhost:1420, as configured in vite.config.js. This server provides HMR for the React frontend.
3. The Tauri process starts, loading its webview from the devUrl (http://localhost:1420).

The Vite server is configured to prevent clearing the screen to ensure Rust compilation errors from the backend are visible. It also ignores the src-tauri directory to prevent unnecessary reloads.

Sources: package.json:7, tauri.conf.json:8-9, vite.config.js:16-29

Production Build

To create a production build, the npm run build script is used, which is also the beforeBuildCommand in the Tauri configuration.

1. npm run build executes vite build.
2. Vite compiles and bundles the React application for production.
3. The output is placed in the ../dist directory, as specified by frontendDist in tauri.conf.json.
4. Tauri then takes the contents of the dist directory and bundles it into a native executable for the target platform.

The following diagram illustrates the flow for both development and production.

NPM Scripts

The available scripts provide shortcuts for common development tasks.

Script	Command	Description
dev	vite	Starts the Vite development server for the frontend.
build	vite build	Builds the frontend application for production.
preview	vite preview	Serves the production build locally for previewing.
tauri	tauri	A wrapper for all Tauri CLI commands (e.g., tauri dev, tauri build).

Sources: package.json:6-10

Frontend-Backend Communication

Communication between the React frontend and the Rust backend is handled by Tauri's invoke function. The frontend can call Rust functions that are exposed with the #[tauri::command] macro.

Exposed Rust Commands

The Rust backend in src-tauri/src/lib.rs exposes several functions to the frontend.

Command Name	Parameters	Description
read_ps1	path: String	Reads the content of a .ps1 file from the given path.
open_terminal	content: String	Opens a new PowerShell terminal and executes the provided script content as the current user.
open_admin_terminal	content: String	Opens a new PowerShell terminal with administrator privileges to run the script.
run_sys_terminal	content: Option<String>	Executes a command using an embedded syspwsh.exe to run as the SYSTEM user.

Sources: src-tauri/src/lib.rs:27-61

Invocation from Frontend

The frontend uses the invoke function from @tauri-apps/api/core to call these commands. For example, when adding a new script, the Form.jsx component calls read_ps1 to get the script's content.

// src/components/Form/Form.jsx:20-24
try {
  const [filename, content] = await invoke("read_ps1", { path: selected });
  file = filename;
  end = content;
} catch (err) { //... }

Similarly, the DetailView.jsx component invokes commands to run the selected script with different privilege levels.

// src/components/DetailView/DetailView.jsx:17-19
case "2":
    await invoke("open_admin_terminal", { content: selectedItem.content });
    break;

Communication Sequence

The following sequence diagram illustrates the process of reading a script file from the frontend.

This diagram shows how a user action in the UI triggers a call through the Tauri API to the Rust backend, which then interacts with the operating system's file system and returns the result.

Sources: src/components/Form/Form.jsx:19-22, src-tauri/src/lib.rs:54-59, src/components/DetailView/DetailView.jsx:16-22