【Svelte】SvelteKitに入門する

2021-8-7

meko

デモアプリを改造して作っていく方法と、１からアプリを作成していく方法があります
今回は１から作成していく方になります デモアプリで作成した後に変更したいポイントがあればこの記事で解決できるかもしれません

バージョン

Node v16.6.1
svelte/kit 1.0.0-next.139
Copy

アプリの作成

npm init svelte@next PROJECT_NAME
Copy

PROJECT_NAMEの部分にプロジェクト（アプリ）の名前を入れてください
質問への答えはこだわりがなければ下記のように設定するのがオススメです

? Which Svelte app template?
    SvelteKit demo app
❯   Skeleton project

? Use TypeScript? 
    No
❯   Yes

? Add ESLint for code linting?
    No
❯   Yes

? Add Prettier for code formatting?
    No
❯   Yes
Copy

これでディレクトリが作成できるので、開きます

起動

まずライブラリをインストールします

npm i
Copy

package.jsonのあるディレクトリで、下記のコマンドを叩くと開発環境で実行できます

npm run dev
Copy

ブラウザでlocalhost:3000にアクセスするとシンプルな画面が開きます
画像は3001になっていますが、ポート変更などもできるので、そこは遊んでみてください

ポートを変える

ローカル環境で同時にアプリを立ち上げたくなった時に、同じフレームワークだとポートが被ったりするので、変更してみます

package.jsonを開いて、scriptsの項目にあるdevをみます デフォルトだとsvelte-kit devなのですが、ここにオプションを足すことができるのでそれを利用します

svelte-kit dev --port 3001
Copy

これでnpm run devと起動するとportが3001で起動します 他のオプションと併用できます

ローカル環境で他の端末から確認する

同じwifiで繋がっているスマホなど他の端末で確認するにはポートを解放する必要があります
自宅や職場など安全な環境以外では使用しないでください

package.jsonを開いて、scriptsの項目にあるdevをみます デフォルトだとsvelte-kit devなのですが、ここにオプションを足すことができるのでそれを利用します

svelte-kit dev --host
Copy

これで作業しているPCのIPアドレス:PORTの番号でアクセスできます 例えばこんな感じです

192.168.11.5:3000
Copy

他のオプションと併用できます

静的サイトとして書き出す

adapter-staticを使用します
sveltejs/kitには色んなパターンに合わせたadapterが用意されていて、そのうちの一つです

バージョン

svelte/kit 1.0.0-next.12
Copy

インストール

コマンドラインでnpmを使ってインストールします

npm i adapter-static
Copy

設定ファイルの書き換え

svelte.config.jsを開いて書き換えます

// svelte.config.js
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),    
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter({ 
            pages: "build",
            assets: "build",
            fallback: "index.html"
        }),
        prerender: {
            enabled: true,
        },
        ssr: true,
    },
};

export default config;
Copy

これで完了です

ビルドコマンドを打つとbuildディレクトリに静的サイトのコードが生成されます
これをアップロードすればサイトが完成です

npm run build
Copy

参考

SveltKit公式