navoica-frontend-ui v2.0.19
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 polaversion
nową wyższą wersję i zapisujemy zmiany w plikuPrzed 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-koadocker ps | grep "nazwa-aplikacji-mikrofrontendowej"
, następniedocker stop ID
, gdzie ID to id aplikacji mikrofrontendowej, następnie uruchamiamy ponownie devstack koa poprzezmake dev.up
. Lub skrótemmake 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ć.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago