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.
Ensure that you have the Tauri prerequisites installed.
pnpm installpnpm tauri devA basic Tauri setup with Vite, React, Typescript.
A basic Tailwind CSS setup. Includes a components.json for Shadcn UI components.
A new Eslint 9 setup with flat config. This will help you to keep your code clean and consistent.
A basic Prettier setup to keep your code formatted.
Pre-commit hooks to run Eslint and Prettier on staged files.
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.tsxandsrc/app/routes/*with minimal business logic. - The pages from the routes should be using
src/featuresto 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 definessrc/configandsrc/hooksexamples.
Shadcn UI is awesome, but have a look at these UI components to make your app stand out: