Tauri (2) — Quick Start with Tauri + React (Open Source)

Goal

Quickly build a Tauri 2 + React desktop application, meeting the needs of efficient development and cross-platform compatibility.

Quick Start

Prerequisites

1. Using a Mac computer (Intel version).
2. Since we are only developing desktop applications and not targeting iOS for now, it's enough to install the Xcode command line tools. Installing the full Xcode suite is optional due to its large size 😄. If you prefer, having the full Xcode installed is recommended:

xcode-select --install

1. Tauri is built with Rust and requires it for development. So, let's install Rust:

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

1. A Node environment. As a frontend developer, this should already be installed, so we won't elaborate further.

Creating a Project

Using pnpm to create a project. Why use pnpm? We won’t elaborate here. However, you can choose any package manager according to your preference.

pnpm create tauri-app

Since the company's tech stack revolves around React, we’ll continue building with React here. However, feel free to choose another framework if preferred.

Opening the project, the structure and dependency configuration look like this:

Project Structure

Tauri 2 projects typically adopt a modular design, balancing cross-platform compatibility and maintainability. The directories we frequently modify are:

Core Directories

• src-tauri/: Contains Rust backend code and core Tauri configuration.

  • src-tauri/src/: Rust logic, including commands, state management, and plugin implementation.
  • src-tauri/tauri.conf.json: Main configuration file managing app settings, permissions, and window settings.
  • src-tauri/capabilities/default.json: A key configuration file in Tauri 2, defining app capabilities and permissions. It controls which APIs the frontend can access, ensuring security and adhering to the principle of least privilege.
  • src-tauri/Cargo.toml: Rust configuration file, defining project dependencies, metadata, and build settings.

• src/: Manages UI components, hooks for interacting with Tauri APIs, and global state management (e.g., Zustand).

  • Frontend code (e.g., React or Vue)

• dist/ or build/: Packaged frontend resources (generated by Vite, React, etc.).

Run the project to see the results:

pnpm install

pnpm tauri dev

You can open the browser to debug via the Web view:

Local: http://localhost:1420/

At the same time, the desktop app interface is displayed:

Build the Project

pnpm tauri build

References

1. Tauri Official Documentation
2. Coco-App GitHub Repository

Summary

I have recently started working on a Tauri project, namely Coco-App, which is now open source. The project is still in progress, and I would greatly appreciate your star 🌟 on GitHub.

This is my first time working with Tauri, and I am learning through continuous exploration. I hope to connect with like-minded individuals to learn and grow together.

This post is part of a series, and I plan to continue writing and sharing the development process of specific features. Stay tuned!