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

Vue.js, kullanıcı arayüzleri oluşturmak için popüler ve aşamalı bir JavaScript çatısıdır. Kolay başlangıç sunar, esnek ve yüksek performanslıdır; özellikle Tek Sayfa Uygulamaları (SPA) için uygundur. ServBay, geliştiricilere güçlü Node.js desteğiyle birlikte macOS ve Windows platformlarını kapsayan bir yerel web geliştirme ortamı sunar ve Vue.js geliştirmesi için ideal bir platform haline gelir.

Bu rehberde, ServBay’in entegre ortamını kullanarak sıfırdan bir Vue.js projesi oluşturmayı ve hem geliştirme hem de üretim modunda projeyi ServBay üzerinden erişilebilir hale getirmeyi adım adım ele alıyoruz.

Vue.js Nedir?

Vue.js, kullanıcı arayüzleri oluşturmak için aşamalı bir JavaScript çatısıdır. Diğer büyük çaplı çatılardan farklı olarak Vue, tabandan yukarıya artımlı geliştirme yaklaşımına sahiptir. Çekirdek kütüphanesi sadece görüntü katmanına odaklanır, kolayca öğrenilir ve üçüncü parti kütüphaneler ya da mevcut projelerle entegrasyonda kusursuz çalışır. Vue 3, Vue.js’in en güncel versiyonudur; gelişmiş performans, daha küçük paket boyutu ve iyileştirilmiş TypeScript desteği gibi birçok yeniliği beraberinde getirir.

Vue 3’ün Öne Çıkan Özellikleri ve Avantajları

• Bileşim API’si (Composition API): Fonksiyonları birleştirerek karmaşık bileşenlerin mantığı daha yönetilebilir ve yeniden kullanılabilir hale getirilir.
• Performans Artışı: Vue 3, reaktif sistemi Proxy nesnesiyle kurar ve sanal DOM algoritmalarını optimize ederek ciddi bir hız kazanımı sağlar.
• Daha Küçük Paket Boyutu: Tree-shaking teknolojisiyle Vue 3 çekirdek kütüphanesi küçülür ve daha hızlı yüklenir.
• Daha Güçlü TypeScript Desteği: TypeScript ile geliştirme yapanlar için kapsamlı tip tanımlamaları sunar ve geliştirme deneyimini iyileştirir.
• Gelişmiş Bileşen Yaşam Döngüsü: Yeni yaşam döngüsü fonksiyonları ve Setup fonksiyonu ile bileşen mantığı daha şeffaf ve kolay yönetilir.

Vue 3 sayesinde geliştiriciler, modern ve hızlı web uygulamalarını kolaylıkla hazırlayabilirler.

ServBay Entegre Ortamında Vue.js Projesi Oluşturup Çalıştırmak

Bu makalede, ServBay’in sunduğu Node.js ortamından faydalanarak bir Vue.js projesi hazırlayacağız. ServBay’in Web Sitesi özelliğiyle sunucu yapılandırmasını kolayca ayarlayacak, ters proxy ve statik dosya servisleri sayesinde projeyi yerelde erişilebilir hale getireceğiz.

Gereksinimler

Başlamadan önce, aşağıdaki hazırlıkları tamamlamış olmanız gerekir:

1. ServBay Kurulumu: ServBay yerel geliştirme ortamını başarıyla kurdunuz.
2. Node.js Paketini Kurun: ServBay’in paket yönetimi üzerinden Node.js paketini eklediniz. Detaylı adımlar için bkz: ServBay ile Node.js Yükleme ve Kullanma.

Vue.js Projesi Oluşturma

1. Proje Başlatma

   Terminal uygulamanızı açın. ServBay, web projelerini varsayılan dizinde saklamanızı önerir. Bu dizine girin ve npm create vue@latest komutuyla yeni bir Vue.js projesi başlatın. @latest parametresi en güncel Vue CLI veya create-vue aracının kullanılacağını garanti eder ve genellikle Vue 3 projesi oluşturur.

   macOS:

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

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Terminalde proje adını yazın (örneğin servbay-vue-app) ve proje gereksinimlerinize göre TypeScript, Vue Router, Pinia gibi özellikleri ister ekleyin ister devre dışı bırakın. Örnek yapılandırma aşağıdaki gibidir:

   ✔ Proje adı: … servbay-vue-app
   ✔ TypeScript ekle? … Hayır # İsteğinize göre Evet veya Hayır seçin
   ✔ JSX Desteği ekle? … Hayır # İsteğiniz doğrultusunda seçin
   ✔ Tek Sayfa Uygulama geliştirmek için Vue Router ekle? … Evet # Genel olarak önerilir
   ✔ Durum yönetimi için Pinia ekle? … Hayır # İsteğinize bağlı seçin
   ✔ Birim test için Vitest ekle? … Hayır # Tercihe göre seçin
   ✔ Uçtan uca test çözümü ekle? … Hayır # Tercihe göre seçin
   ✔ Kod kalitesi için ESLint ekle? … Evet # Genelde önerilir
   ✔ Kod formatlama için Prettier ekle? … Evet # Tavsiye edilir
   ✔ Hata ayıklama için Vue DevTools 7 uzantısı ekle? (deneysel) … Hayır # İsteğe göre seçin

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

   Proje başlatıldıktan sonra yeni oluşturulan klasöre (servbay-vue-app) girin ve tüm gerekli bağımlılıkları yüklemek için npm install komutunu çalıştırın.

   cd servbay-vue-app
   npm install

Proje Örneğini Düzenleme (Opsiyonel)

Projeyi başarıyla çalıştırıp çalıştırmadığınızı test etmek için src/App.vue dosyasını düzenleyip, varsayılan içeriği basit bir "Hello ServBay!" çıktısıyla değiştirebilirsiniz.

Proje klasörünüzdeki src/App.vue dosyasını açın ve içeriğini şöyle güncelleyin:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Bu, ServBay üzerinde ç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ını Ayarlama (Ters Proxy Kullanımı)

Vue projeleri geliştirme modunda genellikle (Vite veya Webpack tabanlı) yerel bir sunucu başlatır ve HMR (Hot Module Reload) gibi avantajlar sağlar. ServBay, bir yerel alan adını bu sunucunun adresine ve portuna yönlendirmek için ters proxy yapılandırması sunar.

1. Geliştirme Sunucusunu Başlatma

   Proje kök klasöründe aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatın. --port parametresiyle (örneğin: 8585) bir port belirleyin ve başka bir programın bu portu kullanmadığından emin olun.

   npm run dev -- --port 8585

   Terminalde geliştirme sunucusunun belirttiğiniz portta örn. http://localhost:8585 adresinde çalıştığı görünecek.

2. ServBay Web Sitesi Ters Proxy Yapılandırması

   ServBay uygulamasını açın ve Web Sitesi ayarlarına gidin. Yeni bir site ekleyin, tür olarak Ters Proxy seçin:

   • İsim: My first Vue dev site (veya kolay anlaşılır bir ad)
   • Alan Adı: servbay-vue-dev.servbay.demo (veya tercih ettiğiniz başka bir .servbay.demo alan adı)
   • Site Türü: Ters Proxy
   • Hedef IP: 127.0.0.1
   • Hedef Port: 8585 (geliştirme sunucusunu başlatırken seçtiğinizle aynı olmalı)

   Kaydedince ServBay, web sunucusu (Caddy veya Nginx) yapılandırmasını otomatik olarak günceller ve gelen istekleri http://127.0.0.1:8585 adresine proxy eder.

   ServBay ile Node.js geliştirme sitesi ekleme için detaylı adımlar: ServBay'de Node.js Geliştirme Sitesi Ekleme.

3. Geliştirme Moduna Erişim

   ServBay web sunucusunun çalıştığından emin olun. Tarayıcınızı açıp, tanımladığınız alan adını (https://servbay-vue-dev.servbay.demo) ziyaret edin.

   ServBay, yerel alan adlarına Otomatik SSL Sertifikası (ServBay User CA veya ServBay Public CA üzerinden) yapılandırdığı için, uygulamanızı doğrudan HTTPS ile güvenli biçimde ziyaret edebilirsiniz; bu üretim ortamına benzer bir deneyim sağlar. SSL ayarları için bkz: ServBay’de Web Sitesine SSL Sertifikası Ekleme.

   Artık uygulamanızın geliştirme modunda çalıştığını ve kodda yapacağınız değişikliklerin otomatik olarak tarayıcıda güncellendiğini görebilirsiniz.

Üretim Sürümü Derlemesi ve Yayını (Statik Site Sunumu)

Vue.js projeniz son haline geldiğinde ve yayına almaya hazır olduğunda, üretim için optimize edilmiş bir sürüm oluşturmanız gerekir. Bu sürüm, HTML, CSS, JavaScript gibi statik dosyalardan oluşur ve ServBay’in statik site özelliği ile kolayca dağıtılabilir.

1. Üretim Sürümünü Derleme

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

   npm run build

   Bu işlem, optimize ve paketlenmiş statik dosyaları projede dist klasöründe saklar.

2. Statik Dosya Servisi Ayarlama

   ServBay uygulamasında Web Sitesi ayarlarını açın. Yeni bir site ekleyin ve tür olarak Statik Site seçin:

   • İsim: My first Vue production site (veya kolay anlaşılır bir ad)
   • Alan Adı: servbay-vue-prod.servbay.demo (veya tercih ettiğiniz başka bir .servbay.demo alan adı)
   • Site Türü: Statik
   • Site Kök Dizini: Proje oluşturulunca derlemelerin yapıldığı dist klasörünün tam yolu:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Ayarları kaydedince ServBay, web sunucusunu doğrudan bu dist dizinindeki statik dosyaları servis edecek şekilde yapılandırır.

3. Üretim Moduna Erişim

   ServBay web sunucusunun çalıştığından emin olun. Tarayıcıda, üretim için seçtiğiniz alan adını (https://servbay-vue-prod.servbay.demo) açın.

   Artık Vue uygulamanızın optimize edilmiş, hızlı yüklenen üretim sürümünü görürsünüz. ServBay’in özel alan adı ve otomatik SSL özellikleri ile, üretim sitenizi yerelde güvenle önizleyebilirsiniz.

Dikkat Edilmesi Gerekenler

• Port Çakışması: Eğer npm run dev ile verdiğiniz port (8585 veya farklı bir port) başka bir uygulama tarafından kullanılıyorsa hata alırsınız. Farklı bir boş port deneyin ve ServBay ters proxy ayarındaki portun da güncel olduğundan emin olun.
• ServBay Web Sunucusu Durumu: ServBay’in web sunucusunun (Caddy veya Nginx, seçtiğiniz yapılandırmaya göre) aktif olduğundan emin olun; aksi takdirde belirlediğiniz alan adından siteye erişim sağlayamazsınız.
• Alan Adı Yönlendirmesi: ServBay, Web Sitesi ayarında eklediğiniz .servbay.demo uzantılı alan adlarını otomatik olarak yerel IP’ye (127.0.0.1) işler. Farklı bir alan adı kullanıyorsanız, sistem hosts dosyanızı elle güncellemeniz ya da ServBay’in Hosts Manager özelliğini kullanmanız gerekebilir.

Özet

ServBay sayesinde macOS ve Windows üzerinde Node.js ile entegre edilmiş bir yerel geliştirme ortamı hızlıca kurup, Vue.js projelerinizi kolaylıkla geliştirebilir ve üretim ortamına taşıyabilirsiniz. ServBay’in Web Sitesi özelliği ile geliştirme sunucusuna ters proxy kurabilir veya doğrudan üretim çıktılarınızı statik site olarak servis edebilirsiniz. Aynı zamanda, özel alan adları ve otomatik SSL sertifikalandırma sayesinde projelerinizi güvenle ve zahmetsiz bir şekilde yerelde ön izleme fırsatı elde edersiniz. Tüm bu kolaylıklar, yerel Vue.js projelerinde çalışma sürecinizi önemli ölçüde basitleştirir.