Skip to content

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/scoring/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/scoring/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!

3. Frontend alkalmazások futtatása

Az alábbi parancsokat a frontend repository-n belül abból a mappából kell kiadni ahol a package.json fájl megtalálható.

3.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

3.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

3.3 Alkalmazás(ok) indítása parancssorból

Info

Az alkalmazások run configuration-nel is futtathatóak. Ezek leírását lentebb részletezzük.

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
npm run start:partner

4. 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.

5. 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.

5.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/eslint.config.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

5.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
  • 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

5.1.2 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 a gyökérmappában található eslint.config.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.

5.1.3 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.

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

Amennyiben korábban még nem tettük meg az itt található IntelliJ 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.

5.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. Alul válasszuk ki a Terminal fület.
  2. A Terminal tetején kattintsunk a lefelé mutató nyílra.

  3. Majd a legördülő opciók közül válasszuk ki a Git Bash-t.

    DefaultTerminalGitBash

  4. 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.4 Indítás run configuration-nel

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

Run configuration az összes frontend alkalmazáshoz

Az alábbi példa 1 frontend alkalmazásra mutatja be, hogyan kell Run configuration létrehozni, de értelemszerűen ezt az összes frontend alkalmazás (client, admin, partner stb.) esetén megtehetjük.

  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. Pl.: ClientApp
  4. A Scripts mezőben adjuk meg a futtatni kívánt indító script-et. Pl.: A client (Ügyfél) alkalmazás esetén: start:client, az admin alkalmazás esetén: start:admin stb.
  5. Ellenőrizzük, hogy a Node interpreter mezőben az nvm-mel telepített NodeJS verzió van-e kiválasztva. 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. 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 (macOS esetén: Option + 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.