Frontend Development Quickstart Guide¶

Pro spuštění frontendové aplikace je potřeba mít nainstalovanou (ideálně) nejnovější verzi YARN: https://yarnpkg.com/, který lze snadno nainstalovat přes NPM jež je součástí NodeJS (https://nodejs.org/en/). Yarn nainstalujeme následujícím příkazem (v rootové složce frontendu, tzn. /frontend):

npm install --global yarn

Následně můžeme příkaz yarn používat kdekoliv v konzoli (nicméně může být nutný restart). Před samotným spuštěním je potřeba stahnout všechny dependencies pro projekt, což provedeme příkazem:

yarn install

Samotnou aplikaci spustíme příkazem:

yarn run start

Aplikace ve výchozím nastavení poběží na portu 3000 na localhostu, tzn.: http://localhost:3000/

Adresářová struktura¶

• features - logické moduly v aplikaci - např. katalog, home, apod.
• swagger - kód vygenerovaný ze swaggeru přes gen:swagger skript
• utils - utilitní třídy, které se logicky nehodí do žádné features složky

Sdílení stavu mezi komponentami¶

Pokud potřebujeme sdílet stav jinak než přes props (např. napříč více komponentami) musí se použít globální store objekt, který poskytuje Redux (redux/store.ts). Pro uchování stavu je potřeba vytvořit reducer, který se stavem manipuluje = je to funkce, která vezme aktuální stav a akci a podle akce provede úpravu stavu. Jako template je vhodný soubor features/Auth/userReducer.ts. Následně je potřeba reducer ještě připojit do Reduxu - což lze udělat v modulu store.ts přidáním jako atribut objektu ve funkci combineReducers, tzn.

const store = createStore(
    combineReducers({ auth: authReducer, theme: themeReducer, myNewState: myNewStateReducer }),
    {}
)