svelte.md

Svelete

Privary features are

• Svelte is a compiler
• Write less code
  • Readability is important
• No virtual DOM

Requirements

• Node: 16.7+

References

• svelte official
• svelte official (jp)
• github
• tutorial
• tutorial (jp)

Development reference

• Vitejs
• Vitejs plugin
• vscode plugin
• Svelte for new developers

SvelteKit

• SvelteKit
• SvelteKit (jp)
• Git Docs
• Docs
• Docs (jp)
• faq

Others

• Svelte + TypeScript のベストプラクティスを考える
• Svelte + TypeScript で軽量の JavaScript アプリを！

Setup

# Use SvelteKit for building tool
npm init svelte my-app
cd my-app
npm install
npm run dev

# Use Vitejs for building tool
npm init vite my-app2 -- --template svelte
cd my-app2

Configuration

svelte.config.js

• Svelete Configuration
• Svelete Configuration (jp)

Deploy

• Adapters
• Adapters(jp)

Procedure

tsc --noEmit
npx vite build
# target dirs are
# - static/
# - build/

• github pages に、deploy する場合、svelte で出力したディレクトリ_app内のファイルが 400 エラーになり、appにリネームすることで対応した。
• svelte.config.js の変更

const config = {
	kit: {
    ...
		appDir: 'app',
    ...
	}
};