Tauri + Solid + Tailwind CSS + TypeScript + Vite Starter

A starter template for Tauri + Solid App that comes preconfigured with Vite, TypeScript, Tailwind CSS, ESLint, Prettier and HMR (Hot Module Replacement).

Features

• 🤩 Tauri - Build smaller, faster, and more secure desktop and mobile applications with a web frontend.

• ⚡️ Solid & Vite - Simple and performant reactivity for building user interfaces.

• 🎨 Tailwind CSS - A utility-first CSS framework for rapid UI development.

• 💪 TypeScript - it's JavaScript with syntax for types.

• 👌 ESLint + Prettier - ESLint find problems in your code and Prettier format your code for an easy life.

Getting started

GitHub Template

Create a repo from this template on GitHub

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit AR10Dev/tauri-solid-ts-tailwind-vite my-app # or bunx degit AR10Dev/tauri-solid-ts-tailwind-vite my-app
cd my-app
npm install # or pnpm install or yarn install or bun install

Note

For use Tauri you need to Setup your environment following this guide

Checklist

When you use this template, follow the checklist to update your info properly

• Rename name, version and author field in package.json
• Rename name, version, description, authors and repository field in src-tauri/Cargo.toml
• Change the author name in LICENSE
• Clean up the READMEs
• Optional: Remove the .github folder which contains the github action for cross compilation
• Optional: Remove the .devcontainer folder which contains the devcontainer for VSCode
• Enjoy 😉

Usage

Development

npm run dev:tauri # or pnpm dev:tauri or yarn dev:tauri or bun dev:tauri

Runs the app in the development mode.

The first time you run this command, it will take several minutes for the Rust package manager to download and build all the required packages. Since they are cached, subsequent builds will be much faster, as only your code will need rebuilding.

If you make edits to the page in the webview, it should update automatically, just like a browser would reload. When you make edits to the Rust files, they will be rebuilt automatically, and your app will restart.

Build

npm run build:tauri # or pnpm build:tauri or yarn build:tauri or bun build:tauri

Builds Solid to the dist folder and after will embed it into a single binary with your Rust code.
The binary itself will be located in src-tauri/target/release/[app name], and installers will be located in src-tauri/target/release/bundle/

Like the dev:tauri command, the first time you run this, it will take some time to collect the Rust crates and build everything, but on subsequent runs, it will only need to rebuild your code, which is much quicker.

It correctly bundles Solid in production mode and optimizes the binary for the best performance.

🎉 Congratulations, your app is ready to be release!

Custom App Icon

To generate your custom app icon you can follow this guide.
Your new app icons will be located in src-tauri/icons/ and remeber to update the icon field in src-tauri/tauri.conf.json with all your new icon path names.

Customize the tauri.conf.json

To modify and personalize your app, you need to edit src-tauri/tauri.conf.json by following this guide