macOS Üzerinde ServBay ile Vue.js Projesi Oluşturma ve Çalıştırma

Vue.js, kullanıcı arayüzleri oluşturmak için kullanılan popüler ve aşamalı bir JavaScript framework'üdür. Kolay öğrenilebilir, esnek ve yüksek performanslı olmasıyla özellikle tek sayfalı uygulamalar (SPA) geliştirmek için oldukça uygundur. Güçlü bir yerel web geliştirme ortamı olan ServBay, geliştiricilere kolayca Node.js desteği sunarak macOS üzerinde Vue.js geliştirmeyi ideal bir deneyime dönüştürür.

Bu rehberde, ServBay’nin entegre ortamı sayesinde sıfırdan bir Vue.js projesinin nasıl oluşturulup geliştirici ve üretim modunda ServBay aracılığıyla nasıl erişileceğini adım adım öğreneceksiniz.

Vue.js Nedir?

Vue.js, kullanıcı arayüzleri oluşturmak için geliştirilmiş aşamalı bir JavaScript framework’üdür. Diğer büyük framework'lerin aksine, Vue tabandan yukarıya doğru kademeli geliştirmeyi benimser. Çekirdek kütüphanesi yalnızca görünüm katmanına odaklanır; kolay öğrenilmesiyle birlikte üçüncü parti kütüphaneler ve mevcut projelerle entegre edilebilir. Vue.js’in en güncel versiyonu olan Vue 3 ise daha hızlı performans, daha küçük paket boyutu ve daha iyi TypeScript desteği gibi birçok yenilik ve iyileştirmeyle birlikte gelir.

Vue 3’ün Başlıca Özellikleri ve Avantajları

• Composition API: Mantıksal kodun fonksiyonlar yoluyla organize edilmesini sağlar; böylece büyük bileşenlerde kodların yeniden kullanımı ve yönetimi kolaylaşır.
• Performans İyileştirmeleri: Vue 3, reaktif sistemi Proxy nesneleri ile inşa eder ve sanal DOM algoritmasını optimize ederek ciddi performans artışı sağlar.
• Daha Küçük Paket Boyutu: Tree-shaking teknolojisi ile Vue 3'ün çekirdek kütüphanesi daha hafif ve hızlı yüklenir.
• Gelişmiş TypeScript Desteği: Vue 3, TypeScript tip tanımlamalarıyla gelişmiş destek sunar ve TypeScript ile proje geliştirmeyi kolaylaştırır.
• İyileştirilmiş Bileşen Yaşam Döngüsü: Yeni yaşam döngüsü kancaları ve Setup fonksiyonu sayesinde bileşen mantığı çok daha şeffaf ve yönetilebilir hale gelir.

Vue 3 kullanarak, modern ve hızlı web uygulamalarını çok daha verimli şekilde geliştirebilirsiniz.

ServBay Entegre Ortamı ile Vue.js Projesi Oluşturma ve Çalıştırma

Bu yazıda, ServBay’in sunduğu Node.js ortamında yeni bir Vue.js projesi oluşturmayı ve çalıştırmayı öğreneceksiniz. ServBay’in Websitesi özelliğinden faydalanarak web sunucunuzu yapılandırabilir, projeyi yerelde ters proxy ve statik dosya servisiyle erişilebilir kılabilirsiniz.

Ön Koşullar

Başlamadan önce aşağıdakileri tamamladığınızdan emin olun:

1. ServBay Kurulumu: macOS üzerine ServBay yerel geliştirme ortamını kurdunuz.
2. Node.js Paketinin Kurulması: ServBay’in paket yönetimi özelliği üzerinden Node.js paketini yüklediniz. Detaylar için şu rehbere bakabilirsiniz: ServBay’de Node.js’in Kurulumu ve Kullanımı.

Vue.js Projesi Oluşturma

1. Projeyi Başlatma

   Öncelikle terminal uygulamanızı açın. ServBay, site projelerinizi /Applications/ServBay/www dizininde tutmanızı önerir. Bu dizine girin ve npm create vue@latest komutuyla yeni bir Vue.js projesi başlatın. @latest, en güncel Vue CLI veya create-vue aracını kullandığınızdan emin olur ve genellikle Vue 3 projesi oluşturur.

   cd /Applications/ServBay/www
   npm create vue@latest

   Terminaldeki yönergeleri takip ederek proje adını girin (örneğin servbay-vue-app önerilir) ve TypeScript, Vue Router, Pinia gibi fonksiyonları ihtiyacınıza göre ekleyin. Örnek bir yapılandırma aşağıda verilmiştir:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # İhtiyaca göre Yes veya No seçin
   ✔ Add JSX Support? … No # İhtiyaca göre Yes veya No seçin
   ✔ Add Vue Router for Single Page Application development? … Yes # Yes seçimi tavsiye edilir
   ✔ Add Pinia for state management? … No # İhtiyaca göre Yes veya No seçin
   ✔ Add Vitest for Unit testing? … No # İhtiyaca göre Yes veya No seçin
   ✔ Add an End-to-End Testing Solution? … No # İhtiyaca göre Yes veya No seçin
   ✔ Add ESLint for code quality? … Yes # Yes seçimi tavsiye edilir
   ✔ Add Prettier for code formatting? … Yes # Yes seçimi tavsiye edilir
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # İhtiyaca göre Yes veya No seçin

2. Bağımlılıkları Kurma

   Proje başlatıldıktan sonra, yeni oluşturulan servbay-vue-app dizinine girin ve npm install komutuyla gereken tüm bağımlılıkları yükleyin.

   cd servbay-vue-app
   npm install

Proje Örnek İçeriğini Değiştirme (Opsiyonel)

Projeyi başarıyla çalıştırabildiğinizi doğrulamak için, src/App.vue dosyasındaki varsayılan içeriği basit bir "Hello ServBay!" çıktısıyla değiştirebilirsiniz.

Proje dizinindeki src/App.vue dosyasını açın ve içeriğini aşağıdaki şekilde değiştirin:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Bu, ServBay üzerinden çalışan bir Vue.js uygulamasıdır.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Geliştirme Ortamı Ayarlama (Ters Proxy Kullanımı)

Vue projeleri geliştirme modunda genellikle lokal bir geliştirme sunucusu (Vite veya Webpack tabanlı) başlatır ve sıcak modül yenileme (HMR) gibi özelliklerle geliştirmeyi kolaylaştırır. ServBay, bir yerel alan adını bu geliştirme sunucusunun adres ve portuna ters proxy ile yönlendirebilir.

1. Geliştirme Sunucusunu Çalıştırma

   Proje kök dizinindeyken aşağıdaki komut ile geliştirme sunucunuzu başlatın. --port parametresiyle (örneğin: 8585) kullanılmayan bir port seçtiğinizden emin olun.

   npm run dev -- --port 8585

   Terminal, geliştirme sunucusunun başlatıldığını ve örneğin http://localhost:8585 adresinde dinlediğini gösterecektir.

2. ServBay’de Ters Proxy Site Yapılandırma

   ServBay uygulamasında, Websitesi ayarlarına gidin. Yeni bir site yapılandırması ekleyin ve tür olarak Ters Proxy seçin:

   • Adı: My first Vue dev site (veya kolay tanıyacağınız başka bir isim)
   • Alan Adı: servbay-vue-dev.servbay.demo (veya tercih ettiğiniz başka bir .servbay.demo alan adı)
   • Site Türü: Ters Proxy
   • Ters Proxy Hedef IP: 127.0.0.1
   • Ters Proxy Hedef Portu: 8585 (geliştirme sunucusunu başlatırken kullandığınız port ile aynı olmalı)

   Ayarları kaydettikten sonra, ServBay web sunucu yapılandırmasını (Caddy veya Nginx) otomatik olarak günceller ve servbay-vue-dev.servbay.demo alan adı üzerinden gelen istekleri http://127.0.0.1:8585 adresine yönlendirir.

   ServBay’de Node.js geliştirme sitesi eklemeyle ilgili ayrıntılı adımlar için şu rehberi inceleyin: ServBay’de Node.js Geliştirme Sitesi Ekleme.

3. Geliştirme Modundaki Uygulamaya Erişim

   ServBay’in web sunucusunun çalıştığından emin olun. Tarayıcınızda az önce tanımladığınız https://servbay-vue-dev.servbay.demo alan adını ziyaret edin.

   ServBay, yerel alan adları için otomatik SSL sertifikası (ServBay User CA veya ServBay Public CA) oluşturduğundan, sitenizi doğrudan güvenli HTTPS üzerinden ziyaret edebilirsiniz. Bu, üretim ortamına daha yakın bir test imkanı sağlar. SSL ayarları ile ilgili detaylar için ServBay’de Site İçin SSL Sertifikası Kullanımı rehberine bakabilirsiniz.

   Artık tarayıcınızda Vue uygulamanızın geliştirme modunda çalıştığını görmeli ve kod değişikliklerinde sıcak yenileme avantajlarından yararlanabilmelisiniz.

Üretim Sürümü Oluşturma ve Dağıtma (Statik Site Servisi Kullanımı)

Vue.js projeleriniz geliştirme aşamasını tamamladığında ve dağıtılmaya hazır olduğunda, üretime uygun optimize bir sürüm oluşturmanız gerekir. Bu sürüm genellikle statik dosyalardan (HTML, CSS, JavaScript vb.) oluşur ve ServBay’in statik site özelliğiyle kolayca sunulabilir.

1. Üretim Sürümü Oluşturma

   Proje kök dizininde, üretim derlemesi için aşağıdaki komutu çalıştırın:

   npm run build

   Oluşturma işlemi sonunda projede optimize – paketlenmiş statik dosyalar, genellikle dist klasöründe yer alır.

2. Statik Dosya Sunma Yapılandırması

   ServBay uygulamasında, Websitesi ayarlarına gidin. Yeni bir site ekleyin ve türünü Statik olarak seçin:

   • Adı: My first Vue production site (veya kolay tanıyacağınız başka bir isim)
   • Alan Adı: servbay-vue-prod.servbay.demo (veya arzu ettiğiniz başka bir .servbay.demo alan adı)
   • Site Türü: Statik
   • Site Kök Dizin: /Applications/ServBay/www/servbay-vue-app/dist (projede dist klasörüne tam yol ile işaret etmelidir)

   Kaydettikten sonra, ServBay web sunucusunu bu dist dizinindeki statik dosyaları doğrudan sunacak şekilde yapılandırır.

3. Üretim Modundaki Uygulamaya Erişim

   ServBay web sunucusunun çalıştığından emin olun. Tarayıcıda üretim için belirlediğiniz alan adını https://servbay-vue-prod.servbay.demo ziyaret edin.

   Görüntülediğiniz artık Vue uygulamanızın optimize edilmiş, en iyi yükleme performansına sahip üretim sürümüdür. ServBay’in özel alan adı ve otomatik SSL özellikleriyle siteyi yerelde güvenli şekilde önizleyebilirsiniz.

Dikkat Edilecek Noktalar

• Port Çakışması: Eğer npm run dev ile belirlediğiniz 8585 portu (veya tercih ettiğiniz başka bir port) başka bir program tarafından kullanılıyorsa, komut hata verir. Kullanılmayan bir port deneyin ve ServBay ters proxy ayarını da buna göre güncelleyin.
• ServBay Web Sunucu Durumu: ServBay’in web sunucusunun (Caddy veya Nginx, yapılandırmanıza bağlı olarak) çalıştığından emin olun. Aksi takdirde yapılandırdığınız alan adı ile siteye erişemezsiniz.
• Alan Adı Çözümlemesi: ServBay, Websitesi ayarlarında tanımladığınız tüm .servbay.demo alan adlarını yerel (127.0.0.1) olarak otomatik çözümler. Farklı bir alan adı kullanıyorsanız, sistem hosts dosyanızı elle düzenlemeli veya ServBay'in Hosts Yöneticisi işlevini kullanmalısınız.

Özet

ServBay’i kullanarak, macOS üzerinde Node.js ile entegre yerel bir geliştirme ortamı kurabilir ve Vue.js projelerinizin geliştirme ve üretim dağıtımını kolayca yönetebilirsiniz. ServBay’in Websitesi işlevleriyle, geliştirme sunucusuna hızla ters proxy yapılandırabilir veya doğrudan üretim derlemesini statik dosya olarak yayınlayabilirsiniz. Üstelik, özel alan adları ile otomatik SSL sertifikalarının getirdiği kolaylık ve güvenlik sayesinde yerel Vue.js projelerinizin kurulumu ve iş akışı büyük ölçüde hızlanır.