FRONTEND DEPLOYMENT • REACT & VITE

Ghid Deploy React (Vite) folosind Git & GitHub

Acest ghid descrie pașii completi pentru publicarea aplicației React (creată cu Vite) pe subdomeniul react-demo.bytebook.xyz, de la codul din VS Code pe Mac până la servirea fișierelor statice prin Caddy pe VPS.

1. Pregătirea Proiectului pe Mac (în VS Code)

A. Creează Proiectul React cu Vite

Deschide Terminalul pe Mac și rulează comanda oficială de generare:

npm create vite@latest react-demo -- --template react
cd react-demo
npm install

B. Adaugă Codul Demo (src/App.jsx)

În VS Code, deschide fișierul src/App.jsx și înlocuiește tot conținutul cu:

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{
      fontFamily: 'system-ui, sans-serif',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '100vh',
      backgroundColor: '#0f172a',
      color: '#f8fafc'
    }}>
      <h1>React App pe VPS 🚀</h1>
      <p>Salut Alin! Aplicația ta React funcționează perfect prin Git!</p>
      
      <button 
        onClick={() => setCount(count + 1)}
        style={{
          padding: '12px 24px',
          fontSize: '16px',
          fontWeight: 'bold',
          borderRadius: '8px',
          border: 'none',
          backgroundColor: '#38bdf8',
          color: '#0f172a',
          cursor: 'pointer',
          marginTop: '20px'
        }}
      >
        Ai apăsat de {count} ori
      </button>
    </div>
  );
}

C. Creează Repository-ul pe GitHub.com

Intră pe GitHub.com → New repository.
Repository name: react-demo
Privacy: Private sau Public.
Nu bifa nicio opțiune de inițializare (Add README, .gitignore).
Apasă pe Create repository și copiază URL-ul HTTPS.

D. Pregătește Fișierul .gitignore

Vite creează automat un fișier .gitignore. Verifică să conțină cel puțin:

node_modules/
dist/
.DS_Store
.vscode/

E. Inițializează Git și Trimite Codul pe GitHub

git init
git add .
git commit -m "Initial commit - aplicatie React"
git branch -M main
git remote add origin https://github.com/UTILIZATORUL_TAU/react-demo.git
git push -u origin main

2. Configurare Advanced DNS (Namecheap)

• Type: A Record

• Host: react-demo

• Value: 63.250.40.142 (IP-ul VPS-ului)

• TTL: Automatic

3. Clonare, Instalare și Build pe VPS

ssh root@63.250.40.142

cd /root/projects
git clone https://github.com/UTILIZATORUL_TAU/react-demo.git

cd /root/projects/react-demo
npm install
npm run build

Această comandă va genera folderul /root/projects/react-demo/dist.

4. Configurare Caddy Server (Servire fișiere statice)

Deoarece aplicațiile React nu au un server de backend în fundal, NU aveți nevoie de un fișier de serviciu systemd. Caddy se va ocupa direct de servirea rapidă a fișierelor statice.

nano /etc/caddy/Caddyfile

Adaugă blocul pentru subdomeniul React (indicând folderul dist):

react-demo.bytebook.xyz {
    root * /root/projects/react-demo/dist
    file_server
    try_files {path} /index.html
}

Directiva try_files este esențială pentru ca rutele interne de React / React Router să nu dea eroare 404.

Reîncarcă Caddy:

systemctl reload caddy

5. Testare și Update-uri pe Viitor

Testare

Accesează în browser: https://react-demo.bytebook.xyz

Cum faci update când modifici codul pe Mac (în VS Code):

1. Pe Mac (în VS Code Terminal):

git add .
git commit -m "Update interfata React"
git push

2. Pe VPS (prin SSH):

cd /root/projects/react-demo
git pull && npm install && npm run build

Nu este nevoie de repornirea vreunui serviciu sau a lui Caddy – Caddy va citi instant noile fișiere din folderul dist!