—Categories: Rust

Introduction to Tauri

In the post on Using Stockfish with En Croissant, there was an error (in the En Croissant UI) that mentioned Tauri. I wanted to learn more about what this platform is. A search for Tauri led me to the What is Tauri? | Tauri site. Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. The Learn | Tauri page has a link to the free PDF of the HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri book. I went through this book to get a high level idea of what Tauri is and how to create a simple Tauri app.

Installing Tauri Prerequisites

I started by downloading Node.js. The Node.js — Run JavaScript Everywhere page has a link to the JSConf | LF Events page. I have never attended this conference, so it piqued my interest (I made a note to learn more about it later). Node.js informed me that it would install its prerequisites.

====================================================
Tools for Node.js Native Modules Installation Script
====================================================

This script will install Python and the Visual Studio Build Tools, necessary
to compile Node.js native modules. Note that Chocolatey and required Windows
updates will also be installed.

...

Press any key to continue . . .

The Chocolatey script failed to install since I already have a version of Chocolatey installed. Python was upgraded from 3.11 to 3.13.

WARNING: 'choco' was found at 'C:\ProgramData\chocolatey\bin\choco.exe'.
WARNING: An existing Chocolatey installation was detected. Installation will not continue. This script will not
overwrite existing installations.
If there is no Chocolatey installation at 'C:\ProgramData\chocolatey', delete the folder and attempt the installation
again.

Please use choco upgrade chocolatey to handle upgrades of Chocolatey itself.
If the existing installation is not functional or a prior installation did not complete, follow these steps:
 - Backup the files at the path listed above so you can restore your previous installation if needed.
 - Remove the existing installation manually.
 - Rerun this installation script.
 - Reinstall any packages previously installed, if needed (refer to the lib folder in the backup).

Once installation is completed, the backup folder is no longer needed and can be deleted.
Chocolatey v1.2.1
Upgrading the following packages:
python;visualstudio2019-workload-vctools
By upgrading, you accept licenses for the packages.

You have python v3.11.0 installed. Version 3.13.3 is available based on your source(s).
Progress: Downloading python3 3.13.3... 100%
Progress: Downloading python313 3.13.3... 100%
Progress: Downloading python 3.13.3... 100%

python313 v3.13.3 [Approved]
python313 package files upgrade completed. Performing other installation steps.
Installing 64-bit python313...
python313 has been installed.
Added C:\ProgramData\chocolatey\bin\python3.13.exe shim pointed to 'c:\python313\python.exe'.
Python installed to: 'C:\Python313'
WARNING: Environment variable PYTHONHOME points to different version: C:\Python311\
Restricting write permissions to Administrators
  python313 can be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The upgrade of python313 was successful.
  Software installed as 'exe', install location is likely default.

python3 v3.13.3 [Approved]
python3 package files upgrade completed. Performing other installation steps.
 The upgrade of python3 was successful.
  Software installed to 'C:\ProgramData\chocolatey\lib\python3'

python v3.13.3 [Approved]
python package files upgrade completed. Performing other installation steps.
 The upgrade of python was successful.
  Software installed to 'C:\ProgramData\chocolatey\lib\python'
visualstudio2019-workload-vctools v1.0.1 is the latest version available based on your source(s).

Chocolatey upgraded 3/4 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
Type ENTER to exit:

Next, I downloaded and ran the rust installer from Install Rust – Rust Programming Language. I used the standard installation option below.

Welcome to Rust!

This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.

Rustup metadata and toolchains will be installed into the Rustup
home directory, located at:

  C:\Users\saint\.rustup

This can be modified with the RUSTUP_HOME environment variable.

The Cargo home directory is located at:

  C:\Users\saint\.cargo

This can be modified with the CARGO_HOME environment variable.

The cargo, rustc, rustup and other commands will be added to
Cargo's bin directory, located at:

  C:\Users\saint\.cargo\bin

This path will then be added to your PATH environment variable by
modifying the PATH registry key at HKEY_CURRENT_USER\Environment.

You can uninstall at any time with rustup self uninstall and
these changes will be reverted.

Current installation options:


   default host triple: x86_64-pc-windows-msvc
     default toolchain: stable (default)
               profile: default
  modify PATH variable: yes

1) Proceed with standard installation (default - just press enter)
2) Customize installation
3) Cancel installation
>
info: profile set to 'default'
info: default host triple is x86_64-pc-windows-msvc
info: syncing channel updates for 'stable-x86_64-pc-windows-msvc'
info: latest update on 2025-05-15, rust version 1.87.0 (17067e9ac 2025-05-09)
info: downloading component 'cargo'
info: downloading component 'clippy'
info: downloading component 'rust-docs'
info: downloading component 'rust-std'
info: downloading component 'rustc'
 73.8 MiB /  73.8 MiB (100 %)  24.2 MiB/s in  3s
info: downloading component 'rustfmt'
info: installing component 'cargo'
info: installing component 'clippy'
info: installing component 'rust-docs'
 20.2 MiB /  20.2 MiB (100 %)   1.8 MiB/s in  8s
info: installing component 'rust-std'
 22.4 MiB /  22.4 MiB (100 %)  20.4 MiB/s in  1s
info: installing component 'rustc'
 73.8 MiB /  73.8 MiB (100 %)  20.8 MiB/s in  3s
info: installing component 'rustfmt'
info: default toolchain set to 'stable-x86_64-pc-windows-msvc'

  stable-x86_64-pc-windows-msvc installed - rustc 1.87.0 (17067e9ac 2025-05-09)


Rust is installed now. Great!

To get started you may need to restart your current shell.
This would reload its PATH environment variable to include
Cargo's bin directory (%USERPROFILE%\.cargo\bin).

Press the Enter key to continue.

Creating a Simple Tauri App

The tutorial says you can use yarn, npm, or bun but npm was the only tool available on my command line after the above installation steps. I followed the instructions to create a Tauri app:

npm create tauri-app@latest

The first prompt was for a project name. I pressed ENTER to use the default name.

$ npm create tauri-app@latest

> npx
> create-tauri-app

? Project name (tauri-app) ›

Next, we need an identifier. ENTER selects the default value:

> npx
> create-tauri-app

✔ Project name · tauri-app
? Identifier (com.tauri-app.app) ›

You then choose the language for the front end.

> npx
> create-tauri-app

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
  Rust
  .NET

For TypeScript/JavaScript, you need to specify your package manager. I used npm.

> npx
> create-tauri-app

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
? Choose your package manager ›
❯ npm
  pnpm
  yarn
  deno
  bun

I selected React as my UI template. I’m so out of it on front end development that I was surprised to see that Angular is still in use (given that I don’t hear much about it these days).

> npx
> create-tauri-app

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
? Choose your UI template ›
  Vanilla
  Vue
  Svelte
❯ React  (https://react.dev/)
  Solid
  Angular
  Preact

Finally, I selected TypeScript as my UI flavor:

> npx
> create-tauri-app

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
? Choose your UI flavor ›
❯ TypeScript
  JavaScript

The template was created and instructions on how to run the app were displayed:

> npx
> create-tauri-app

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-app
  npm install
  npm run tauri android init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

I tried running npm run tauri dev without doing anything else, out of curiosity. The command failed (unsurprisingly). npm install is required.

$ cd tauri-app/

$ npm run tauri dev

> tauri-app@0.1.0 tauri
> tauri dev

'tauri' is not recognized as an internal or external command,
operable program or batch file.

$ npm install

added 74 packages, and audited 75 packages in 6s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Running the app takes about 2 minutes (

$ npm run tauri dev

> tauri-app@0.1.0 tauri
> tauri dev

     Running BeforeDevCommand (`npm run dev`)

> tauri-app@0.1.0 dev
> vite


  VITE v6.3.5  ready in 217 ms

  ➜  Local:   http://localhost:1420/
     Running DevCommand (`cargo  run --no-default-features --color always --`)
        Info Watching C:\repos\learning\tauri\tauri-app\src-tauri for changes...
    Updating crates.io index
     Locking 474 packages to latest compatible versions
      Adding proc-macro-crate v2.0.0 (available: v2.0.2)
      Adding serialize-to-javascript v0.1.1 (available: v0.1.2)
      Adding serialize-to-javascript-impl v0.1.1 (available: v0.1.2)
   Compiling proc-macro2 v1.0.95
   Compiling unicode-ident v1.0.18
   Compiling cfg-if v1.0.0
   Compiling windows_x86_64_msvc v0.52.6
   Compiling zerocopy v0.8.25

...

   Compiling keyboard-types v0.7.0
   Compiling serialize-to-javascript v0.1.1
   Compiling embed-resource v3.0.3
   Compiling cargo_toml v0.22.1
   Compiling tauri-utils v2.4.0
   Compiling tauri-winres v0.3.1
   Compiling muda v0.16.1
   Compiling tauri-build v2.2.0
   Compiling tauri-plugin v2.2.0
   Compiling tauri-codegen v2.2.0
   Compiling tauri v2.5.1
   Compiling tauri-plugin-opener v2.2.7
   Compiling tauri-macros v2.2.0
   Compiling tauri-app v0.1.0 (C:\repos\learning\tauri\tauri-app\src-tauri)
   Compiling tao v0.33.0
   Compiling webview2-com v0.37.0
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 1m 35s
     Running `target\debug\tauri-app.exe`

The second execution of that command was much faster since most of the compilation was already complete.

$ npm run tauri dev

> tauri-app@0.1.0 tauri
> tauri dev

     Running BeforeDevCommand (`npm run dev`)

> tauri-app@0.1.0 dev
> vite

     Running DevCommand (`cargo  run --no-default-features --color always --`)

  VITE v6.3.5  ready in 214 ms

  ➜  Local:   http://localhost:1420/
        Info Watching C:\repos\learning\tauri\temp\tauri-app\src-tauri for changes...
   Compiling tauri-app v0.1.0 (C:\repos\learning\tauri\tauri-app\src-tauri)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 16.97s
     Running `target\debug\tauri-app.exe`
Welcome to Tauri + React Desktop Window

Installing pnp

I discovered Tauri in the En Croissant chess program. Per the en-croissant readme, it uses pnpm as the package manager. It is easy to enable as described in the pnpm install instructions.

Since v16.13, Node.js is shipping Corepack for managing package managers. This is an experimental feature, so you need to enable it by running: corepack enable pnpm

Installation | pnpm
$ corepack enable pnpm

$ which pnpm
/c/Program Files/nodejs/pnpm

Building en-croissant

This was easy (compared to some of the other C++ codebases I have been looking at recently). The commands just ran successfully. It’s somewhat unsettling seeing how many packages are downloaded in these npm projects though.

$ pnpm install
! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.11.1.tgz
? Do you want to continue? [Y/n] y

! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912.
! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager

Lockfile is up to date, resolution step is skipped
Packages: +528
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading @tabler/icons@2.47.0: 5.57 MB/5.57 MB, done
Downloading @tauri-apps/cli-win32-x64-msvc@2.0.1: 7.66 MB/7.66 MB, done
Downloading @biomejs/cli-win32-x64@1.9.0: 10.83 MB/10.83 MB, done
Downloading typescript@5.4.2: 5.82 MB/5.82 MB, done
Downloading @swc/core-win32-x64-msvc@1.10.0: 16.81 MB/16.81 MB, done
Progress: resolved 528, reused 0, downloaded 528, added 528, done

dependencies:
+ @badrap/result 0.2.13
+ @hello-pangea/dnd 16.5.0
+ @mantine/charts 7.6.2
+ @mantine/core 7.6.2
+ @mantine/dates 7.6.2
+ @mantine/form 7.6.2
+ @mantine/hooks 7.6.2
+ @mantine/notifications 7.6.2
+ @mantine/tiptap 7.6.2
+ @mantine/vanilla-extract 7.6.2
+ @tabler/icons-react 2.47.0
+ @tanstack/react-router 1.20.0
+ @tanstack/react-virtual 3.1.3
+ @tauri-apps/api 2.0.0
+ @tauri-apps/plugin-cli 2.0.0
+ @tauri-apps/plugin-dialog 2.0.0
+ @tauri-apps/plugin-fs 2.0.0
+ @tauri-apps/plugin-http 2.0.0
+ @tauri-apps/plugin-log 2.0.0
+ @tauri-apps/plugin-os 2.0.0
+ @tauri-apps/plugin-process 2.0.0
+ @tauri-apps/plugin-shell 2.0.0
+ @tauri-apps/plugin-updater 2.0.0
+ @tauri-apps/plugin-window-state 2.0.0
+ @tiptap/extension-link 2.2.4
+ @tiptap/extension-placeholder 2.2.4
+ @tiptap/extension-underline 2.2.4
+ @tiptap/pm 2.2.4
+ @tiptap/react 2.2.4
+ @tiptap/starter-kit 2.2.4
+ @types/dom-to-image 2.6.7
+ @vitejs/plugin-react-swc 3.7.2
+ chessground 9.0.4
+ chessops 0.14.0
+ clsx 2.1.0
+ dayjs 1.11.10
+ dom-to-image 2.6.0
+ fast-deep-equal 3.1.3
+ fuse.js 7.0.0
+ i18next 23.11.5
+ immer 10.0.4
+ jotai 2.7.0
+ mantine-contextmenu 7.6.2
+ mantine-datatable 7.6.1
+ mantine-flagpack 4.0.0
+ react 18.3.1
+ react-contenteditable 3.3.7
+ react-dom 18.3.1
+ react-draggable 4.4.6
+ react-helmet 6.1.0
+ react-hotkeys-hook 4.5.0
+ react-i18next 14.1.2
+ react-markdown 9.0.1
+ react-mosaic-component 6.1.0
+ recharts 2.14.1
+ rehype-raw 7.0.0
+ remark-gfm 4.0.0
+ swr 2.2.5
+ tiptap-markdown 0.8.9
+ ts-fsrs 3.5.1
+ ts-pattern 5.0.8
+ vite 5.4.8
+ zod 3.22.4
+ zustand 4.5.2

devDependencies:
+ @biomejs/biome 1.9.0
+ @tanstack/router-vite-plugin 1.20.0
+ @tauri-apps/cli 2.0.1
+ @types/lodash 4.17.10
+ @types/react 18.3.14
+ @types/react-dom 18.3.2
+ @types/react-helmet 6.1.11
+ @types/react-virtualized-auto-sizer 1.0.4
+ @types/react-window 1.8.8
+ @types/react-window-infinite-loader 1.0.9
+ @vanilla-extract/css 1.14.1
+ @vanilla-extract/vite-plugin 4.0.6
+ jsdom 24.0.0
+ typescript 5.4.2
+ vitest 2.1.1

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: @biomejs/biome, @swc/core, esbuild.                               │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Done in 26.8s using pnpm v10.11.1

I like the single executable output of this entire process. Here it is in action after I loaded this FEN: 1r5k/2q2p1p/p2p3B/5PQ1/n1p5/2b4P/PrB3P1/2R1R1K1 w - - 0 0. Something odd is happening here (with the claim that “Black Wins”).

Playing a Game in En Croissant

Although most of the front-end concepts in the HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri book were not new to me, the section on Rust was helpful. Seeing it in action in the En Croissant codebase is a good way to get into this new-to-me programming language, which I’ve been meaning to learn for years now.

Article info

Categories

Leave a Reply

Your email address will not be published. Required fields are marked *