Qwik

import { Steps, TabItem, Tabs } from '@astrojs/starlight/components'; import CommandTabs from '@components/CommandTabs.astro';

This guide will walk you through creating your Tauri app using the Qwik web framework. Learn more about Qwik at https://qwik.dev.

Checklist

• Use SSG. Tauri doesn't support server-based solutions.
• Use dist/ as frontendDist in tauri.conf.json.

Example Configuration

<Steps>

1. Create a new Qwik app

   <CommandTabs npm={npm create qwik@latest cd <PROJECT>} yarn={yarn create qwik@latest cd <PROJECT>} pnpm={pnpm create qwik@latest cd <PROJECT>} deno={deno run -A npm:create-qwik@latest cd <PROJECT>} />

2. Install the static adapter

   <CommandTabs npm="npm run qwik add static" yarn="yarn qwik add static" pnpm="pnpm qwik add static" deno="deno task qwik add static" />

3. Add the Tauri CLI to your project

   <CommandTabs npm="npm install -D @tauri-apps/cli@latest" yarn="yarn add -D @tauri-apps/cli@latest" pnpm="pnpm add -D @tauri-apps/cli@latest" deno="deno add -D npm:@tauri-apps/cli@latest" />

4. Initiate a new Tauri project

   <CommandTabs npm="npm run tauri init" yarn="yarn tauri init" pnpm="pnpm tauri init" deno="deno task tauri init" />

5. Tauri configuration

   <Tabs> <TabItem label="npm">
   jsonCopy

   // tauri.conf.json
   {
     "build": {
       "devUrl": "http://localhost:5173"
       "frontendDist": "../dist",
       "beforeDevCommand": "npm run dev",
       "beforeBuildCommand": "npm run build"
     }
   }
   

   </TabItem> <TabItem label="yarn">
   jsonCopy

   // tauri.conf.json
   {
     "build": {
       "devUrl": "http://localhost:5173"
       "frontendDist": "../dist",
       "beforeDevCommand": "yarn dev",
       "beforeBuildCommand": "yarn build"
     }
   }
   

   </TabItem> <TabItem label="pnpm">
   jsonCopy

   // tauri.conf.json
   {
     "build": {
       "devUrl": "http://localhost:5173"
       "frontendDist": "../dist",
       "beforeDevCommand": "pnpm dev",
       "beforeBuildCommand": "pnpm build"
     }
   }
   

   </TabItem> <TabItem label="deno">
   jsonCopy

   // tauri.conf.json
   {
     "build": {
       "devUrl": "http://localhost:5173"
       "frontendDist": "../dist",
       "beforeDevCommand": "deno task dev",
       "beforeBuildCommand": "deno task build"
     }
   }
   

   </TabItem> </Tabs>

6. Start your tauri app

   <CommandTabs npm="npm run tauri dev" yarn="yarn tauri dev" pnpm="pnpm tauri dev" deno="deno task tauri dev" />

</Steps>