Complete Guide to Setting Up a Tauri Project with M1 Mac

Prerequisites (One-time Setup)

1. Development Environment Setup

# 1. Install Xcode Command Line Tools
xcode-select --install

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

# 3. Apply environment variables
source $HOME/.cargo/env

# 4. (Optional) Add the aarch64 target only for explicit-target or cross builds
#    A normal local build on Apple Silicon already uses this target by default.
rustup target add aarch64-apple-darwin

Project Setup (Recommended: Quick Path)

The official, recommended way to create a Tauri v2 project is the create-tauri-app scaffolder. It sets up the frontend, the src-tauri/ directory, and all configuration in one step.

# Navigate to your preferred location (e.g., Desktop/CSE)
cd ~/Desktop/CSE

# Scaffold a new Tauri app (pick a frontend like React or Vue when prompted)
npm create tauri-app@latest

# Move into the created project and install dependencies
cd my-tauri-app
npm install

When prompted, choose your frontend framework (e.g., React or Vue) and the Vite-based template. This produces the complete project structure shown below, including src-tauri/.

Project Setup (Manual: Add Tauri to an Existing Vite App)

If you already have a Vite frontend (or want to wire things up by hand), follow this path instead. The key step is npx tauri init, which is what actually creates the src-tauri/ directory.

1. Create Project Directory

# Navigate to your preferred location (e.g., Desktop/CSE)
cd ~/Desktop/CSE

# Create and move into project directory
mkdir my-tauri-app
cd my-tauri-app

2. Initialize Node.js Project

# Initialize npm
npm init -y

# Install Tauri CLI and API
npm install --save-dev @tauri-apps/cli
npm install @tauri-apps/api

3. Frontend Setup

# Choose either React or Vue

# For React
npm create vite@latest . -- --template react

# Or for Vue
npm create vite@latest . -- --template vue

#  Important: Select "Ignore files and continue" when prompted!

# Install dependencies
npm install

4. Add Tauri (creates src-tauri/)

# This generates the src-tauri/ directory and its configuration.
# Answer the prompts to match your Vite setup, e.g.:
#   - dev server URL:        http://localhost:5173/
#   - frontend dist dir:     ../dist
#   - frontend dev command:  npm run dev
#   - frontend build command: npm run build
npx tauri init

Project Structure

Your project should look like this:

my-tauri-app/
├── node_modules/
├── src-tauri/
│   ├── capabilities/
│   ├── icons/
│   ├── src/
│   │   └── main.rs
│   ├── build.rs
│   ├── Cargo.toml
│   └── tauri.conf.json
├── package.json
└── package-lock.json

Configuration Files

1. package.json

{
  "name": "my-tauri-app",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  }
}

2. src-tauri/tauri.conf.json

{
  "identifier": "com.myapp.dev",
  "productName": "my-tauri-app",
  "version": "0.1.0",
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173/",
    "frontendDist": "../dist"
  },
  "app": {
    "security": {
      "csp": null
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "My Tauri App",
        "width": 800
      }
    ]
  }
}

Running the Project

1. Development Mode

You only need a single command:

# Start the Tauri application
npm run tauri dev

Because tauri.conf.json sets "beforeDevCommand": "npm run dev", running npm run tauri dev automatically starts the frontend dev server for you—there is no need to open a second terminal.

# Fallback only: if the dev server doesn't start automatically,
# run it manually in a separate terminal
npm run dev

Common Issues and Solutions

1. “cargo not found” Error

# Reinstall Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

2. Frontend Server Not Starting

Check if you see this message:

Warn Waiting for your frontend dev server to start on http://localhost:5173/

Solution: Open a new terminal and run npm run dev

3. Port Conflicts

If port 5173 is in use, modify vite.config.js:

export default defineConfig({
  server: {
    port: 5174  // Change to available port
  }
})

Important Notes

1. Directory Navigation
   • All npm commands must be run from the project root (my-tauri-app)
   • Cargo commands should be run from src-tauri directory
2. File Locations
   • Frontend code goes in src/
   • Rust backend code goes in src-tauri/src/
   • Configuration files stay in src-tauri/
3. Development Workflow
   • npm run tauri dev auto-starts the frontend dev server via beforeDevCommand
   • Changes to Rust code require restart
   • Frontend changes hot-reload automatically
4. M1 Mac Specific
   • The aarch64-apple-darwin target is only needed for explicit-target or cross builds; a normal local build already uses it by default
   • Use Rust 1.77.2+ (Tauri 2.x MSRV)

Building for Production

# From project root
npm run tauri build

The built application will be in src-tauri/target/release

Troubleshooting Tips

1. Clean Build

   cd src-tauri
   cargo clean
   cd ..
   npm run tauri dev
   

2. Check Dependencies

   npm install
   cd src-tauri
   cargo check
   

3. Verify File Permissions

   chmod +x src-tauri/target/release/my-tauri-app
   

Following this guide step by step will help you set up a Tauri project successfully. Remember to check the terminal output for any errors and refer to the troubleshooting section if needed.