Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js

Version 14 or laterDownload Node.js

pnpm

Version 6 or laterInstall pnpm

Rust

Latest stable versionInstall Rust

Tauri Prerequisites

Platform-specific dependenciesSetup Guide

​
Tauri Prerequisites by Platform

Install the required system dependencies:
sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
  build-essential \
  curl \
  wget \
  file \
  libssl-dev \
  libgtk-3-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev

​
Installation

1

Clone the repository

git clone https://github.com/meel-hd/lofi-engine
cd lofi-engine
2

Install dependencies

pnpm install
This will install all Node.js dependencies including:
  • Svelte and related tooling
  • TypeScript compiler
  • Vite build tool
  • Tauri CLI
  • Tone.js audio library
  • UI icon packages
3

Verify installation

Check that all tools are properly installed:
node --version   # Should be v14 or later
pnpm --version   # Should be v6 or later
rustc --version  # Should show stable version

​
Development Workflow

​
Running the Development Server

Start the app in development mode with hot reload: 
pnpm tauri:d
This command:
  1. Starts the Vite dev server on port 1420
  2. Launches the Tauri development window
  3. Enables hot module replacement (HMR)
  4. Shows detailed error messages
The first run will take longer as Rust dependencies are compiled. Subsequent runs are much faster.

​
Development Mode Features

Hot Reload

Changes to Svelte/TypeScript files reload instantly

Source Maps

Full debugging support with source maps

Dev Tools

Right-click → Inspect to open Chrome DevTools

Fast Refresh

Preserves component state during reload

​
Available Scripts

The project includes several npm scripts defined in package.json: 
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "tauri": "tauri",
    "tauri:d": "tauri dev",
    "tauri:b": "tauri build"
  }
}

​
Script Reference

Runs the Vite development server without Tauri.Useful for:
  • Rapid UI development
  • Testing in browser
  • Debugging with browser DevTools
pnpm dev
Visit http://localhost:1420 in your browser.
Builds the frontend assets without creating a Tauri app.
pnpm build
Output: dist/ directory with optimized HTML, CSS, JS
Previews the production build locally.
pnpm build
pnpm preview
Useful for testing the production build before creating the desktop app.
Runs Svelte type checking with TypeScript.
pnpm check
Use this to catch type errors before building.
Main development command - runs the full Tauri app with hot reload.
pnpm tauri:d
Builds the production desktop application.
pnpm tauri:b
Output: src-tauri/target/release/ directory

​
Building for Production

Create a production build of the desktop application: 
pnpm tauri:b
1

Frontend build

Vite compiles and optimizes the frontend:
  • TypeScript → JavaScript
  • Svelte components → optimized JS
  • Assets bundled and minified
  • Tree-shaking removes unused code
2

Rust compilation

Cargo compiles the Tauri backend:
  • Release mode optimizations
  • Platform-specific binary
  • Minimal runtime dependencies
3

Packaging

Creates platform-specific installers:
  • Linux: AppImage, .deb, .rpm
  • macOS: .dmg, .app bundle
  • Windows: .msi, .exe

​
Build Output

The compiled application is located at: 
src-tauri/target/release/
├── lofi-engine              # Binary (Linux/macOS)
├── lofi-engine.exe          # Binary (Windows)
└── bundle/
    ├── appimage/            # Linux AppImage
    ├── deb/                 # Debian package
    ├── dmg/                 # macOS disk image
    └── msi/                 # Windows installer
Production builds take significantly longer than development builds (5-15 minutes depending on your hardware).

​
Project Configuration

​
Vite Configuration

The vite.config.ts file contains build and dev server settings:
vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";

export default defineConfig(async () => ({
  base: "./",
  plugins: [
    svelte({
      preprocess: [
        sveltePreprocess({
          typescript: true,
        }),
      ],
    }),
  ],
  clearScreen: false,  // Don't obscure Rust errors
  server: {
    port: 1420,        // Fixed port for Tauri
    strictPort: true,  // Fail if port unavailable
  },
  envPrefix: ["VITE_", "TAURI_"],
  build: {
    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
    sourcemap: !!process.env.TAURI_DEBUG,
  },
}));
  • base: ”./”: Use relative paths for assets
  • port: 1420: Tauri’s default port
  • strictPort: true: Fail if port is in use
  • clearScreen: false: Keep Rust errors visible
  • Dynamic target: Chrome 105 (Windows) or Safari 13 (macOS/Linux)

​
TypeScript Configuration

The project uses TypeScript with Svelte-specific settings. See tsconfig.json for details.

​
Troubleshooting

Kill the process using the port:
# Find the process
lsof -i :1420

# Kill it
kill -9 <PID>
Or change the port in vite.config.ts.
Update Rust to the latest stable version:
rustup update stable
Clear the build cache:
cd src-tauri
cargo clean
cd ..
pnpm tauri:d
Clear the pnpm cache and reinstall:
pnpm store prune
rm -rf node_modules
pnpm install
Install the WebView2 Runtime:Download WebView2
Ensure Tone.js samples are loaded:
  • Check public/assets/engine/ directory
  • Verify sample paths in src/lib/engine/*/Samples.ts
  • Check browser console for 404 errors

​
IDE Setup

Install the following extensions:
  • Svelte for VS Code - Syntax highlighting and IntelliSense
  • Tauri - Tauri-specific features
  • rust-analyzer - Rust language support
  • ESLint - JavaScript/TypeScript linting

​
WebStorm

Enable the Svelte plugin in Settings → Plugins.

​
Next Steps

Contributing Guidelines

Learn how to contribute to the project

System Architecture

Understand the codebase structure

Build docs developers (and LLMs) love

Get started for freeTalk to us