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:
- ServBay’in Kurulumu: ServBay’i başarıyla yükleyip çalıştırdınız (macOS ve Windows desteği var).
- 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.
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.
bashnpm install -g @angular/cli
1Bu komutla
ng
komutunu sistem genelinde kullanabilir hale gelirsiniz.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ğinservbay-angular-app
.macOS:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2Angular 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.
1
2Komut 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
- macOS:
Proje Bağımlılıklarını Yükleme: Yeni proje klasörüne geçin ve yerel bağımlılıkları yükleyin.
bashcd servbay-angular-app npm install
1
2npm install
komutu, projepackage.json
dosyasındaki tüm bağımlılıkları indiripnode_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.
src/app/app.component.html
Dosyasını Düzenleme: İstediğiniz bir kod editörüyleservbay-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.html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>Bu Angular uygulamanız ServBay üzerinden çalışıyor!</p> </div>
1
2
3
4
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.
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:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2Angular 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.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ğin8585
.
Ayarları tamamlayıp ServBay’i kaydedin ve değişiklikleri uygulayın.
- İsim: Örneğin
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.
Üretim Derlemesi Oluşturma: Proje kök dizinindeyken şu komutla üretim sürümünü paketleyin:
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # Yeni Angular CLI versiyonlarında aşağıdaki komutu da kullanabilirsiniz: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # Yeni Angular CLI versiyonlarında aşağıdaki komutu da kullanabilirsiniz: # ng build
1
2
3
4--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 genellikledist/servbay-angular-app
klasörüne yazılır (proje ayarınıza göre isim değişebilir).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.- macOS:
Ayarları tamamlayıp ServBay’i kaydedin ve değişiklikleri uygulayın.
Ü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
veyang serve
komutlarındacommand 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.