SvelteKit

SvelteKit es un meta framework para Svelte. Obtén más información sobre SvelteKit en https://svelte.dev/. Esta guía es precisa a partir de SvelteKit 2.20.4 / Svelte 5.25.8.

Lista de verificación

• Usa SSG y SPA a través de static-adapter. Tauri no soporta soluciones basadas en servidor.
• Si usas SSG con prerenderizado, ten en cuenta que las funciones load no tendrán acceso a las API de Tauri durante el proceso de compilación de tu aplicación. Se recomienda utilizar el modo SPA (sin prerenderizado), ya que las funciones load solo se ejecutarán en la webview con acceso a las API de Tauri.
• Usa build/ como frontendDist en tauri.conf.json.

Configuración de ejemplo

1. Instalar @sveltejs/adapter-static

   npm

   npm install --save-dev @sveltejs/adapter-static

   yarn

   yarn add -D @sveltejs/adapter-static

   pnpm

   pnpm add -D @sveltejs/adapter-static

   deno

   deno add -D npm:@sveltejs/adapter-static

2. Actualizar la configuración de Tauri

   npm

   tauri.conf.json

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

   yarn

   tauri.conf.json

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

   pnpm

   tauri.conf.json

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

   deno

   tauri.conf.json

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

3. Actualiza la configuración de SvelteKit:

   svelte.config.js

   import adapter from '@sveltejs/adapter-static';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
     // Consult https://svelte.dev/docs/kit/integrations#preprocessors
     // for more information about preprocessors
     preprocess: vitePreprocess(),
   
     kit: {
       adapter: adapter({
         fallback: 'index.html',
       }),
     },
   };
   
   export default config;

4. Desactivar SSR

   Por último, necesitamos desactivar SSR agregando un archivo raíz +layout.ts (o +layout.js si no estás usando TypeScript) con este contenido:

   src/routes/+layout.ts

   export const ssr = false;

   Ten en cuenta que static-adapter no requiere que desactives SSR para toda la aplicación, pero hace posible usar API que dependen del objeto global window (como la API de Tauri) sin verificaciones del lado del cliente.

   Además, si prefieres la Generación de Sitios Estáticos (SSG) sobre el modo de Aplicación de Una Sola Página (SPA), puedes cambiar las configuraciones del adaptador y +layout.ts de acuerdo con la documentación del adaptador.