webstrom-frontend

• Spustenie backendu
  • Lokálny BE
• Spustenie frontendu
• CSS types (deprecated)
• IDE setup

Spustenie backendu

Defaultne sú API requesty smerované na deploynutý test BE (test.strom.sk). Zmeniť to môžeš v .env.

Lokálny BE

Ak potrebuješ urobiť nejaké zmeny aj na BE (a otestovať, že to s FE funguje), musíš si spustiť BE lokálne a nasmerovať naň FE. Ak ti deployed BE stačí, pokračuj na Spustenie frontendu.

Návod na rozbehanie backendu sa nachádza vo webstrom-backend repozitári.

Po inštalácii potrebných balíkov a vytvorení databázy spusti backend django server pomocou:

python manage.py runserver

Tento príkaz spustí server na localhost:8000, kde sa dá pristupovať k API a k django admin stránke.

Zakomentuj/odkomentuj riadky v .env, aby requesty smerovali na BE na localhost:8000.

Spustenie frontendu

Naklonuj si projekt z GitHubu a prepni sa do priečinku projektu:

git clone https://github.com/ZdruzenieSTROM/webstrom-frontend
cd webstrom-frontend

Potrebuješ:

• Node.js - javascriptový engine
  • check, či ho máš: node -v
  • dá sa nainštalovať priamo zo stránky, ale ideálne je použiť nvm (Node Version Manager) (neboj sa inštalačných inštrukcií)
• Yarn - správca JS balíkov

Potrebné balíky pre projekt sa nainštalujú pomocou:

yarn install

alebo len

yarn

Development server sa spustí pomocou príkazu:

yarn dev

Tento príkaz spustí server na localhost:3000, ktorý reaguje na zmeny vo frontendovom kóde a automaticky sa reloaduje.

CSS types (deprecated)

DEPRECATED: .module.scss súborov sa snažíme zbaviť.

Na pregenerovanie CSS typov pre styles z *.module.scss (do súborov *.module.scss.d.ts) je potrebné spustiť:

yarn css-types

Ak chceme aby sa tieto typy generovali automaticky počas vyvíjania, je tu príkaz:

yarn css-types-watch

IDE setup

Používame VSCode, nainštaluj si doň ESLint rozšírenie (formátuje kód). V repe máme .vscode config, v ktorom zapíname "fix-on-save" - kód sa teda formátuje pri uložení súboru.

Rozšírenie je takisto možné doinštalovať pomocou Ctrl+P a spustením:

ext install dbaeumer.vscode-eslint