thumbnail
thumbnail

【Svelte】SvelteKitに入門する

updated 2021-8-7

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

バージョン

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

アプリの作成

npm init svelte@next PROJECT_NAME

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

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

起動

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

npm i

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

npm run dev

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

Svelte kit hello world

ポートを変える

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

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

svelte-kit dev --port 3001

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

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

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

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

svelte-kit dev --host

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

192.168.11.5:3000

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

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

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

バージョン

svelte/kit 1.0.0-next.12

インストール

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

npm i adapter-static

設定ファイルの書き換え

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;

これで完了です

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

npm run build

参考

SveltKit公式