SvelteKit

SvelteKit es un meta framework para Svelte. Aprende más sobre SvelteKit en https://kit.svelte.dev/. Esta guía es válida para SvelteKit 2.5.7 y Svelte 4.2.15.

Checklist

• Usa SSG y/o SPA a través de static-adapter. Tauri no soporta oficialmente soluciones basadas en el servidor.
• Usa build/ en lugar de frontendDist en tauri.conf.json.

Ejemplo de Configuración

1. Instala @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

   bun

   bun add -D @sveltejs/adapter-static

2. Actualiza 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 = {
     // Consulta https://kit.svelte.dev/docs/integrations#preprocessors
     // para más información sobre preprocesadores
     preprocess: vitePreprocess(),
   
     kit: {
       adapter: adapter(),
     },
   };
   
   export default config;

4. Desactiva el SSR

   Por último, necesitamos desactivar el SRR y habilitar el prerenderizado añadiendo un archivo raíz +layout.ts (o +layout.js si no estás usando TypeScript) con el siguiente contenido:

   src/routes/+layout.ts

   export const prerender = true;
   export const ssr = false;

   Ten en cuenta que static-adapter no requiere desactivar el SSR para toda la aplicación, pero permite usar APIs que dependen del objeto global window (como la API de Tauri) sin necesidad de realizar comprobaciones del lado del cliente.

   Además, si prefieres el modo de Aplicación de Página Única (SPA) en lugar de SSG, puedes cambiar las configuraciones del adaptador y el archivo +layout.ts según la documentación del adaptador.