Skip to main content
This guide will help you set up your development environment and get ZipDrop running locally.

​
Prerequisites

Before you begin, ensure you have the following installed:
1

Node.js 18+

Download and install from nodejs.org. Verify installation:
node --version
2

Rust

Install Rust and Cargo using rustup:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Verify installation:
rustc --version
cargo --version
3

pnpm

Install pnpm globally:
npm install -g pnpm
Verify installation:
pnpm --version
ZipDrop is built specifically for macOS 12.0 or later. Development and building on other platforms is not supported.

​
Clone the Repository

Clone the ZipDrop repository to your local machine: 
git clone https://github.com/theforkproject-dev/zipdrop.git
cd zipdrop

​
Install Dependencies

Install both frontend and backend dependencies: 
pnpm install
This command will:
  • Install Node.js dependencies listed in package.json
  • Download Rust crates specified in src-tauri/Cargo.toml
  • Set up the Tauri CLI
The initial install may take a few minutes as Rust compiles dependencies for the first time.

​
Run Development Server

Start the development server with hot-reload enabled: 
pnpm tauri dev
This command will:
  1. Start the Vite development server on http://localhost:1420
  2. Compile the Rust backend
  3. Launch the ZipDrop app window
  4. Enable hot-reload for both frontend and backend changes
Demo mode is enabled by default - uploaded files will be saved to ~/Downloads/ZipDrop without requiring R2 credentials.

​
Project Structure

After cloning, your project structure should look like this: 
zipdrop/
├── src/                    # React frontend
│   ├── App.tsx            # Main application component
│   ├── App.css            # Styles
│   └── main.tsx           # Entry point
├── src-tauri/             # Rust backend
│   ├── src/
│   │   ├── main.rs        # Tauri app entry point
│   │   ├── lib.rs         # Library exports
│   │   ├── config.rs      # Configuration & Keychain
│   │   ├── processor.rs   # File processing & WebP conversion
│   │   └── uploader.rs    # R2 upload logic
│   ├── Cargo.toml         # Rust dependencies
│   └── tauri.conf.json    # Tauri configuration
├── package.json           # Node dependencies
└── vite.config.ts         # Vite configuration

​
Development Tips

​
Enable Debug Logging

The Rust backend includes println! statements for debugging. View logs in the terminal where you ran pnpm tauri dev.

​
Frontend Development

For faster frontend-only iteration, you can run just the Vite server: 
pnpm dev
However, Tauri APIs won’t be available in this mode.

​
Backend Changes

When you modify Rust code, the app will automatically recompile and restart. This may take 10-30 seconds depending on the changes.

​
Next Steps

Architecture

Understand the tech stack and project structure

Building

Build production-ready binaries

Build docs developers (and LLMs) love

Get started for freeTalk to us