SvelteKit

SvelteKit（スヴェルトキット）は Svelte（スヴェルト）用のメタ・フレームワークです。SvelteKit の詳細は「公式サイト https://kit.svelte.dev/」をご覧ください。以下の説明内容は「SvelteKit 2.5.7 / Svelte 4.2.15」に準拠しています。

チェック項目

• static-adapter 経由で SSG および／または SPA を使用してください。Tauri はサーバー・ベースの方式には対応していません。
• tauri.conf.json では frontendDist として dist/ を指定します。

設定例

1. @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. 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. SvelteKit の設定アップデート

   svelte.config.js

   import adapter from '@sveltejs/adapter-static';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
     // 前処理系の詳細については、公式サイト
     // https://kit.svelte.dev/docs/integrations#preprocessors を参照してください
     preprocess: vitePreprocess(),
   
     kit: {
       adapter: adapter(),
     },
   };
   
   export default config;

4. 「SSR」の無効化

   最後に、「SSR」（サーバーサイドレンダリング）を無効化し、以下の内容を含む「ルート +layout.ts ファイル」（TypeScript を使用していない場合は +layout.js）を追加して、事前レンダリングを有効化する必要があります：

   src/routes/+layout.ts

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

   static-adapter は、アプリ全体に対して「SSR を無効化」することを求めているわけではありませんが、そうすることで、（Tauri の API のような）グローバル・ウィンドウ・オブジェクトに依存する API を クライアント側のチェック なしで使用できるようになります。《リンク先は、Svelte 公式サイトの FQA ページ（英語版）です》

   さらにいえば、「SSG」（静的サイト生成）よりも「シングルページ・アプリケーション (SPA)」モードを好む場合は、アダプタ関連ドキュメント 《英語版ページ》に従ってアダプタ設定と +layout.ts を変更できます。

【※ この日本語版は、「Nov 01, 2024 英語版」に基づいています】

Doc-JP 2.00.00