Linch

Prerequisites

Before getting started, ensure your development environment meets the following requirements:

Node.js 18.0 or higher
pnpm (recommended), npm, or yarn
Rust and Cargo (installation guide)
Tauri dependencies (platform-specific installation guide)

Create a Project

Use the scaffolding tool to create a new project:

npx @linch-tech/create-desktop-app my-app

The CLI will prompt for the following information:

Option	Description	Example
Project name	Directory name and package.json name	`my-app`
Display name	App name shown in title bar	`My App`
App identifier	Unique app identifier	`com.mycompany.myapp`

Command Line Arguments

You can also skip interactive prompts using command line arguments:

npx @linch-tech/create-desktop-app my-app \
  -d "My App" \
  -i com.mycompany.myapp \
  -y

Arguments:

Argument	Description
`-d, --display-name`	Display name
`-i, --identifier`	App identifier
`-t, --template`	Template name (default: `default`)
`-y, --yes`	Skip all prompts, use default values

Install Dependencies

cd my-app
pnpm install

First-time installation may take a few minutes to compile Rust dependencies.

Start Development Server

pnpm tauri:dev

This will:

Start Vite dev server (frontend hot reload)
Compile Rust code
Open the desktop app window

First-time Rust compilation is slow, subsequent starts will be much faster.

Project Structure Preview

The created project structure looks like this:

my-app/
├── src/                    # Frontend source
│   ├── main.tsx           # React entry point
│   ├── App.tsx            # Routing and Provider setup
│   ├── config.ts          # Core configuration
│   └── pages/             # Page components
├── src-tauri/             # Tauri/Rust source
│   ├── src/
│   │   ├── lib.rs         # Rust entry point
│   │   └── main.rs
│   ├── Cargo.toml         # Rust dependencies
│   └── tauri.conf.json    # Tauri configuration
├── package.json
└── vite.config.ts

Configure Your App

Open src/config.ts, the core configuration file:

import { Home, Settings } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'app.name',
    version: `v${__APP_VERSION__}`,
  },

  nav: [
    { title: 'app.home', path: '/', icon: Home },
    { title: 'settings.title', path: '/settings', icon: Settings },
  ],

  features: {
    updater: true,
    database: true,
    sentry: false,
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My App',
          home: 'Home',
        },
      },
      zh: {
        app: {
          name: '我的应用',
          home: '首页',
        },
      },
    },
  },
};

Add a New Page

Create a page component src/pages/About.tsx:

import { PageHeader } from '@linch-tech/desktop-core';

export function About() {
  return (
    <div className="p-6">
      <PageHeader title="About" />
      <p>This is the about page.</p>
    </div>
  );
}

Add a route in src/App.tsx:

import { About } from './pages/About';

// Add to Routes
<Route path="/about" element={<About />} />

Add a navigation item in src/config.ts:

import { Info } from 'lucide-react';

nav: [
  // ...other items
  { title: 'app.about', path: '/about', icon: Info },
],

Build the App

pnpm tauri:build

Build artifacts are located in src-tauri/target/release/bundle/:

Platform	Artifacts
Windows	`.msi`, `.exe`
macOS	`.dmg`, `.app`
Linux	`.deb`, `.AppImage`

Quick Start

Prerequisites

Create a Project

Command Line Arguments

Install Dependencies

Start Development Server

Project Structure Preview

Configure Your App

Add a New Page

Build the App

Next Steps

Project Structure

Configuration Guide

On this page