Zenn
😽

sveltekitでフロントエンド開発するための環境を整えてみた。

2024/03/08に公開
Docker
フロントエンド
SvelteKit
tech

こんにちは、フクロウです。

本日はwebフレームワークのsveltekit(スベルテキットで)フロントエンド開発環境を構築してみます。
svelte環境用のフォルダの準備を忘れずに...
(※macOSでの構築を想定)

１、コマンド
２、docker環境構築
３、ブラウザでアクセス
で書いております。

１、コマンド

npm create svelte@latest app

はいこれだけでOKです。
実行すると以下のようにひとつひとつ選択してくことになります。

Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ● SvelteKit demo app (A demo app showcasing some of the features of SvelteKit - play a word guessing game that works without JavaScript!)
│  ○ Skeleton project
│  ○ Library project

Add type checking with TypeScript?
│  ○ Yes, using JavaScript with JSDoc comments
│  ● Yes, using TypeScript syntax
│  ○ No

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
│  ◻ Try the Svelte 5 preview (unstable!)

２、docker構築

dockerfile

FROM node:20.11-bullseye
COPY ./app /app
WORKDIR /app

docker-compose.yaml

version: '3.8'
services:
  sveltekit-sample:
    build: ./
    container_name: sveltekit-sample
    command: 'npm run dev' // ←初回は、npm runしてもnode_moduleがないのでエラーになります。
    ports: 
      - "5173:5173"
    volumes:
      - './app:/app'
    tty: true

docker_create.sh

docker-compose stop
docker-compose down
docker-compose build --no-cache
docker-compose create
docker-compose start

上記3ファイルを作成し、環境を構築
多分、以下のような内容にフォルダの中がなっているはず。。。

app
docker_create.sh
docker-compose.yaml
dockerfile

あとは、「docker_create.sh」コマンドを実行するだけで構築が完了します。

何度も言いますが、初回はnpm runしてもnode_moduleがappフォルダに存在しないはずなので、npm installすることをお忘れなく.

３、ブラウザでアクセス

では、アクセスは？
↓
0.0.0.0:5173でアクセスできます。

ちょこっと情報
以下がsveltekitの公式サイトです。
https://kit.svelte.jp/

起動できなかったなどがあれば、お知らせください。

Discussion