Getting Started
Relevant source files
The following files were used as context for generating this wiki page:(S)cripty is a desktop application designed for managing and executing PowerShell scripts. It is built using Tauri, a framework for building cross-platform desktop apps with web frontends. The frontend is developed with React and Vite, providing a modern and reactive user interface, while the backend logic is handled by Rust for performance and system-level access.
This guide provides a high-level overview of the project's architecture, technology stack, and core functionalities. It covers the project structure, build process, and the interaction between the frontend and backend components, serving as an entry point for new developers.
Project Architecture
The project is a monorepo with a clear separation between the Rust-based Tauri backend and the React-based frontend.
src-tauri/: Contains all the backend Rust code. This includes the main application entry point, Tauri command handlers for system interactions, and build configurations.src/: Contains all the frontend React code, including components, state management hooks, and styling.
Sources: package.json, src-tauri/Cargo.toml
High-Level Structure
The following diagram illustrates the main components of the application and their relationship.
This diagram shows the main React components managed by App.jsx, the central state management provided by useListStore.js, and the communication layer where the frontend invokes commands exposed by the Rust backend.
Sources: src/App.jsx:2-9, src-tauri/src/lib.rs:49-58, src-tauri/src/main.rs:5
Technology Stack
The project utilizes a combination of modern web and systems programming technologies.
| Technology | Role | Source File |
|---|---|---|
| Tauri | Core framework for building the desktop application. | src-tauri/Cargo.toml:19 |
| React | JavaScript library for building the user interface. | package.json:19 |
| Vite | Frontend build tool and development server. | package.json:28 |
| Rust | Backend language for system-level operations and Tauri commands. | src-tauri/Cargo.toml:1 |
| Zustand | State management library for the React frontend. | package.json:22 |
| Tailwind CSS | Utility-first CSS framework for styling. | package.json:20 |
Development and Build
The project's lifecycle is managed through npm scripts defined in package.json.
| Script | Description |
|---|---|
dev | Starts the Vite development server for the frontend and the Tauri app in development mode. |
build | Builds the frontend assets using Vite. |
tauri | Provides access to the Tauri CLI for commands like tauri dev and tauri build. |
Sources: package.json:7-11, src-tauri/tauri.conf.json:8-11
Build Configuration
The src-tauri/tauri.conf.json file orchestrates the development and build process by defining commands that Tauri executes.
beforeDevCommand:npm run devdevUrl:http://localhost:1420beforeBuildCommand:npm run buildfrontendDist:../dist
The Vite configuration in vite.config.js sets up the development server on port 1420 and ignores the src-tauri directory to prevent unnecessary reloads.
Sources: src-tauri/tauri.conf.json:8-12, vite.config.js:16-25
Core Features
Frontend-Backend Communication
The React frontend communicates with the Rust backend using Tauri's invoke function. This allows JavaScript to call Rust functions that have been exposed as Tauri commands.
The primary commands are defined in src-tauri/src/lib.rs:
| Command | Description | Parameters |
|---|---|---|
read_ps1 | Reads the content of a .ps1 or .txt file. | path: String |
open_terminal | Spawns a PowerShell process with the given script content. | content: String |
open_admin_terminal | Spawns a PowerShell process with administrator privileges. | content: String |
run_sys_terminal | Executes a command as the SYSTEM user using an embedded syspwsh.exe. | content: Option<String> |
Sources: src-tauri/src/lib.rs:27-70
The following sequence diagram shows the process of running a script from the DetailView component.
This diagram illustrates how a user action in the UI triggers a call to invoke, which executes the corresponding Rust function to interact with the operating system.
Sources: src/components/DetailView/DetailView.jsx:21-25, src-tauri/src/lib.rs:32-42
State Management and Persistence
Application state, including the list of scripts and tags, is managed by Zustand. The useListStore hook provides actions to add, remove, and filter items.
State is persisted to the local file system using zustand/middleware/persist and a custom storage adapter that leverages the @tauri-apps/plugin-fs plugin. All data is saved to a single scriptStorage.json file located in the user's application data directory.
Sources: src/Hooks/useListStore.js:2-4
Persistence Flow
The flow for persisting state changes is as follows:
This flow shows that any state change triggers the persistence middleware, which uses the Tauri FS plugin to write the updated state to a JSON file.
Sources: src/Hooks/useListStore.js:14-21, 33-36, 60-67
Data Model
The core data entities managed by the store are items (scripts) and tags.
An item object has the following structure when created:
{
title: "Script Name",
content: "PowerShell script content...",
tags: ["tag1", "tag2"],
date: "MM/DD/YYYY",
id: "unique-id"
}
Sources: src/components/Form/Form.jsx:51-57
The useListStore provides the following state and actions:
Sources: src/Hooks/useListStore.js:24-77
Automatic Updates
The application includes a built-in updater, configured in src-tauri/tauri.conf.json. It checks for new releases from a specified GitHub repository endpoint. If an update is found, it is downloaded and installed automatically, and the application is relaunched.
The update check is performed on application startup in App.jsx.
"updater": {
"active": true,
"pubkey": "...",
"endpoints": [
"https://github.com/SemtexHR/ScriptTool/releases/latest/download/latest.json%22
]
}