\section{Build \& Deploy}

\begin{frame}{Mi történik a build folyamatban?}
  \begin{block}{Build = el�'készítés az éles kiadásra}
    Fejlesztés közben a kód sokszor nem optimális formában van --- sok fájl, olvasható változónevek, fejlesztői segédletek. A build folyamat ezeket átalakítja böngészőbarát, gyors formára.
  \end{block}
  \vspace{0.5em}
  \begin{itemize}
    \item \textbf{Minifikálás:} felesleges szóközök, kommentek eltávolítása, változónevek rövidítése --- kisebb fájlméret.
    \item \textbf{Tree-shaking:} a nem használt kód kiszűrése a végleges csomagból.
    \item \textbf{Kódfelosztás:} az alkalmazás több kisebb fájlra bontva töltődik --- csak ami kell, töltődik le.
  \end{itemize}
\end{frame}

\begin{frame}{Környezeti változók}
  \begin{itemize}
    \item Az alkalmazásnak fejlesztési és éles környezetben más beállításokra van szüksége (API URL, kulcsok stb.).
    \item Ezeket \textbf{.env fájlokban} tároljuk --- a \texttt{.env.local} soha nem kerül Git-be (érzékeny adatok).
    \item Vite-ban a \texttt{VITE\_} előtagú változók kerülnek a kliensoldali kódba --- a többi csak szerveroldalon érhető el.
    \item \textbf{Figyelem:} titkos kulcsokat soha ne tegyük a kliensoldali kódba --- bárki láthatja!
  \end{itemize}
\end{frame}

\begin{frame}{Deploy lehet�'ségek}
  \begin{itemize}
    \item \textbf{Vercel, Netlify:} egy Git push-ra automatikusan deployol, ingyen elérhető próbaprojektekhez --- a legegyszerűbb indulás.
    \item \textbf{GitHub Pages:} statikus oldalakhoz, nyílt forráskódú projektekhez kényelmes.
    \item \textbf{Saját szerver / CDN:} Nginx-szel statikus fájlokat tálalunk; fontos az SPA fallback beállítása (minden URL-t az \texttt{index.html}-re irányítunk, a React Router veszi át).
  \end{itemize}
\end{frame}

\begin{frame}{Biztonsági alapok}
  \begin{itemize}
    \item \textbf{XSS (Cross-Site Scripting) elleni védelem:} a React alapból escape-eli a JSX-ben megjelenített szövegeket --- a \texttt{dangerouslySetInnerHTML} viszont kikerüli ezt, csak tisztított adattal szabad használni.
    \item \textbf{Auth token kezelés:} a JWT-t ne \texttt{localStorage}-ban tároljuk --- JavaScript elérheti. HTTP-only cookie biztonságosabb, mert JavaScriptből nem olvasható.
    \item \textbf{Hibamonitorozás:} éles alkalmazásban szükséges eszköz (pl. Sentry), hogy a felhasználóknál fellépő hibákról értesüljünk.
  \end{itemize}
\end{frame}