Tauri: An Ultimate Project Template

This template should help get you started developing with Tauri, React, Typescript and Tailwind CSS (w/ shadcn/ui) in Vite.

The architecture is based on practices suggested by @alan2207 in his bulletproof-react.

In addition, this template configures ESLint, Prettier, Husky and Lint-staged for pre-commits.

Getting Started

Basics

Ensure that you have the Tauri prerequisites installed.

Create a new project

npx create-tauri-react@latest

What's included

Core

A basic Tauri setup with Vite, React, Typescript.

Tailwind CSS

A basic Tailwind CSS setup. Includes a components.json for Shadcn UI components.

Dev Tools

Eslint 9

A new Eslint 9 setup with flat config. This will help you to keep your code clean and consistent.

Prettier

A basic Prettier setup to keep your code formatted.

Husky + Lint-staged

Pre-commit hooks to run Eslint and Prettier on staged files.

How to use?

Once again, the architecture of the template is based on practices proposed by @alan2207 in his bulletproof-react.

src
|
+-- app               # application layer containing:
|   |                 # this folder might differ based on the meta framework used
|   +-- routes        # application routes / can also be pages
|   +-- app.tsx       # main application component
|   +-- provider.tsx  # application provider that wraps the entire application with different global providers - this might also differ based on meta framework used
|   +-- router.tsx    # application router configuration
+-- assets            # assets folder can contain all the static files such as images, fonts, etc.
|
+-- components        # shared components used across the entire application
|
+-- config            # global configurations, exported env variables etc.
|
+-- features          # feature based modules
|
+-- hooks             # shared hooks used across the entire application
|
+-- lib               # reusable libraries preconfigured for the application
|
+-- stores            # global state stores
|
+-- testing           # test utilities and mocks
|
+-- types             # shared types used across the application
|
+-- utils             # shared utility functions

src/features/awesome-feature
|
+-- api         # exported API request declarations and api hooks related to a specific feature
|
+-- assets      # assets folder can contain all the static files for a specific feature
|
+-- components  # components scoped to a specific feature
|
+-- hooks       # hooks scoped to a specific feature
|
+-- stores      # state stores for a specific feature
|
+-- types       # typescript types used within the feature
|
+-- utils       # utility functions for a specific feature

So, simply put:

• Define your app's routes in src/app/router.tsx and src/app/routes/* with minimal business logic.
• The pages from the routes should be using src/features to build up functionality on the page.
• The features should be using components from src/components, which are pure ui components (like Shadcn UI) or layouts.
• For an extended template, you can look up @MrLightful/powersync-tauri, which also defines src/config and src/hooks examples.