Skip to content
Go back

Shkrimi Tauri – Part 1: Setup development environment

Published:  at  08:17 AM

Ever dreamed of building your own desktop app without diving deep into complex frameworks? Let’s embark on a journey to create ‘Shkrimi’, a writer’s app inspired by our upcoming trip to Albania!

 
Levelbeginner
Parts24
Languagesrust, typescript
Toolsnode, (p)npm, nvm, rust
EditorVSCode / Neovim
Time Estimate☕ 1 coffee read, 🍝 1 pasta cook setup (6–8 min read, ~30 min setup)

In this series we will be building a simple writers app using Tauri, not as complicated as Scrivener but with enough features to call it a serious desktop application. let’s call the app Shkrimi - Albanian word for writing.

As my wife luba and I plan our adventure to Albania this August, I thought, why not channel that excitement into building something meaningful? Thus, ‘Shkrimi’ was born.

If you don’t know what Tauri is, it is a framework to build cross-platform desktop apps using Rust for the backend and Javascript/Typescript for the frontend. This little tutorial is for beginners so if this is your first adventure with Tauri just follow along and have fun.

We will be integrating a wysiwyg editor and if we’re lucky even write some nifty Rust code. In the last part I’ll give you a link to the github repository.

Although this is a beginner tutorial, I’m assuming you have a little knowledge of Javascript, Typescript and Svelte. If you don’t, please learn a little on those topics and come back here. You don’t have to be a guru, some basic programming experience is all you need.

Table of contents

Open Table of contents

Setup development environment

I’m assuming that you’ve already have node and (p)npm installed.

Prerequisites

I’m running (arch) linux but if you are using MacOS or Windows please refer to the documentation. Where needed I’ll provide links to the docs that will help you out getting things up and running.

We need some system dependencies, rust of course, nvm, git and a text editor.

See 🔗 Install Tauri Prerequisites

Install system deps, rust, git, nvm and a text editor:Lets


```sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
sudo pacman -S git
sudo pacman -S --needed \
  webkit2gtk-4.1 \
  base-devel \
  curl \
  wget \
  file \
  openssl \
  appmenu-gtk-module \
  libappindicator-gtk3 \
  librsvg
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

Install neovim or VSCode or both. If you want to use VSCode install the following extensions:

If you are a vim guy or girl setup lsp’s for typescript, svelte and rust. Take a moment to read my other post about neovim: My last Neovim configuration

sudo pacman -S code
sudo pacman -S neovim

Once this is done we are pretty much ready to go and create our Tauri project.

Did you know?

Tauri apps are known for their small bundle sizes compared to Electron apps, making them faster and more efficient!

Scaffolding Tauri app

There are many ways to scaffold a Tauri app but let say you want to use pnpm and Svelte for the frontend then we would issue the following command:

Take a look at 🔗 Tauri 2.0 if you are using powershell, bash, deno, bun, npm or yarn…

pnpm create tauri-app
 Project name · shkrimi
 Identifier · com.shkrimi.app
 Choose which language to use for your frontend · TypeScript / JavaScript
 Choose your package manager · pnpm
 Choose your UI template · Svelte - (https://svelte.dev/)
 Choose your UI flavor · TypeScript
Did you know?
Template created! To get started run:yass-mo
https://amzn.to/4kiPb97
  pnpm tauri dev’
### Setting a node version

Next, create a `.nvmrc` and set the node version. You could use a version number but I like to use the release/codename. `Jod` is the lts version (v22). If you would like to use a different version have a look at 🔗 [Node.js Releases](https://nodejs.org/en/about/previous-releases).

```sh
echo node/jod >> .nvmrc

We then can set the node version that will be used for this project like:

nvm use

Initialize git repository

We want to track our changes so let’s quickly throw our project into git.

git init && git add . && git commit -m "Initial commit"

Now, let’s fire up our app and see if things work!

pnpm tauri dev

If you see this popping up: slap your ass and declare yourself a genius!

image

Part 2

In the next part, we’ll explore the story behind Tauri, why it was created, what problems it set out to solve, and how it compares to frameworks like Electron. We’ll also highlight some standout apps built with Tauri that you can try yourself.

📚 Resources

Here’s a collection of helpful tools, docs, and guides to support your journey building apps with Tauri, Rust, and Svelte.

🧰 General Dev Environment

🦀 Rust

🧪 Tauri

🎨 Frontend (Svelte + Tailwind)

🧠 Optional Learning Boosters

🛠 Developer Tools

💡 Tip: Bookmark this list! These links will help you debug faster, build better, and learn smarter.


I learned a lot reading this book and it is a nice to have reference

Click here to get your copy of the book Cross-Platform Desktop Apps

image


Suggest Changes

Previous Post
Our first trip together to Paris
Next Post
Exposed Beneath the Paris Moon