Kihagyás

Lokál környezet beállítása

1. Előfeltételek

  • Git telepítés
    • Windows operációs rendszer esetén a Git Bash telepítése is szükséges.
  • Node Version Manager telepítés.
    • A telepítendő Node/npm verzióról itt található információ.
  • Docker Desktop telepítés
    • macOS rendszer esetén az itt található beállításokat is végezzük el.
  • IntelliJ IDEA Ultimate telepítés
    • Az első munkanapon céges emaillel regisztrálva, trial verzióban lehet használni a programot.
    • 30 napon belül email értesítésben céges hozzáférést kapunk, amit az emailben kapott utasítások alapján kell aktiválni.

Docker compose V2 használata

Minden esetben győződjünk meg róla, hogy lokálisan is a V2-es verziójú docker compose-t használjuk. Compose verzió ellenőrzése:

docker compose version

Szükség esetén frissítsük a telepített docker/docker-compose-unkat és automatikusan át fog állni a V2-es pluginra.

Alapértelmezetten használandó terminál Windowson

Fontos, hogy a napi munkánk során a Git Bash-t használjuk terminálként Windows-on. Pl.: A Git műveletek parancssori használata során.

Ennek az az oka, hogy mivel a Git Bash egy emulált Unix-os terminál, így kevesebb különbözőséget kell kezelni a Windows és a macOS rendszerek között, illetve csak így tudja a Semi Product biztosítani, hogy a dokumentációban ajánlott parancsok és lépések konzisztensen működjenek.

2. Projekt kód klónozása

2.1 Git és GitLab konfigurálása

A Git használatához szükséges konfigurációt az alábbi oldal tartalmazza:

Git Lokális Környezet Beállítása

2.2 Az api repository klónozása

A következő paranccsal kell klónozni az api repository-t: 

git clone git@gitlab.com:gbsolutions/granit-bank/virtualis-asszisztens/api.git

Az api repositoryban található a DTO-k generálásához használt openapi.yml fájlunk. Ezért mindig a fejlesztéshez szükséges branchet kell belőle checkoutolnunk.

Lokális fejlesztés során az api repositoryt fájlrendszeren keresztül oldják fel a frontend és backend projektek. Ahhoz, hogy ez működjön fontos, hogy az api repository-t ugyanabba a mappába klónozzuk ahová a frontend projektet is.

DTO generálás

A projekt specifikus openapi.yml-ből történő kód generálásról részletesebben itt olvashatsz.

Ékezetes betűk a mappák neveiben

A kódgenerálás során problémát okoz, ha a séma definíciós fájlok útvonalában olyan mappák szerepelnek, amik ékezetes karaktereket is tartalmaznak.
Ennek elkerülése érdekében, amikor létrehozzuk a projekt mappáink struktúráját ügyeljünk arra, hogy ne használjunk ékezetes karaktereket az útvonalat alkotó mappák neveiben.

2.3 A frontend repository klónozása

A következő paranccsal kell klónozni a frontend repository-t: 

git clone git@gitlab.com:gbsolutions/granit-bank/virtualis-asszisztens/frontend.git

2.4 A backend repository klónozása

A backend repository klónozása még akkor is hasznos ha nem full-stack fejlesztőként dolgozunk a projekten, ugyanis ha lokálisan is képesek vagyunk futtatni a backend alkalmazást akkor fejlesztési időben is tudjuk a backendet meghajtva tesztelni az alkalmazást.

A backend repositoryt az itt leírt módon tudjuk klónozni.

Ugyanazon branch checkoutolása minden repositoryban script-tel

Az alábbi scriptet tudjuk használni, hogy 1 lépésben checkoutoljuk ugyanazt a branchet minden repositoryból: 

#!/bin/sh

BRANCH=$1

cd api
echo "$PWD"
git fetch
git reset --hard
git checkout $BRANCH
git pull
cd ..
cd backend
echo "$PWD"
git fetch
git reset --hard
git checkout $BRANCH
git pull
cd ..
cd frontend
echo "$PWD"
git fetch
git reset --hard
git checkout $BRANCH
git pull
cd ..
cd documentation
echo "$PWD"
git fetch
git reset --hard
git checkout $BRANCH
git pull

  • A scriptet abból a mappából kell kiadni, ahová klónoztuk a repositorykat.
  • A BRANCH értékének a checkoutolni kívánt branch nevét kell megadni. amennyiben egy sh fájlba mentjük ezt a scriptet (Pl.: checkout-all-repo.sh), úgy a branch nevét argumentumként adhatjuk meg. (Pl.: ./checkout-all.sh develop)

Fontos

Windowsos rendszer esetén Git Bashből futtassuk a scriptet!

Ugyanazon branch checkoutolása minden repositoryban IntelliJ-vel

  1. Az IntelliJ menüsorból válasszuk a View -> Tool Windows -> Git menüpontot.
  2. Az így alul megnyíló Git ablakban, bal oldalt nyissuk le a Remote opciót.

  3. Az így megjelenő branchek mellett zárójelben láthatjuk, hogy mely projekteken létezik ugyanilyen néven branch. Pl.: (backend, backend-service/src/main/resources/api).

    IntelliJCheckoutAllRepository

  4. Ezt követően ha a megfelelő branch-re jobb egérgombbal kattintunk, majd kiválasztjuk a Checkout opciót, akkor minden zárójelben felsorolt projektből checkoutolja az IntelliJ a kiválasztott branchet.

3. Projekt/projektek importálása

Az IntelliJ-be ezt a leírást követve importálhatjuk a projektet/projekteket.

Amennyiben a backend alkalmazás futtatására is szükségünk van, akkor a backend projekt importálása után az itt leírtakat követve tudjuk telepíteni és beállítani a JDK-t.

4. Az IntelliJ beállításai

IntelliJ Cache eldobása

A lenti lépések végrehajtása során előfordulhat, hogy látszólag nem lép érvényre egy beállítás. Ez az esetek nagy százalékában amiatt történik, mert az IntelliJ becachelt valami korábbi konfigurációt. Épp ezért mielőtt bármi mást próbálnánk, első lépésként használjuk az „Invalidate Caches and Restart“ funkciót:

  1. Az IntelliJ menüsorából válasszuk a File -> Invalidate Caches… menüpontot.
  2. A felugró Invalidate Caches ablakban, az Optional szekcióban pipáljunk be mindent, majd kattintsunk az Invalidate and Restart gombra.

4.1 Frontend formázása

Config fájl

A config fájl: Az adott frontend projekt gyökérmappájában található. Pl.: semiproduct/client/.eslintrc.js

A pontot ne felejtsük el a fájlnév elejéről.

A frontend kód formázásához Prettier és az ESLint eszközöket használjuk. Előbbi a kódformátumért felel teljes mértékben, utóbbi pedig a statikus kódelemzést végzi. A formázási szabályok betartását a CI ellenőrzi.

Mindkét eszköz használható CLI utasításokkal is, amelyek hasznosak lehetnek git commit-ot megelőzően:

  • npx prettier --check . - ellenőrzi a kódformátumot az egész projekten
  • npx prettier --write . - javítja a kódformátumot az egész projekten
  • npx eslint . - ellenőrzi az ESLint szabályokat az egész projekten
  • npx eslint --fix . javítja az ESLint által talált hibákat az egész projekten

Modulonként történő ellenőrzéshez használhatóak a check kezdetű npm scriptek.

Megkönnyíti a folyamatot, ha ezekre a szabályokra már fejlesztés közben is figyelünk, ebben az IDEA nyújt segítséget. Az ESLint alapjáraton elérhető, a Prettier futtatásához viszont plugin szükséges.

Fontos, hogy az ESLint és Prettier konfigurácók beállítása előtt futtassuk le az npm ci parancsot, máskülönben nem fog létezni a frontend repositoryban a konfigurációhoz szükséges node_modules mappa: 

npm ci

4.1.1 ESLint és Prettier formázás gyorsbillentyűk segítségével

A Prettier formázást adott fájlon a kódra kattintva jobb egérgomb -> Reformat with Prettier csinálhatjuk meg vagy default shortcut segítségével Windows esetében Ctrl + Alt + Shift + P vagy MacOS esetében Cmd + Option + Shift + P.

img.png

Az ESLint formázást adott fájlon a kódra kattintva jobb egérgomb -> Fix ESLint Problems csinálhatjuk meg.
Itt default shortcut nem érhető el, de beállítható az alábbi menüpont alatt:

File-> Settings -> Keymap -> Plugins -> JavaScript and TypeScript -> Fix ESLint Problems

IntelliJ IDEA -> Settings -> Keymap -> Plugins -> JavaScript and TypeScript -> Fix ESLint Problems

img.png

Formázás gyorsbillentyűvel

A két formázást ajánlott bekötni egy IntelliJ Macro-ba, amit be lehet állítani egy gyorsbillentyűre, így egyszerűbbé téve a formázási folyamatot.

Ezt a következőképpen tudjuk megtenni:

  1. Keressük meg az IntelliJ konfigurációs könyvtárában a makró leíró fájlt

    1.1. MacOS alatt: ~/Library/Application Support/JetBrains/IntelliJIdea_VERSION_/options/macros.xml 1.2. Windows alatt: ~/.config/JetBrains/IntelliJIdea_VERSION_/options/macros.xml

    Az elérési útban lévő _VERSION_ az általunk használt IntelliJ verziója.

Fontos

A tilde (~) nem a root könyvtárat, hanem az éppen bejelentkezett felhasználó home könyvtárát jelöli!

  1. Egészítsük ki a makró leíró fájlt (ha nem létezik, akkor hozzuk létre)

    <application>
    <component name="ActionMacroManager">
        ...
        <macro name="ESLint + Prettier Formatter">
            <action id="Javascript.Linters.EsLint.Fix" />
            <action id="ReformatWithPrettierAction" />
        </macro>
        ...
    </component>
</application>

  2. Indítsuk újra az IntelliJ-t

  3. Állítsuk be egy számunkra megfelelő gyorsbillentyűre ezt a makrót

    File -> Settings -> Keymap -> Macros -> ESLint + Prettier Formatter -> Add Keyboard Shortcut

    IntelliJ IDEA -> Settings -> Keymap -> Macros -> ESLint + Prettier Formatter -> Add Keyboard Shortcut

Ez lehet például:

  • MacOS: Ctrl + Option + Cmd + L
  • Windows: Ctrl + Alt + Shift + L

4.1.1 ESLint konfiguráció

Az ESLint konfigurációt a File -> Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint menüpont alatt, az alábbi screenshot alapján tudjuk elvégezni:

Az ESLint konfigurációt a IntelliJ IDEA -> Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint menüpont alatt, az alábbi screenshot alapján tudjuk elvégezni:

  1. Legyen a Manual ESLint configuration kiválasztva, és az ESLint package mezőben adjuk meg a node_modules-ban található eslint mappa elérési útvonalát.
  2. A Configuration File szekcióban a Configuration file mezőben adjuk meg az .eslintrc.js fájl elérési útvonalát.
  3. A Run for files mezőben adjuk meg a következőt:
    {**/*,*}.{js,ts,jsx,tsx,scss,css,html}
    ESLintConfig

A kényelmi funkciók (pl. Run eslint -fix on save) bekapcsolása egyéni preferencia alapján történik.

4.1.2 Prettier konfiguráció

A Prettier konfigurációt a File -> Settings -> Languages & Frameworks -> JavaScript -> Prettier menüpont alatt, az alábbi screenshot alapján tudjuk elvégezni:

A Prettier konfigurációt a IntelliJ IDEA -> Settings -> Languages & Frameworks -> JavaScript -> Prettier menüpont alatt, az alábbi screenshot alapján tudjuk elvégezni:

  1. A Prettier package mezőben adjuk meg a node_modules-ban található prettier mappa elérési útvonalát.
  2. A Run for files mezőben adjuk meg a következőt:
    {**/*,*}.{js,ts,jsx,tsx,scss,css,html}
    PrettierConfig

A kényelmi funkciók (pl. run on save) bekapcsolása egyéni preferencia alapján történik.

4.2 Heap méret beállítások

Amennyiben korábban még nem tettük meg az itt található IntelliJ/WebStorm memória beállításokat is hajtsuk végre.

Fordítási / alkalmazás indítási idő lassulás kezelése

A memóriabeállítások mellett célszerű észbentartani, hogy amennyiben a megfelelő memóriabeállítások ellenére is lassulásokat tapasztalunk a fordítás és/vagy alkalmazás indítás során, akkor az itt található lépéseket célszerű lehet végrehajtani.

4.3 Alapértelmezett terminál beállítása

Windows operációs rendszer esetén állítsuk be, hogy az IntelliJ-ben nyitott terminálok Git Bash-es terminálok legyenek.

  1. Navigáljunk az Terminal menüpontra: File -> Settings -> Tools -> Terminal
  2. Az Application Settings szekció alatti Shell path legördülő menüből válasszik ki a telepített Git Bash elérési útvonalát. DefaultTerminal
  3. Ezt követően ha a Terminal tetején a “+“ ikonra kattintunk, akkor az újonnan nyílt terminál már Git Bash-es terminál lesz.

5. Frontend alkalmazások futtatása

Az alábbi parancsokat a frontend mappából kell kiadni, ahol a package.json fájl is megtalálható.

5.1 Függőségek frissítése

A frontend függőségek frissítéséhez az alábbi parancsot kell kiadni: 

npm ci

5.2 DTO-k generálása

Fontos

Mindig légy meggyőződve arról, hogy a megfelelő branchen áll-e az api repository.

Például ha módosítottuk az openapi.yml-ben valamelyik DTO-t, akkor valószínűleg azt szeretnénk ha az új DTO-t használná a frontend projekt. Ezért álljunk rá az api repositoryban a módosítást tartalmazó branchre (Fontos, hogy legyen up-to-date, amihez használjuk a git pull-t).

A DTO objektumok újragenerálásához az alábbi parancsot kell kiadni:

npm run generate:api

Windows rendszeren előfordulhat, hogy az NVM telepítése során a C:\Users\Pelda Bela\AppData\Roaming\ alatti npm mappa nem jön létre, ami okozhat hibát a fenti parancs futtatása során. A hiba könnyen orvosolható az npm mappa manuális létrehozásával.

5.3 Alkalmazás(ok) indítása

5.3.1 Indítás parancssorból

Az egyes frontend alkalmazást/alkalmazásokat az alábbi paranccsal lehet elindítani: 

npm run start:{alkalmazás-neve}

Például a semi-product-ban alapértelmezetten három frontend alkalmazás található, melyek így indíthatóak el: 

npm run start:admin
npm run start:client

5.3.2 Indítás run configuration-nel

Ehhez először is hozzuk létre a megfelelő run configuration-öket.

Run configuration létrehozása az összes frontend alkalmazáshoz

Az alábbi példa 1 frontend alkalmazásra mutatja be, hogyan kell Run configurationt létrehozni, de értelemszerűen az összes frontend alkalmazáshoz (client, admin, webcomponent stb.) hozzuk létre.

  1. Egy új konfigurációt a Run -> Edit configurations... menüből hozhatunk létre.
  2. A bal felső sarokban kattintsunk a + gombra és a legördülő menüből válasszuk ki az npm opciót.
  3. A Name mezőben adjuk meg annak a frontend alkalmazásnak a nevét, amihez a konfigrációt készítjük.(client, admin, webcomponent)
  4. A Scripts mezőben adjuk meg a futtatni kívánt indító script-et.
    1. A client (Ügyfél) alkalmazás esetén: start:client,
    2. az admin alkalmazás esetén: start:admin,
    3. a webcomponent alkalmazás esetén: start:webcomponent.
  5. Ellenőrizzük, hogy a Node interpreter mezőben az nvm-mel telepített NodeJS verzió van-e kiválasztva (a frontend/.nvmrc fájlban található verzió kell). Ha nem, állítsuk be a megfelelő telepített verziót!
  6. Ellenőrizzük, hogy a Package manager mezőben az nvm-mel telepített npm verzió van-e kiválasztva (a frontend/.nvmrc fájlban található verzió kell). Ha nem, állítsuk be a megfelelő telepített verziót!
  7. Végül kattintsunk az Apply majd az OK gombokra.

ClientAppRunConfig

Az előző lépésben létrehozott Run configuration-öket adjuk hozzá a Services ablakhoz:

  1. IntelliJ-ben adjuk hozzá a Services ablakot az alsó eszközsávhoz. Kétféleképp tehető meg:

    • Menüből: View -> Tool Windows -> Services
    • Billentyű kombinációval: Alt + 8

  2. Bal oldalt nyissuk le a “+“ jelet.

  3. Kattintsunk a Run Configuration Type-ra és a legördülő menüből válasszuk ki az npm-et.
  4. Ezt követően megjelennek a definiált Run Configuration-jeink.
  5. Jobb gombbal kattintsunk a futtatni kívánt configuration-re és válasszunk a Run vagy a Debug opciók közül.
  6. Ezt követően a config-nak megfelelő frontend alkalmazás el fog indulni.

6. Backend alkalmazás futtatása

Frontend fejlesztőként is szükség lehet arra, hogy lokálisan is futtatni tudjuk a backend alkalmazást.

Ez az alábbi lépéseket végrehajtva tehető meg: itt.

Backend specifikus IntelliJ beállítások

Amennyiben nem fogunk a backend kódban fejlesztéseket végezni, úgy az IntelliJ-vel kapcsolatos backend specifikus beállítások kihagyhatóak, a többi viszont kötelező lépés.