Tauri with SolidJS Project Structure

Tauri with SolidJS for fine-grained reactivity. No virtual DOM, React-like syntax, tiny bundles.

#tauri #rust #desktop #solid #solidjs #reactive

PNG PDF

Project Directory

my-tauri-app/

package.json

vite.config.ts

tsconfig.json

index.html

src/

SolidJS app

index.tsx

App entry

App.tsx

Root component

index.css

components/

TitleBar.tsx

Sidebar.tsx

FileTree.tsx

pages/

Home.tsx

Settings.tsx

stores/

Solid stores

app.ts

createStore state

files.ts

lib/

tauri/

commands.ts

events.ts

utils.ts

public/

src-tauri/

Cargo.toml

tauri.conf.json

build.rs

src/

main.rs

lib.rs

commands/

mod.rs

app.rs

icons/

capabilities/

Why This Structure?

SolidJS compiles to direct DOM updates—no virtual DOM diffing. React-like JSX syntax with true reactivity. Smallest runtime of major frameworks. Perfect match for Tauri's performance focus. Signals and stores manage state efficiently.

Key Directories

src/stores/-Solid stores with createStore and createSignal
src/components/-Reactive components with JSX
src/lib/tauri/-Command wrappers using createResource
src/pages/-Route-level components

Getting Started

npm create tauri-app@latest -- --template solid-ts
cd my-tauri-app && npm install
npm install @solidjs/router (optional)
npm run tauri dev

Solid Store

// src/stores/files.ts
import { createStore } from 'solid-js/store';
import { invoke } from '@tauri-apps/api/core';

const [files, setFiles] = createStore([]);

export async function loadFiles(path: string) {
  const result = await invoke('list_files', { path });
  setFiles(result);
}

export { files };

When To Use This

Performance-critical desktop apps
Developers wanting React-like DX without vDOM
Apps with complex reactive state
Smallest possible frontend bundle

Trade-offs

Smaller ecosystem-Fewer component libraries available
Different mental model-Reactivity rules differ from React
Learning curve-Fine-grained reactivity takes practice