svelte-training Svelte Themes

Svelte Training

実践Svelte入門(Svelte編)

Download

svelte-training

実践Svelte入門(Svelte編)

premise

  • nodeのインストール

    # Versions check
$ volta --version
$ node -v
$ npm -v

  • githubのページ作成

install and settings

  • git clone

  • settings.code-workspaceの生成

  • Svelteのセットアップ

    # Create from vite
$ npm create vite@latest . -- --template svelte-ts

# install
$ npm install

  • index.htmlの修正

    `#index.html`
 - <html lang="en">
 + <html lang="jp">

  • 稼働確認

    # run dev
$ npm run dev

  • Dockerfile作成

  • .dockerignore作成

  • package.jsonにサーバースクリプトを追加

    • sirv-cli を使ってbuildによりdistに作成された静的ファイルをサーブ
    • すべてのネットワークインターフェースからアクセスできるように設定
    `#package.json`
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
 +    "start": "sirv dist --no-clear --single --host 0.0.0.0"
  }

  • sirv-cliインストール

    # install
$ npm install sirv-cli --save

  • githubのラベル設定

    • トークンの設定

  • release.yamlの作成

  • docker-compose.yamlの作成

    • githubのpackageに作成されたDockerイメージを動かす。

usege

ソースコード実行(ローカル・ホットリロード)

コンテナ実行確認(ローカル)

  • コンテナbuild/run

    # container build
$ docker build -t {IMAGE_NAME} .

# container run
$ docker run -p 3000:8080 {IMAGE_NAME}

  • アクセス http://localhost:3000/

コンテナ実行確認(github)

appendix

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes