FRONTEND DEPLOYMENT • ANGULAR & CLI

Ghid Deploy Angular folosind Git & GitHub

Acest ghid descrie pașii completi pentru publicarea aplicației Angular pe subdomeniul angular-demo.bytebook.xyz, pornind de la codul creat pe Mac în Visual Studio Code, urcarea pe GitHub și compilarea/servirea statică prin Caddy pe VPS.

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

A. Instalează Angular CLI și Creează Proiectul

Deschide Terminalul pe Mac (sau în VS Code) și instalează Angular CLI global (dacă nu îl ai deja):

npm install -g @angular/cli

Apoi creează un proiect nou Angular numit angular-demo:

ng new angular-demo --style=css --routing=true --ssr=false
cd angular-demo

B. Adaugă Codul Demo (src/app/app.component.ts)

În VS Code, deschide fișierul src/app/app.component.ts și înlocuiește conținutul cu următoarea componentă simplă:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: #0f172a; color: #f8fafc;">
      <h1>Angular App pe VPS 🚀</h1>
      <p>Salut Alin! Aplicația ta Angular funcționează perfect prin Git!</p>
      
      <button 
        (click)="increment()"
        style="padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 8px; border: none; background-color: #dd0031; color: #ffffff; cursor: pointer; margin-top: 20px;">
        Ai apăsat de {{ count }} ori
      </button>
    </div>
  `
})
export class AppComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

C. Creează Repository-ul pe GitHub.com

Intră pe GitHub.com → New repository.
Repository name: angular-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 afișat.

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

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

node_modules/
dist/
.DS_Store
.vscode/
.angular/

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

Deschide terminalul integrat în VS Code în folderul angular-demo și rulează:

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

2. Configurare Advanced DNS (Namecheap)

• Type: A Record

• Host: angular-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/angular-demo.git

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

Notă: Versiunile recente de Angular vor genera fișierele de producție în folderul /root/projects/angular-demo/dist/angular-demo/browser (sau /root/projects/angular-demo/dist/angular-demo). Verifică folderul cu ls dist/angular-demo.

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

Deoarece aplicațiile Angular sunt compilate în fișiere statice (HTML/JS/CSS), NU aveți nevoie de un fișier de serviciu systemd.

nano /etc/caddy/Caddyfile

Adaugă blocul pentru subdomeniul Angular (indicând folderul de fișiere statice compilate):

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

(Punctul exact al folderului root depinde de structura generată de Angular. Dacă folderul /browser nu există, folosește /root/projects/angular-demo/dist/angular-demo).

Reîncarcă Caddy:

systemctl reload caddy

5. Testare și Update-uri pe Viitor

Testare

Accesează în browser: https://angular-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 Angular"
git push

2. Pe VPS (prin SSH):

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

Caddy va servi instant noile fișiere actualizate din folderul dist fără repornire.