Zenn
🐩

svelte 開発環境構築

2024/06/29に公開
Svelte
tech

web3アプリのフロント開発環境構築のメモ書きです。

環境

  • docker
  • svelte
  • node v18.20.3
  • pnpm 9.4.0

プロジェクト作成

公式サイトの通りにプロジェクトを作成します。

npmでなくpnpmを利用します。

pnpm create svelte@latest sample

https://rodneylab.com/how-to-create-svelte-app/

プロジェクト内容の選択

お好みで選択してください。

個人的な意見では、typescriptは不要だと思います。

create-svelte version 6.3.2

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└  Your project is ready!

Install more integrations with:
  npx svelte-add

Next steps:
  1: cd open-dao
  2: pnpm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: pnpm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

ライブラリインストール

cd sample
pnpm install

hostとport変更

コンテナで動かすためにhostとportを変更します。

scriptに追加します。

"cdev": "vite dev --host 0.0.0.0 --port 3000",

起動

pnpm run cdev

サンプルアプリが起動すれば成功です。

参考

https://svelte.jp/
https://pnpm.io/ja/pnpm-cli

Discussion