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

Genel Bakış

Bu doküman, ServBay yerel web geliştirme ortamında bir Angular projesinin nasıl oluşturulacağı, yapılandırılacağı ve çalıştırılacağı konusunda sizi adım adım yönlendirmeyi amaçlamaktadır. ServBay’in sunduğu güçlü Node.js ortamı ve esnek site (eski adıyla “host”) yönetim özelliklerinden yararlanarak, geliştirme ve üretim ortamlarını kolayca kuracak, özelleştirilmiş alan adları ve SSL sertifikaları ile güvenli erişim sağlayacaksınız. ServBay; Node.js, PHP, Python, Go, Java, veritabanları gibi çok sayıda geliştirme paketi (eski adıyla “servis”) entegre olarak gelir ve tam kapsamlı yerel full stack geliştirme için ideal bir çözüm sunar.

Angular Nedir?

Angular, Google tarafından geliştirilen ve sürdürülen, yüksek performanslı ve dinamik tek sayfalı uygulamalar (SPA) inşa etmek için kullanılan açık kaynaklı bir frontend framework’üdür. TypeScript tabanlıdır ve kapsamlı bir araç setiyle büyük ve karmaşık kurumsal uygulamalar geliştirmek için yapılandırılmış, organize bir yaklaşım sağlar.

Angular’ın Temel Özellikleri ve Avantajları

• Bileşen Tabanlı Mimari: Yeniden kullanılabilir bileşenlerle kullanıcı arayüzü oluşturma, kodun sürdürülebilirliğini ve ölçeklenebilirliğini artırır.
• TypeScript Desteği: Statik tip kontrolü ve gelişmiş nesne yönelimli yapılarıyla kod kalitesi ve geliştirme verimliliği yükselir.
• Bağımlılık Enjeksiyonu: Bileşenlerin test edilmesini ve bağımlılıkların yönetilmesini kolaylaştırır.
• Güçlü CLI (Komut Satırı Arayüzü): Proje oluşturma, bileşen, servis ve modül üretme ile derleme, test gibi iş akışlarını hızlı ve kolay hale getirir.
• Yerleşik Çözümler: Yönlendirme, form yönetimi, HTTP istemcisi gibi yaygın ihtiyaçlar için entegre modüller barındırır.
• Performans Optimizasyonu: AOT (Zamanında Derleme), Tree-shaking gibi teknikleri destekleyerek uygulama performansını artırır.

ServBay’in sağlam ortamı ile Angular’ı kullandığınızda, geliştirme sırasında iş mantığına daha fazla odaklanabilirsiniz.

Ön Koşullar

Başlamadan önce aşağıdaki hazırlıkları tamamladığınızdan emin olun:

1. ServBay Kurulumu: macOS’a ServBay’i başarıyla kurup başlattınız.
2. Node.js Paketini Etkinleştirme: ServBay kontrol panelinde, gereken Node.js sürüm paketinin kurulu ve aktif olduğundan emin olun. ServBay, birden fazla Node.js sürümünü yükleyip kolayca değiştirmenizi sağlar.

ServBay ile Angular Projesi Kurma ve Çalıştırma

Angular projesini, ServBay'in Node.js ortamı üzerinde oluşturup çalıştıracağız. Geliştirme modunda, ServBay’in site yönetimiyle reverse proxy ayarı yaparak Angular geliştirme sunucusunu bir yerel alan adına yönlendireceğiz; üretim modunda ise projeyi derleyip statik dosya servisinden sunacağız.

1. Angular Projesi Oluşturma

İlk olarak, Angular CLI kullanarak yeni bir proje oluşturalım.

1. Angular CLI Kurulumu: Terminal’i açıp, ServBay’in Node.js ortamıyla global olarak Angular CLI yükleyin. Eğer ServBay Node.js ortamınız sistem PATH'ine otomatik eklenmediyse, önce Node.js ortamınızı ServBay üzerinden aktive etmelisiniz. Çoğu durumda ServBay bu işlemi kendisi yapar.

   npm install -g @angular/cli

   Bu komut, ng komutunu sistemde global olarak kurar ve Angular CLI’yı her yerde kullanmanıza olanak tanır.

2. Yeni Angular Projesi Oluşturma: ServBay’in önerdiği site kök dizini olan /Applications/ServBay/www klasörüne geçin ve ng new komutuyla yeni bir Angular projesi oluşturun. ServBay markasını yansıtan bir isim önerebiliriz, örneğin servbay-angular-app.

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

   Angular CLI, size proje ayarlarıyla ilgili bazı sorular soracaktır. Talimatları izleyerek tercihleriniz doğrultusunda seçim yapın:

   ? Would you like to add Angular routing? Yes  # Yönlendirme özelliği eklensin mi, tavsiye edilir.
   ? Which stylesheet format would you like to use? CSS # Stil şeması seçimi, örneğin CSS

   Komut tamamlandığında, Angular CLI /Applications/ServBay/www dizini altında servbay-angular-app isimli bir klasör oluşturacaktır ve temel proje yapısını burada bulacaksınız.

3. Proje Bağımlılıklarını Kurma: Yeni oluşturulan proje dizinine girin ve paketin ihtiyaç duyduğu tüm yerel bağımlılıkları kurun.

   cd servbay-angular-app
   npm install

   npm install komutu, proje dizininde yer alan package.json dosyasındaki bağımlılıkları indirerek node_modules klasörüne yükler.

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

Projenin başarılı şekilde çalıştığını doğrulamak için ana sayfa içeriğini sadece bir başlık gösterecek şekilde değiştirebilirsiniz.

1. src/app/app.component.html Dosyasını Düzenleme: Sevdiğiniz bir kod editörü ile servbay-angular-app/src/app/app.component.html dosyasını açın. İçeriği kaldırıp aşağıdaki örnekte olduğu gibi kısa bir karşılama başlığı ve mesajı ekleyin:

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

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

Geliştirme sürecinde genellikle Angular CLI’nın geliştirme sunucusu (ng serve) kullanılır. Bu sunucu hızlı güncellemeler ve sıcak yeniden yükleme sunar. Ardından, ServBay’in reverse proxy özelliğiyle yerel bir alan adı üzerinden bu sunucuya erişim sağlanır.

1. Angular Geliştirme Sunucusunu Başlatma: Proje kök dizinindeyken (/Applications/ServBay/www/servbay-angular-app), geliştirme sunucusunu başlatacak şu komutu girin. Yakınlarda bir port (örneğin 8585) kullanmak, ServBay’in varsayılan web sunucu portu ile çakışmayı önler.

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

   Komut, Angular projenizi derler ve yerel olarak http://localhost:8585/ adresinde bir web sunucusu başlatır. Terminal penceresi açık kalmalıdır; sunucu kapandığında uygulamanız durur.

2. ServBay Web Sitesi (Reverse Proxy) Yapılandırması: ServBay kontrol paneline gidin, “Site” (eski adıyla “Host”) ayarları bölümüne geçin. Yeni bir site ekleyin, reverse proxy ile belirleyeceğiniz alan adını ng serve ile başlattığınız sunucuya yönlendirin.

   • İsim (Name): Örneğin My Angular Dev Site (sadece ServBay’in arayüzünde görünür)
   • Alan Adı (Domain): ServBay markalı bir test alan adını kullanabilirsiniz, örneğin servbay-angular-dev.servbay.demo. ServBay, .servbay.demo alan adlarını otomatik olarak yerel 127.0.0.1 IP’sine yönlendirir.
   • Site Türü (Website Type): Ters Proxy (Reverse Proxy) seçin.
   • Proxy Adresi (Proxy Address): 127.0.0.1 yazın.
   • Proxy Portu (Proxy Port): ng serve ile kullandığınız portu girin, örneğin 8585.

   Ayarları kaydedip ServBay’de etkinleştirin.

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

   ServBay, yerel siteleriniz için otomatik SSL sertifikası (ServBay User CA veya ServBay Public CA ile) oluşturup kurduğu için, doğrudan HTTPS üzerinden güvenli bir şekilde geliştirme ortamınıza erişebilirsiniz. Bu sayede, üretim ortamında oluşabilecek HTTPS ile ilgili potansiyel sorunları erkenden tespit edebilirsiniz.

4. Üretim Sürümünü Derleyip Servis Etme

Angular projenizi tamamladıysanız ve dağıtıma hazır hale getirmek istiyorsanız, optimize edilmiş bir üretim sürümü (statik dosyalar) oluşturmalısınız. Bu dosyaları ServBay’in statik web sunucusu ile yayınlayacağız.

1. Üretim Sürümünü Derlemek: Proje kök dizininde (/Applications/ServBay/www/servbay-angular-app) şu komutu çalıştırın:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Veya Angular CLI'nin yeni sürümlerinde:
   # ng build

   --prod bayrağı (yeni CLI sürümlerinde varsayılan olarak aktiftir) üretim optimizasyonlarını (AOT derleme, kod sıkıştırma, Tree-shaking vb.) etkinleştirir. Derleme tamamlanınca statik dosyalar, proje dizinindeki dist/servbay-angular-app klasörüne çıkar (alt klasör ismi proje ayarlarınıza göre değişebilir).

2. ServBay Static Site Yapılandırması: ServBay kontrol panelinde “Site” ayarlarına gidin. Yeni bir site ekleyin ve bir yerel alan adını, demin oluşturduğunuz statik dosya dizinine yönlendirin.

   • İsim (Name): Örneğin My Angular Production Site
   • Alan Adı (Domain): ServBay markalı farklı bir test alan adı önerilir, örneğin servbay-angular-prod.servbay.demo.
   • Site Türü (Website Type): Statik (Static) seçin.
   • Site Kök Dizini (Website Root Directory): Projenin derleme çıktısının yolu: genellikle /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app olur. Mutlaka index.html dosyasının bulunduğu son dizini işaret edin.

   Ayarlarınızı kaydedip ServBay’de etkinleştirin.

3. Üretim Sitesini Ziyaret Etme: Tarayıcıda, ayarladığınız alan adına örnek olarak https://servbay-angular-prod.servbay.demo ziyaret edin.

   Artık, Angular projenizin üretim sürümünü, ServBay’in yüksek performanslı web sunucusu (Caddy, Nginx veya sizin tercihinize göre) aracılığıyla statik dosya olarak erişebilirsiniz. ServBay, burada da otomatik SSL konfigürasyonu sağlar.

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

• Tümleşik Ortam: ServBay’de Node.js sürümlerini rahatça yükleyip yönetin, karmaşık ortam değişkenleriyle uğraşmanıza gerek kalmaz.
• Esnek Site Yönetimi: Reverse proxy ve statik dosya servisini sezgisel arayüzde kolayca ayarlayarak geliştirme ve üretim ortamları arasında hızlıca geçiş yapın.
• Yerleşik SSL Desteği: Yerel geliştirme ortamları için ücretsiz otomatik SSL sertifikalarıyla, tıpkı canlı ortamda olduğu gibi güvenli HTTPS erişimi kolayca simüle edin ve karışık içerik uyarılarından kurtulun.
• Çoklu Teknoloji Desteği: Projeniz backend API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot vb.) veya veritabanı (MySQL, PostgreSQL, MongoDB, Redis) gerektiriyorsa, ServBay bu servisleri de kolayca entegre edebilir ve eksiksiz bir yerel full stack ortamı sunar. ServBay tüm bu paketleri aktif olarak günceller; daha önce eksik olan işlevler de artık tam desteklidir.
• Veri Yedekleme ve Geri Yükleme: Ayarların, sitelerin, veritabanlarının ve SSL sertifikalarının kolay yedeklenmesiyle yerel geliştirme verilerinizin güvenliği korunur.
• Veritabanı Şifre Sıfırlama: MySQL, MariaDB, PostgreSQL gibi veritabanlarında root şifresini sıfırlayabilmek için yerleşik araçlar içerir; sıkça karşılaşılan bu zorlukları hızlıca aşmanızı sağlar.

Sıkça Sorulan Sorular (SSS)

• S: ng new veya ng serve çalıştırdığımda command not found: ng uyarısı alıyorum, ne yapmalıyım? C: Bu durumda Angular CLI düzgün kurulmamış ya da sistem PATH'inde görünmüyor demektir. @angular/cli'yi global olarak yüklediğinizden emin olun (npm install -g @angular/cli) ve ServBay’in Node.js ortamının PATH’te etkin olduğundan emin olun. Terminal veya ServBay’i yeniden başlatmayı deneyebilirsiniz.
• S: ng serve başlatılamıyor ve port kullanımda hatası veriyor, ne yapmalıyım? C: Kullanmak istediğiniz port (ör. 8585) başka bir süreç tarafından kullanılıyordur. Farklı kullanılmayan bir port belirlemek için ng serve --port 8586 gibi farklı bir port kullanabilir ve ServBay’de reverse proxy portunu güncelleyebilirsiniz.
• S: ServBay site yapılandırmasını tamamladım, ancak alan adını ziyaret ettiğimde sayfa açılmıyor. Ne önerirsiniz? C: Şu maddeleri kontrol edin:
  • ServBay’in çalıştığından emin olun.
  • Geliştirme modunda, ng serve komutunun aktif ve seçtiğiniz portta çalıştığını ve ServBay reverse proxy yapılandırmasıyla uyumlu olduğunu kontrol edin.
  • Üretim modunda, ServBay'deki “site kök dizini” ayarının, derlenmiş ve index.html dosyasını içeren doğru klasörü gösterdiğinden emin olun (dist/proje-ismi).
  • ServBay’in log dosyasında daha fazla detay olup olmadığını inceleyin.
  • Tarayıcıda ziyaret ettiğiniz alan adının, ServBay’deki yapılandırmayla tam olarak aynı olduğundan emin olun.
• S: Angular’ın üretim sürümünü ServBay’in farklı web sunucuları (Caddy/Nginx/Apache) ile yayınlayabilir miyim? C: Evet, ServBay Caddy ve Nginx (veya Apache) üzerinden statik dosya servisi destekler. Siteyi statik olarak yapılandırdığınızda, aktif olan web sunucusunu otomatik kullanır ve ilgili dosyaları hızlıca yayınlar.

Sonuç

Bu rehber sayesinde, ServBay ortamında sıfırdan bir Angular projesi kurup çalıştırmayı öğrendiniz. Geliştirme aşamasında ServBay’in reverse proxy ile yerel domain üzerinden ng serve’i kullanmayı ve dağıtım aşamasında projenizi derleyip ServBay’in statik dosya servisiyle canlıya almayı başardınız. ServBay’in sunduğu Node.js ortamı, kullanıcı dostu site yönetimi ve otomatik SSL desteği ile, yerel Angular projenizin geliştirme süreci çok daha verimli ve sorunsuz geçecektir. ServBay’in çoklu teknoloji yığını desteğiyle, full stack geliştiriciliğe sağlam bir temel atmış olacaksınız.