Riot.js の Webpack-SPA テンプレートを GitHub Pages 上で動かせるようにする
Riot.js を以前ちょっとだけ試した。
$ npm init riot とコマンドを叩くと、SPA プロジェクトのテンプレートが展開されるのだが、このテンプレートプロジェクトをそのまま GitHub Pages (Project Site) としてデプロイすると、パス解決に失敗して正常に動作しないのだ。
原因はこの手の SPA フレームワークでよくあるルーティング周りの問題で、
https://neos21.github.io/
↑ このようなドメインのルート直下に index.html があって、そこを起点に SPA が動作する環境なら別に問題ないのだが、
https://neos21.github.io/my-riot-project/
↑ このように /my-riot-project/ の配下に index.html があると、ページ遷移時に SPA のルータが
https://neos21.github.io/my-riot-project/my-second-page
ではなく
https://neos21.github.io/my-second-page
このような URL に解釈してしまって、ページ遷移ができなかったり、遷移先ページが表示されなかったりするのだ。
以前、Preact のテンプレートプロジェクトをいじくっていた時にもそんな事態に遭遇し、次の記事で紹介したような対策を発見した次第。
Riot.js の場合もコレに近い形で、GitHub Pages にデプロイした時だけ、リンクパスに /my-riot-project/ 部分を追加出来れば良いんだよな、と気付いた。
Webpack ちからがなく、また Riot.js におけるお作法もまだよく知らないので、結局編み出した方法はこんな感じ。
const basepath = window.location.href.startsWith('https://neos21.github.io/practice-riot') ? '/practice-riot' : '';
export default basepath;
実行時に location.href を直で見ちゃう荒技…。process.env をビルド時に注入する方法が分かんなかった。ｗ
Webpack はよく知らないし知りたくもないし書きたくないけど、かといってシングル HTML ファイル内に Riot.js の記法を混ぜ込むのもなんか嫌で、ヤダヤダしてたらこんな方法を編み出してしまった…。
一応、GitHub Pages 上で動作するデモサイトは以下。
リポジトリは以下。
Riot.js は記法がシンプルなので、慣れたら使いやすいそうだなーとは思うけど、Angular や Vue みたく、Webpack などのビルド周りを丁寧に調整してくれてはいないので、別途 Webpack ちからがないとどうにもカスタマイズ出来なくてそこら辺が辛い。こういうところに頭と時間を使わないと動くモノが作れないんだったら、すぐに動くモノが作れる他のフレームワークに移行しちゃうよう。w
