okruch-kodu

Storybook for Angular, cz. 1. - instalacja i konfiguracja

Instalacja i konfiguracja

Każdy opisany tutaj krok ma swój dedykowany tag w repozytorium z przykładową aplikacją, link do taga jest obok nazwy kroku. Postaram trzymać się tej konwencji w całym tutorialu

Twórcy Storybooka dostarczają pakiet npm o nazwie @storybook/cli, który zawiera zestaw poleceń m.in. do instalowania, budowania, uruchamiania itp. Jednym z nich jest getstorybook, które uruchomione w katalogu aplikacji robi następujące rzeczy:
1) rozponaje, w którym że wspieranych frameworków (React, Vue, Angular) jest nasza aplikacja
2) w zależności od wykrytego frameworka:

Krok 1 - Instalacja Storybook cli git tag

W swoim tutorialu przyjąłem założenie, że wszystkie zależności potrzebne do instalacji i uruchomienia Storybooka będą instalowane lokalnie, żeby nie było potrzeby dostarczania globalnych zależności w środowisku CI/CD

Zgodnie z przyjętymi założeniami instalacje zaczynamy od dodania @storybook/cli do optional dependencies: npm install @storybook/cli -O

Krok 2 - Wywołanie getstorybook git tag

Uruchomienie npx getstorybook (w tym wypadku równoważne z z ./node_modules/.bin/getstorybook spowoduje

Krok 2.1 - rozwiązanie problemów z Webpackiem git tag

W mojej przykładowej aplikacji korzystam z Angulara 6.0.2, który w zależnościach ma webpack w wersji 4.x.x. Wersja Storybooka zainstalowana przez getstorybook nie wspiera webpacka 4.x.x dlatego zgodnie z sugerstią z tego zgłoszenia zmieniłem wersje wszystkich zależności Storybooka na 4.0.0-alpha.1

Krok 3 zmiana domyślnej konfiguracji git tag

Domyślna konfiguracja jest wystarczająca ale ja nie chcę mieć osobnego katalogu na historyjki lecz trzymać je obok plików komponentów.
Dlatego w domyślnej konfiguracji muszę dokonać jednej zmiany:

W pliku config.js zmienię ścieżkę, z której zaciągane mają być pliki *.stories.ts z
../src/stories na ../src

Uruchamianie i budowanie

Jak pisałem wcześniej, polecenie getstorybook pośród innych rzeczy dodaje do package.json dwa skrypty: storybook i build-storybook

npm run storybook uruchamia aplikację Storybooka na serwerze deweloperskim, reagującą na zmiany w kodzie. Domyślnie jest ona wystawiona na porcie 6006.

npm run build-storybook buduje statyczne pliki, które można wystawić na serwerze (domyślny katalog docelowy to storybook-static)

Moja testowa aplikacja na razie nie ma żadnych komponentów więc na razie będzie zawierała tylko dokumentację wygenerowaną na podstawie przykładowego pliki index.stories.ts z src/stories

W kolejnym odcinku stworzę przykładowy komponent i historyjki do niego (bez użycia pluginów, o których będzie w osobnych odcinkach). Pokażę jak pisać historyjki, jak definiować metadane, dostarczać zależności izolowanemu komponentowi itp.

wpis dodany 2018-06-07
z serii:
tematy: ,