絶対流行る JS 製フレームワーク Svelte のインストール ( Hello World まで)

最終更新日:

Svelte とは

Cybernetically enhanced web apps
人工頭脳のような、すごい良い web アプリケーション。
みたいな事が書いてある。

React や Vue の流れに沿った javascript フレームワーク。
xxxx.svelte ファイルをコンパイルするというところが、サイトを見てて環境設定とかめんどくさそうとか思って抵抗を感じたけど、
全くそんなことはなかった。

以下、ルーティングして http client で簡単なデータを引っ張ってきて表示させるところまで書いた段階での所感

  • 「インストール → 試す」までがめちゃくちゃ簡単。 Angular なんて 2 以降難しくてインストールすらできない。
  • npm run build が気持ちいい ＆ npm run dev に感動した。
  • React のような気持ち悪さがない。
  • Vue よりイケてる感じがする。
  • sublime に .svelte のシンタックスハイライトが欲しい。

インストール

  • /var/www/html に svelte-sample というプロジェクトを作成してみる
  • npx とは
$ cd /var/www/html
# nodebrew で NodeJS がインストールされていれば npx コマンドを叩ける？
$ npx degit sveltejs/template svelte-sample
$ cd svelte-sample
$ npm install

ビルドして表示

  • Nginx の設定などは下記参照
# ビルド
$ npm run build

ビルドをすると bundle.js と bundle.css が作成される。
あとは Nginx や apache などで設定した URL にアクセスする。

VirtualBox やサーバーではなく PC に直接インストールした場合は、
下記コマンドを叩いて、 http://localhost:5000 などにアクセスすれば表示される。と思う。

$ npm run start

Nginx

  • /var/www/html/svelte-sample がプロジェクトのパスの場合
  • svelte.sample.com にアクセスすると表示されるようにする
cd /etc/nginx/conf.d
vi svelte-sample.conf (分かりやすい名前)

server {
	listen       80;
	server_name  svelte.sample.com;
	
	index index.html;
	
	root /var/www/html/svelte-sample/public;
	
	try_files $uri $uri/ @rewrite;

	// どの URL にアクセスしても /index.html を読み込む
	location @rewrite {
		rewrite ^(.*)$ /index.html?_url=$1;
	}
	// アクセスした際の例外の設定。特定のフォルダにアクセスした場合はリライトさせない
	location ~* ^/(css|img|js|flv|swf|download)/(.+)$ {
		root /var/www/html/svelte-sample/public;
	}
	location ~ /\.ht {
		deny  all;
	}
}

VirtualBox で試している方

  • Mac の方対象
  • svelte.sample.com にアクセスできるように nginx で設定済み
  • VirtualBox の IP アドレスが 192.168.56.101 とする

ホスト側 (PC側)

# PC 側。パスワードは PC にログインする時のパスワード
$ sudo vi /etc/hosts

# 下記追加
192.168.56.101 svelte.sample.com

# 複数追加する時はスペースで区切る
192.168.56.101 svelte.sample.com svelte.sample2.com svelte.sample3.com

package.json に用意されているコマンド

上記インストール方法で作成した package.json には、
あらかじめ、便利なコマンドがいくつか用意されている。

# watch しながら作業する
$ npm run autobuild
# ビルドする
$ npm build
# アクセスできる URL を準備する
$ npm run start
$ npm run start:dev
# watch & アクセスできる URL を準備する
$ npm run dev