Tauri + Preact + Bulma CSS + TypeScript + Sqlx + Specta + Vite Starter

Template Made By: Oceanus Digital

A starter template for Tauri + Preact App that comes preconfigured with Vite, TypeScript, Bulma CSS, Sqlx and HMR.

Recommended IDE Setup

• VS Code + Tauri + just + rust-analyzer + Error Lens + Sqlite Viewer + Even Better TOML + Pretty TypeScript Errors

Features

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

• ⚡️ Preact & Vite - Fast 3kB alternative to React with the same modern API

• 👍 Sqlx - The Rust SQL Toolkit with compile-time checked queries without a DSL.

• 🎨 Bulma CSS - A CSS framework that provides ready-to-use frontend components.

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

• 😤 Specta - Easily export your Rust types to other languages (TypeScript)

Getting started

GitHub Template

Create a repo from this template on GitHub

Note

For Tauri use 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
• Enjoy 😉

Usage

Development

npm run dev # or pnpm dev or yarn dev

Runs the app in the development mode.

This template uses the just command runner. Please ensure that the paths to your local ~/.config directory are edited within the justfile and within the db.rs Rust file.

For database migrations, this repositiory works best with the DbMate cli database migrations tool, and is configured via the justfile commands to utilize this. However, an init migrations file has already been created for you - on first startup a folder containing the Sqlite database within your ~/.config directory is created.

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 added code will need rebuilding.

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

Build

npm run build # or pnpm build or yarn build

Builds Preact 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 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 Preact 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 name.

Customize the tauri.conf.json

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