Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 #2

Copilot · 2025-12-24T23:19:50Z

Scaffolds a Tauri v2 desktop application with React 19, TanStack Router file-based routing, Tailwind CSS v4, and modern tooling. Sets bundle identifier to com.leaguetoolkit.forge.

Stack

Desktop: Tauri v2.9 with Rust backend
Frontend: React 19 + Vite 7 + TypeScript 5.8
Routing: TanStack Router with file-based routes and automatic type generation
Styling: Tailwind CSS v4 via Vite plugin + Base UI components
Tooling: ESLint flat config, Prettier with Tailwind plugin
CI: GitHub Actions workflow (lint → typecheck → build)

Structure

src/
├── routes/
│   ├── __root.tsx          # Root layout with Router Devtools
│   └── index.tsx           # Landing page with Base UI Button demo
├── main.tsx                # RouterProvider setup
├── index.css               # Tailwind import
└── routeTree.gen.ts        # Auto-generated by router plugin

src-tauri/
├── src/lib.rs              # Greet command example
├── tauri.conf.json         # v2 schema, bundle ID configured
└── Cargo.toml

Example Route

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router';
import { Button } from '@base-ui/react/button';

export const Route = createFileRoute('/')({
  component: Index,
});

function Index() {
  return (
    <main className="container mx-auto flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">Welcome to LTK Forge</h1>
      <Button className="rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600">
        Greet
      </Button>
    </main>
  );
}

Screenshots

Initial UI with Tailwind CSS and Base UI components:

Router Devtools active in development:

Scripts

pnpm dev          # Vite dev server (localhost:1420)
pnpm tauri dev    # Desktop app in dev mode
pnpm build        # Production build
pnpm lint         # ESLint
pnpm typecheck    # TypeScript validation
pnpm format       # Prettier

Note: pnpm tauri dev requires system dependencies (webkit2gtk on Linux, etc.). See Tauri prerequisites.

Original prompt

Create a complete scaffold for a Tauri v2 + React (Vite + TypeScript) desktop app in LeagueToolkit/ltk-forge.

Context:

There is an existing draft PR Initialize Tauri/React app with TanStack Router, Tailwind CSS v4, and tooling #1 intended for this work, but it currently contains 0 file changes.

Target bundle identifier: com.leaguetoolkit.forge.

Requirements

Tauri

Initialize Tauri v2 project structure including src-tauri/.

Ensure tauri.conf.json (or v2 equivalent) uses identifier/bundle id com.leaguetoolkit.forge.

Provide pnpm scripts to run Tauri dev/build.

Frontend

Use Vite + React + TypeScript.

Add TanStack Router with file-based routing and type generation enabled.

Configure the TanStack router Vite plugin.

Include a minimal working route structure: root route + index route.

Include router provider wiring in src/main.tsx.

Optionally include Router Devtools in development.

UI/Styling

Add @base-ui-components/react and create at least one example component usage in the UI.

Configure Tailwind CSS v4 using tailwindcss and @tailwindcss/vite.

Ensure Tailwind is active and working in the starter UI.

Linting/Formatting

Configure ESLint flat config (new ESLint config format).

Include TypeScript + React recommendations, React hooks, and React Refresh plugin for Vite.

Configure Prettier and include prettier-plugin-tailwindcss.

Add pnpm scripts:

lint, format, format:check, typecheck.

CI

Add a GitHub Actions workflow that runs on PRs and pushes to main.

Workflow should:

Set up Node and pnpm

Install dependencies

Run pnpm lint, pnpm typecheck, and pnpm build

Docs

Add/update a README.md with:

prerequisites

commands to run dev (frontend + tauri dev)

lint/format/typecheck commands

Acceptance criteria

pnpm install works.

pnpm dev runs the Vite frontend.

pnpm tauri dev runs the Tauri app.

pnpm lint, pnpm typecheck, pnpm build succeed.

Router typegen is functional (route tree generated/updated) and file-based routes resolve.

Notes

Keep structure at repository root (single app), not monorepo apps/.

Keep changes minimal but complete and consistent.

This pull request was created from Copilot chat.

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

… tooling Co-authored-by: Crauzer <18646077+Crauzer@users.noreply.github.com>

Co-authored-by: Crauzer <18646077+Crauzer@users.noreply.github.com>

Copilot

Pull request overview

This PR scaffolds a complete Tauri v2 desktop application with React 19, TanStack Router (file-based routing), Tailwind CSS v4, and modern tooling for the LeagueToolkit/ltk-forge project. The scaffold includes a working example with a "greet" command demonstrating Rust-frontend communication.

Key changes:

Full Tauri v2 project structure with Rust backend and React frontend
TanStack Router with file-based routing and automatic type generation
Tailwind CSS v4 via Vite plugin with Base UI component library
Complete development toolchain: ESLint flat config, Prettier, TypeScript 5.8
CI/CD workflow for linting, type checking, and building

Reviewed changes

Copilot reviewed 24 out of 48 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
package.json	Defines dependencies and npm scripts for the scaffold
vite.config.ts	Configures Vite with React, TanStack Router, and Tailwind plugins
tsconfig.json / tsconfig.node.json	TypeScript configuration for source and build files
src/main.tsx	React app entry point with RouterProvider setup
src/routes/__root.tsx	Root route with Router Devtools
src/routes/index.tsx	Landing page with example Tauri command integration
src/routeTree.gen.ts	Auto-generated route tree from TanStack Router
src-tauri/Cargo.toml	Rust dependencies for Tauri v2 application
src-tauri/src/lib.rs	Rust library with "greet" command example
src-tauri/src/main.rs	Rust main entry point
src-tauri/tauri.conf.json	Tauri v2 configuration with bundle identifier
eslint.config.js	ESLint flat config with TypeScript and React support
.prettierrc	Prettier configuration with Tailwind plugin
.github/workflows/ci.yml	CI workflow for lint, typecheck, and build
index.html	HTML entry point for the application

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-27T20:03:25Z

index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + React + Typescript</title>


The HTML title "Tauri + React + Typescript" doesn't match the application name "LTK Forge" used throughout the rest of the codebase. This should be updated to "LTK Forge" for consistency with the product name defined in tauri.conf.json.

Suggested change

<title>Tauri + React + Typescript</title>

<title>LTK Forge</title>

Copilot · 2025-12-27T20:03:25Z

vite.config.ts

+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;


The @ts-expect-error directive suppresses the error for process.env.TAURI_DEV_HOST, but this is a valid Node.js global in the Vite config context. Consider adding proper type definitions instead of suppressing the error, or use import.meta.env.TAURI_DEV_HOST if available in Tauri v2, as this would be more idiomatic for Vite projects.

Copilot · 2025-12-27T20:03:25Z

package.json

+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-opener": "^2",
+    "@tanstack/react-router": "^1.98.0",
+    "@base-ui/react": "^1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",


The package.json lists React 19.1.0 as a dependency. React 19 is a relatively new major release that may have breaking changes and limited ecosystem support. Consider verifying that all dependencies (particularly @base-ui/react at rc.0) are fully compatible with React 19, or consider using React 18 LTS for better stability and ecosystem support.

Suggested change

"react": "^19.1.0",

"react-dom": "^19.1.0",

"@tauri-apps/api": "^2",

"@tauri-apps/plugin-opener": "^2",

"@tanstack/react-router": "^1.98.0",

"@base-ui/react": "^1.0.0-rc.0"

},

"devDependencies": {

"@types/react": "^19.1.8",

"@types/react-dom": "^19.1.6",

"react": "^18.2.0",

"react-dom": "^18.2.0",

"@tauri-apps/api": "^2",

"@tauri-apps/plugin-opener": "^2",

"@tanstack/react-router": "^1.98.0",

"@base-ui/react": "^1.0.0-rc.0"

},

"devDependencies": {

"@types/react": "^18.2.0",

"@types/react-dom": "^18.2.0",

Copilot · 2025-12-27T20:03:26Z

package.json

+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-opener": "^2",
+    "@tanstack/react-router": "^1.98.0",
+    "@base-ui/react": "^1.0.0-rc.0"


The @base-ui/react package is at version 1.0.0-rc.0 (release candidate). Using pre-release versions in production can introduce instability and breaking changes. Consider either using a stable version or documenting that this is an experimental dependency that may require updates.

Suggested change

"@base-ui/react": "^1.0.0-rc.0"

"@base-ui/react": "^1.0.0"

Copilot · 2025-12-27T20:03:26Z

src-tauri/Cargo.toml

+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "ltk_forge_lib"


The library name in Cargo.toml uses an incorrect suffix. The comment states "The _lib suffix may seem redundant but it is necessary", but the actual name defined is "ltk_forge_lib" which doesn't match the expected binary name "ltk-forge" (note the underscore vs hyphen mismatch). According to the comment referencing the Windows issue, the lib name should be "ltk_forge_temp_lib" or similar to truly avoid conflicts, but it currently just mirrors the package name with underscores.

Suggested change

name = "ltk_forge_lib"

name = "ltk_forge_temp_lib"

Copilot · 2025-12-27T20:03:26Z

src-tauri/src/main.rs

+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    ltk_forge_temp_lib::run()


The main.rs file references "ltk_forge_temp_lib::run()" but the library is named "ltk_forge_lib" in Cargo.toml (line 14). This mismatch will cause a compilation error. The library name should be consistent between the Cargo.toml definition and the Rust code reference.

Copilot AI self-assigned this Dec 24, 2025

Initial plan

c1dfc07

Copilot AI assigned Crauzer Dec 24, 2025

Copilot started work on behalf of Crauzer December 24, 2025 23:20 View session

Copilot AI and others added 2 commits December 24, 2025 23:32

Add Tauri v2 + React scaffold with TanStack Router, Tailwind CSS, and…

e64c706

… tooling Co-authored-by: Crauzer <18646077+Crauzer@users.noreply.github.com>

Update Cargo.toml and .gitignore

f924d01

Co-authored-by: Crauzer <18646077+Crauzer@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Create complete scaffold for Tauri v2 and React desktop app~~ Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 Dec 24, 2025

Copilot finished work on behalf of Crauzer December 24, 2025 23:40

Copilot AI requested a review from Crauzer December 24, 2025 23:40

Crauzer requested a review from Copilot December 27, 2025 20:00

Copilot started reviewing on behalf of Crauzer December 27, 2025 20:00 View session

Copilot AI reviewed Dec 27, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 #2

Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 #2

Uh oh!

Copilot AI commented Dec 24, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Copilot AI Dec 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<title>Tauri + React + Typescript</title>
	<title>LTK Forge</title>

		// @ts-expect-error process is a nodejs global
		const host = process.env.TAURI_DEV_HOST;

Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 #2

Are you sure you want to change the base?

Initialize Tauri v2 + React scaffold with file-based routing and Tailwind v4 #2

Uh oh!

Conversation

Copilot AI commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stack

Structure

Example Route

Screenshots

Scripts

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 24, 2025 •

edited

Loading