AngularJS 1.x系のシングルページアプリケーションにユニットテストを導入した話
mmmuser
デロイト トーマツ ウェブサービス株式会社(DWS)公式ブログ
Nuxt.jsアプリケーションのStorybookで画像を読み込む小ネタを紹介します。
Storybookで静的ファイルを読み込むには、-s
オプションを使用します。
Nuxt.jsだとassets
配下に静的ファイルを置くと思いますが、以下のようにすると、Storybookでassets
配下がホストされるようになります。
{
"scripts": {
"start-storybook": "start-storybook -s ./assets -p 6006"
}
}
ただし、Nuxt.js内で、例えば以下のように画像を読み込んでいる場合、Storybook上で表示されません。
.background {
background: url('~/assets/images/sample.png') no-repeat;
}
これは、ビルドされたアプリケーションではhttp://localhost:3000/assets/images/sample.png
から画像を読み込もうとしますが、Storybookでは、http://localhost:3000/images/sample.png
で画像をホストしているためです。
これをresolve.aliasに手を加えず、スマートに解決できないかと考えました。
解決するには、以下のようにします(といっても簡単ですが…)。
まずassets-link
というディレクトリにassets
へのシンボリックリンクをはっておきます。
mkdir assets-link
ln -s ../assets assets-link/assets
次に、Storybookの-s
にわたす値をassets-link
に変更します。
{
"scripts": {
"start-storybook": "start-storybook -s ./assets-link -p 6006"
}
}
これにより、Storybookでも、http://localhost:3000/assets/images/sample.png
で画像をホストすることができ、アプリケーションにも手を加える必要がなくなりました(´ω` )