Aplikacja Storybook Navoica

Uruchamianie aplikacji

W terminalu wpisujemy npm run storybook

Aplikacja uruchamian jest na porcie 6006 pod adresem http://localhost:6006/

Tworzenie build'a aplikacji

W terminalu wpisujemy npm run build-storybook

Statyczne pliki do serwowania aplikacji na hoście po wykonaniu build znajdują się w folderze storybook-static

Biblioteka Frontend UI Navoica (navoica-frontend-ui)

1. Tworzenie builda'a biblioteki

W terminalu wpisujemy npm run build

Zawartość biblioteki po buildzie znajduje się w utworzonym folderze dist

• w folderze /dist znajdują się 2 wersje ES w pliku index.js jest wersja es5 (ECMA SCRIPT 2015) dla starych przeglądarek, a w index.esm.js wersja es6 dla nowszych przeglądarek.

2. Zapisywanie zmian aktualnej wersji biblioteki w NPM register

• Zmieniamy w pliku package.json dla pola version nową wyższą wersję i zapisujemy zmiany w pliku

• Przed opublikowaniem zmian biblioteki musi być wcześniej zrobiony build za pomoca komendy w terminalu npm run build

• Na koniec publikujemy wpisując w terminalu npm publish (potrzebny będzie dostęp)

• W aplikacji mikrofrontendowej, która używa biblioteki aktualizujemy wersję npm update navoica-frontend-ui, robimy w devstack-koa docker ps | grep "nazwa-aplikacji-mikrofrontendowej", następnie docker stop ID, gdzie ID to id aplikacji mikrofrontendowej, następnie uruchamiamy ponownie devstack koa poprzez make dev.up. Lub skrótem make dev.restart-container.nazwa-aplikacji-mikrofrontendowej

W tym momencie zmiany w bibliotece będą aktualne w aplikacji mikrofrontendowej.

3. Importowanie komponentów biblioteki do aplikacji mikrofrontendowej

• Jeśli biblioteka frontend-navoica-ui nie jest zainstalowana w aplikacji mikrofrontendowej w pliku package.json to instalujemy npm -i --save navoica-frontend-ui

• Importujemy i dodajemy komponent GlobalStyle w głównym pliku aplikacji mikrofrontendowej index.jsx pod AppProvider jeśli go nie ma import { GlobalStyle } from 'navoica-frontend-ui'; <GlobalStyle />

• np. aby użyć komponentu Button robimy import import { Button } from 'navoica-frontend-ui';

Szczegółowe informacje (dokumentacja) na temat użycia kodu komponentów znajdują się w aplikacji Storybook Navoica

4. Dodanie 'theme' do aplikacji mikrofrontendowej

W głównym pliku index.jsx aplikacji mikrofrontendowej dodajemy ThemeProvider import { ThemeProvider } from 'styled-components'; import { theme } from 'navoica-frontend-ui';

Pod AppProviderem dodajemy ThemeProvider

        tutaj reszta komponentów route, switch, header itp.
   </ThemeProvider>

5. Uruchamianie testów:

W terminalu wpisujemy npm run test

6. Uruchamianie sprawdzania wersji ECMA SCRIPT 5:

W terminalu wpisujemy npm run is-es5

7. Uruchamianie lintera:

npm run lint lub npm run lint:fix, aby część błędów zostało poprawionych i resztę wyświetliło co poprawić.