integrating-tauri-js-frontends

Tauri v2 JavaScript Frontend Integration

This skill covers integrating JavaScript frontend frameworks with Tauri v2 for desktop application development.

Core Architecture

Tauri functions as a static web host, serving HTML, CSS, JavaScript, and WASM files through a native webview. The framework is frontend-agnostic but requires specific configurations for optimal integration.

Supported Application Types

• Static Site Generation (SSG)
• Single-Page Applications (SPA)
• Multi-Page Applications (MPA)

Not Supported

Server-side rendering (SSR) in its native form. All frameworks must be configured for static output.

General Requirements

Key Principles

1. Static Output Required: Tauri cannot run a Node.js server - all content must be pre-built static files
2. Client-Server Architecture: Implement proper client-server relationships between app and APIs (no hybrid SSR solutions)
3. Mobile Development: Requires a development server hosting the frontend on your internal IP

Common tauri.conf.json Structure

{
  "build": {
    "beforeDevCommand": "<package-manager> dev",
    "beforeBuildCommand": "<package-manager> build",
    "devUrl": "http://localhost:<port>"

Replace <package-manager> with npm run, yarn, pnpm, or deno task.

Framework Configurations

Vite (React, Vue, Svelte, Solid)

Vite is the recommended choice for SPA frameworks due to its fast development experience and simple configuration.

package.json

vite.config.ts

tauri.conf.json

Next.js

Next.js requires static export mode since Tauri cannot run Node.js servers.

Critical Requirements

• Must use output: 'export' in next.config
• Images must be unoptimized for static export
• Asset prefix required for development server

next.config.mjs

package.json

tauri.conf.json

SSG Considerations for Next.js

• The out directory contains static exports
• Dynamic routes require generateStaticParams()
• API routes are not supported - use Tauri commands instead
• next/image optimization is disabled; use standard <img> or configure unoptimized

Nuxt

Nuxt must run in SSG mode with ssr: false for Tauri compatibility.

nuxt.config.ts

package.json

tauri.conf.json

SSG Considerations for Nuxt

• Use nuxt generate for production builds (creates static files)
• Server routes (/server/api) are not available - use Tauri commands
• Nitro server functionality is disabled in SSG mode

SvelteKit

SvelteKit requires the static adapter and SSR must be disabled.

Installation

svelte.config.js

src/routes/+layout.ts

vite.config.ts

tauri.conf.json

SSG Considerations for SvelteKit

• SPA mode (without prerendering) is recommended for full Tauri API access in load functions
• With prerendering, load functions execute at build time without Tauri API access
• The fallback: 'index.html' enables SPA routing
• Output directory is build/ by default

Qwik

Qwik requires the static adapter for Tauri compatibility.

Setup

package.json

tauri.conf.json

SSG Considerations for Qwik

• The static adapter is mandatory
• Qwik City server functions are not available
• Use Tauri commands for backend functionality

Quick Reference Table

Common Issues and Solutions

Issue: Assets Not Loading in Development

Cause: Asset prefix not configured for development server.

Solution: Configure asset prefix to point to dev server (see Next.js config example).

Issue: Tauri APIs Unavailable

Cause: Code executing during SSG build time instead of runtime.

Solution:

• Disable prerendering for pages using Tauri APIs
• Use dynamic imports with ssr: false
• Check for window.__TAURI__ before API calls

Issue: Hot Reload Not Working

Cause: File watcher including src-tauri directory.

Solution: Add **/src-tauri/** to watch ignore list in Vite config.

Issue: Mobile Development Fails

Cause: Dev server not accessible on network.

Solution: Set host to 0.0.0.0 or use TAURI_DEV_HOST environment variable.

Issue: Build Fails with SSR Errors

Cause: Framework attempting server-side rendering.

Solution: Ensure SSR is disabled:

• Next.js: output: 'export'
• Nuxt: ssr: false
• SvelteKit: export const ssr = false in layout
• Qwik: Use static adapter

Environment Variables

Tauri-Provided Variables

Recommended envPrefix

Build Targets

Configure build targets based on platform webview capabilities:

Mobile Development

For iOS and Android development, the dev server must be accessible on the network:

Run with the appropriate mobile command: