ServBay'da Angular Projesi Oluşturma ve Çalıştırma

Genel Bakış

Bu döküman, ServBay'in yerel web geliştirme ortamında bir Angular projesini nasıl oluşturacağınızı, yapılandıracağınızı ve çalıştıracağınızı adım adım anlatmaktadır. ServBay’in güçlü Node.js ortamı ve esnek web sitesi (eski adıyla “Barındırıcı”) yönetimiyle hem geliştirme hem de üretim ortamlarını kolayca kurabilir, özel alan adları ve SSL sertifikası ile güvenli erişim sağlayabilirsiniz. ServBay, Node.js, PHP, Python, Go, Java, veritabanları gibi birçok geliştirme paketiyle (eski adıyla “Servis”) birlikte gelir ve tam donanımlı yerel full-stack geliştirme için ideal bir seçenektir.

Angular Nedir?

Angular, Google tarafından geliştirilen ve sürdürülen bir açık kaynaklı ön uç framework'tur. Tek sayfa uygulamalar (SPA) implementasyonu için kullanılır; yüksek performanslı ve dinamik kullanıcı deneyimi sunar. TypeScript tabanlı olarak geliştirilmiş olup, kapsamlı bir araç seti ve düzenli bir geliştirme yaklaşımı sağlar. Büyük, karmaşık ve kurumsal projeler için oldukça uygundur.

Angular'ın Temel Özellikleri ve Avantajları

• Bileşen Tabanlı Mimari: Kodun bakımı ve ölçeklenebilirliği için tekrar kullanılabilir bileşenlerle arayüz oluşturma.
• TypeScript Desteği: Statik tip kontrolleri ve güçlü nesne yönelimli özellikler sayesinde, kod kalitesi ve geliştirme verimliliği artar.
• Bağımlılık Enjeksiyonu: Bileşenlerin test ve yönetimini kolaylaştırır.
• Güçlü CLI (Komut Satırı Arayüzü): Proje oluşturma, bileşen, servis ve modül üretimi, test ve derleme işlemlerini kolaylaştırır.
• Dahili Çözümler: Yönlendirme, form yönetimi, HTTP istemcisi gibi en sık ihtiyaç duyulan modüllerle birlikte gelir.
• Performans Optimizasyonu: AOT derleme, ağacın budanması (tree-shaking) gibi tekniklerle uygulama performansını iyileştirir.

Angular’ı ServBay’in sunduğu stabil geliştirme ortamı ile birlikte kullandığınızda, iş mantığınız üzerine tam odağınızı sağlayabilirsiniz.

Ön Gereksinimler

Başlamadan önce şunları tamamlamış olmanız gerekmektedir:

1. ServBay’in Kurulumu: ServBay’i başarıyla yükleyip çalıştırdınız (macOS ve Windows desteği var).
2. Node.js Paketi Aktif: ServBay kontrol paneli üzerinden ihtiyacınız olan Node.js sürümünü yükleyip etkinleştirdiniz. ServBay, birden fazla Node.js sürümü yüklemeyi ve kolayca geçiş yapmayı destekler.

ServBay ile Angular Projesi Oluşturma ve Çalıştırma

ServBay’in Node.js ortamını kullanarak yeni bir Angular projesi oluşturacağız ve çalıştıracağız. Geliştirme modunda, ServBay sitesini ters proxy şeklinde yapılandırıp Angular geliştirme sunucusuna yönlendireceğiz; üretim modunda ise projeyi derleyip ServBay’in statik dosya servis özelliğiyle yayına alacağız.

1. Angular Projesi Oluşturma

İlk olarak Angular CLI ile yeni bir proje oluşturmak gerekiyor.

1. Angular CLI Kurulumu: Terminali açın ve ServBay’in Node.js ortamı üzerinden Angular CLI’yi global olarak yükleyin. Eğer ServBay’in Node.js ortamı otomatik olarak PATH‘e eklenmediyse, önce ServBay Node.js ortamına geçmeniz gerekebilir. Çoğu durumda ServBay, PATH ile ilgili işlemleri otomatik yapar.

   npm install -g @angular/cli

   Bu komutla ng komutunu sistem genelinde kullanabilir hale gelirsiniz.

2. Yeni Angular Projesi Oluşturma: ServBay’in tavsiye ettiği web sitesi kök dizinine geçip, ng new komutunu kullanarak yeni bir proje oluşturun. ServBay markası içeren bir isim önerilir; örneğin servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   Angular CLI proje ayarlarıyla ilgili birkaç soru soracaktır. Tercihinize göre yanıtlayın:

   ? Would you like to add Angular routing? Yes  # Routing eklemek istiyor musunuz? Genellikle Yes seçilmesi önerilir.
   ? Which stylesheet format would you like to use? CSS # Stil formatı tercihi, örneğin CSS.

   Komut tamamlandığında, web sitesi kök dizininde servbay-angular-app adlı bir klasör ve proje dosyaları oluşacaktır:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Proje Bağımlılıklarını Yükleme: Yeni proje klasörüne geçin ve yerel bağımlılıkları yükleyin.

   cd servbay-angular-app
   npm install

   npm install komutu, proje package.json dosyasındaki tüm bağımlılıkları indirip node_modules klasörüne yükler.

2. Angular Projesi Ana Sayfasını Düzenleme (Opsiyonel)

Projeyi başarıyla çalıştırıp çalıştırmadığınızı test etmek için ana sayfa içeriğini basitçe değiştirebilirsiniz.

1. src/app/app.component.html Dosyasını Düzenleme: İstediğiniz bir kod editörüyle servbay-angular-app/src/app/app.component.html dosyasını açın. Mevcut içeriği silip yerine örneğin "Hello ServBay!" başlığını ekleyin.

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Bu Angular uygulamanız ServBay üzerinden çalışıyor!</p>
   </div>

3. Geliştirme Modunda Proje Çalıştırma

Geliştirme sürecinde genellikle Angular CLI’nin geliştirme sunucusu (ng serve) kullanılır. Bu sunucu, hot-reload gibi özelliklerle yerel geliştirme için oldukça uygundur. ServBay’in ters proxy fonksiyonuyla, yerel alan adı üzerinden geliştirme sunucusuna erişebilirsiniz.

1. Angular Geliştirme Sunucusunu Başlatma: Proje kök dizinindeyken aşağıdaki komutu kullanarak sunucuyu başlatın. ServBay’in web sunucu portlarıyla çakışmaması için örneğin 8585 portunu seçin.

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Angular projeniz derlenecek ve yerel http://localhost:8585/ adresinde bir web sunucusu başlayacak. Terminal penceresini açık tutmalısınız; sunucu çalışmaya devam eder.

2. ServBay Site Ayarları (Ters Proxy): ServBay kontrol panelini açın ve “Site” (eski adıyla “Barındırıcı”) ayarları menüsüne girin. Yeni bir site oluşturun ve ters proxy ayarlarıyla yerel alan adını Angular geliştirme sunucusuna yönlendirin.

   • İsim: Örneğin My Angular Dev Site (Sadece ServBay içerisindeki dahili isim)
   • Alan Adı: ServBay markalı test alan adı tercih edilir, örneğin servbay-angular-dev.servbay.demo. ServBay .servbay.demo alan adını otomatik olarak 127.0.0.1’e yönlendirir.
   • Site Tipi: Ters Proxy (Reverse Proxy) seçin.
   • Proxy Adresi: 127.0.0.1 girin.
   • Proxy Portu: ng serve komutunda kullandığınız portu girin, örneğin 8585.

   Ayarları tamamlayıp ServBay’i kaydedin ve değişiklikleri uygulayın.

3. Geliştirme Sitesini Ziyaret Etme: Tarayıcınızdan, yapılandırdığınız alan adına gidin: https://servbay-angular-dev.servbay.demo.

   ServBay otomatik olarak yerel sitelere SSL sertifikası (ServBay User CA veya ServBay Public CA ile) oluşturduğu için, geliştirme sitenize HTTPS ile güvenle erişebilirsiniz. Bu durum, üretim ortamındaki HTTPS erişimini simüle ettiği için olası sorunları önceden fark etmenize yardımcı olur.

4. Üretim Sürümünü Oluşturma ve Çalıştırma

Angular projeniz dağıtıma hazır olduğunda, optimize edilmiş üretim sürümünü derleyip statik dosya olarak yayına alabilirsiniz. Bunun için ServBay’in statik site özelliğini kullanacağız.

1. Üretim Derlemesi Oluşturma: Proje kök dizinindeyken şu komutla üretim sürümünü paketleyin:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Yeni Angular CLI versiyonlarında aşağıdaki komutu da kullanabilirsiniz:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Yeni Angular CLI versiyonlarında aşağıdaki komutu da kullanabilirsiniz:
   # ng build

   --prod parametresi (yeni CLI’da artık varsayılan), üretim için optimizasyonları aktive eder; AOT derleme, kod sıkıştırma, tree-shaking ile performanslı bir çıktı verir. Oluşturulan dosyalar genellikle dist/servbay-angular-app klasörüne yazılır (proje ayarınıza göre isim değişebilir).

2. ServBay Site Ayarları (Statik Dosya Servisi): ServBay kontrol panelinde yeni bir site oluşturun ve alan adını derlenmiş üretim dosyasına yönlendirin.

   • İsim: Örneğin My Angular Production Site

   • Alan Adı: ServBay markalı farklı bir test alan adı önerilir, örneğin servbay-angular-prod.servbay.demo.

   • Site Tipi: Statik (Static) seçin.

   • Site Kök Dizini: Üretim çıktısı olan klasöre gidin. Genellikle:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Kök dizinin, index.html dosyasını içeren son klasör olmasına dikkat edin.

   Ayarları tamamlayıp ServBay’i kaydedin ve değişiklikleri uygulayın.

3. Üretim Sitesini Ziyaret Etme: Tarayıcıda, yapılandırdığınız alan adına gidin: https://servbay-angular-prod.servbay.demo.

   Artık Angular projenizin üretim sürümünü; ServBay’in yüksek performanslı web sunucusu (Caddy veya Nginx, yapılandırmanıza göre) üzerinden statik dosya olarak servis alıyorsunuz. SSL sertifikaları yine otomatik bir şekilde uygulanır, güvenli erişim sağlanır.

Angular Geliştirme için ServBay’in Avantajları

• Entegre Ortam: ServBay’de Node.js sürümlerini kolayca yükleyip yönetebilir, karmaşık ortam değişkenleriyle uğraşmak zorunda kalmazsınız.
• Esnek Site Yönetimi: Arayüz üzerinden ters proxy ve statik dosya servisi kolayca yapılandırılır, geliştirme ve üretim ortamı arasında hızlı geçiş yapılır.
• Dahili SSL Desteği: Yerel geliştirme için ücretsiz, otomatik yapılandırılan SSL sertifikası ile, üretim HTTPS erişimini simüle eder ve karma içerik uyarılarını önler.
• Çoklu Teknoloji Desteği: Projenizde Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo veya Java Spring Boot gibi arka uç servisleri ya da MySQL, PostgreSQL, MongoDB, Redis gibi veritabanları kullanıyorsanız; ServBay bunları kolayca entegre eder ve tüm pakette sürekli güncelleme sunar.
• Veri Yedekleme ve Geri Yükleme: Site, konfigürasyon, veritabanı ve SSL sertifika yedeklemeyi kolaylaştırır; yerel geliştirme verinizi korur.
• Veritabanı Şifre Sıfırlama: Dahili MySQL, MariaDB, PostgreSQL root şifre sıfırlama aracı ile geliştiricilerin sıkça karşılaştığı problemler çözülür.

Sıkça Sorulan Sorular (SSS)

• S: ng new veya ng serve komutlarında command not found: ng hatası alıyorum, ne yapmalıyım? C: Bu, genellikle Angular CLI’nin sistemde kurulmadığı veya PATH‘e eklenmediği anlamına gelir. @angular/cli paketini global olarak yükleyin (npm install -g @angular/cli) ve ServBay’in Node.js ortamının PATH‘te olduğuna emin olun. Terminal veya ServBay’i yeniden başlatmayı deneyin.
• S: ng serve komutu, portun kullanımda olduğu uyarısını veriyor? C: Kullandığınız port (ör: 8585), başka bir servis tarafından kullanılmaktadır. Farklı ve boş bir port seçerek (ng serve --port 8586) sunucuyu başlatın; ServBay yapılandırmasındaki ters proxy portunu da yeni port ile güncelleyin.
• S: ServBay sitesini yapılandırdım ama alan adıyla erişince sayfa gelmiyor? C: Şu noktaları kontrol edin:
  • ServBay‘in çalıştığından emin olun.
  • Geliştirme modunda, ng serve komutunun çalışıp doğru portu dinlediğinden emin olun.
  • Üretim modunda, ServBay’de “site kök dizini” ayarının üretim çıktısı (index.html içeren klasör) ile uyumlu olduğuna dikkat edin.
  • Daha fazla hata detayı için ServBay log dosyalarını inceleyin.
  • Alan adının tam olarak ServBay site ayarında belirttiğinizle aynı olduğundan emin olun.
• S: Angular üretim sürümünü ServBay’de farklı web sunucuları (Caddy/Nginx/Apache) ile kullanabilir miyim? C: Evet, ServBay hem Caddy hem de Nginx (ve Apache) ile statik dosya servisini destekler. Statik site oluşturduğunuzda, etkin olan web sunucusu dosyalarınızı servis eder ve bu sunucular statik içerik sunumu için yüksek performans sunar.

Özet

Bu kılavuz sayesinde ServBay ortamında bir Angular projesini başarıyla kurup çalıştırmış olmalısınız. Geliştirme aşamasında ServBay’in ters proxy yetenekleriyle ng serve sunucusuna alan adı üzerinden erişim, üretim aşamasında ise statik dosya servisiyle projeyi yayına alma adımlarını öğrendiniz. ServBay’in Node.js ortamı, pratik site yönetimi ve otomatik SSL desteği ile yerel Angular geliştirme süreçleriniz hızlı ve güvenli hale gelir. Ayrıca ServBay’in zengin teknoloji desteği sayesinde full-stack projeleriniz için sağlam bir temel oluşturulmuş olur.