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

Nuxt.js Nedir?

Nuxt.js, popüler Vue.js kütüphanesine dayalı açık kaynaklı bir framework olup, modern ve yüksek performanslı web uygulamaları oluşturmak için özel olarak tasarlanmıştır. Nuxt.js, birçok karmaşık yapılandırmayı soyutlayarak geliştiricilerin iş mantığına odaklanmasını kolaylaştırır. Özellikle Sunucu Tarafı Render (SSR) konusunda çok yeteneklidir, aynı zamanda güçlü bir Statik Site Jenerasyonu (SSG) desteği de sunar. Bu da Nuxt.js’i içerik odaklı, SEO dostu web siteleri ve uygulamalar geliştirmek için ideal bir seçenek haline getirir.

Nuxt.js’in Temel Özellikleri ve Avantajları

• Sunucu Tarafı Render (SSR): Vue bileşenlerinizi sunucu tarafında önceden render ederek ilk yükleme süresini ciddi şekilde azaltır, kullanıcı deneyimini iyileştirir ve arama motorlarının site içeriğini daha verimli şekilde almasını sağlar; bu da SEO için büyük avantaj sunar.
• Statik Site Jenerasyonu (SSG): Derleme sırasında tamamen statik HTML dosyaları oluşturulur. Bu yöntem üstün performans sağlar, dağıtımı oldukça basittir ve canlı bir sunucu ihtiyacı duymadan çalışır, böylece özellikle değişimi az olan blog veya dokümantasyon siteleri için uygundur.
• Otomatik Kod Bölme: Nuxt.js, rotalara göre JavaScript kodunu otomatik olarak böler; kullanıcı bir sayfa ziyaret ettiğinde, sadece gerekli olan kod yüklenir. Bu da uygulama performansını gözle görülür şekilde artırır.
• Dosya Sistemi Tabanlı Yönlendirme: Yönlendirme yapısını pages klasörüne .vue dosyaları ekleyerek otomatik biçimde oluşturabilirsiniz; bu yöntemle routing işlemleri büyük ölçüde kolaylaşır.
• Modüler Yapı: Zengin eklenti ekosistemi sayesinde Axios, PWA desteği veya içerik yönetimi gibi birçok fonksiyonu ve üçüncü parti servisi kolayca entegre edebilirsiniz.
• Konvansiyona Dayalı Yapı: Belirli klasör yapısı ve isimlendirme kurallarını takip ederek karmaşık konfigürasyon gereksinimini en aza indirir.
• Geliştirme Deneyimi Optimizasyonu: Sıcak modül değişimi (HMR), hata raporlama gibi fonksiyonlar ile geliştirme sürecini daha verimli ve keyifli hale getirir.

Tüm bu özellikler sayesinde Nuxt.js ile karmaşık, yüksek performanslı ve SEO dostu web uygulamaları geliştirmek çok daha kolay ve etkilidir.

ServBay’de Nuxt.js Projesini Kurma ve Çalıştırma

Bu rehberde, ServBay’in sunduğu güçlü yerel geliştirme ortamını, özellikle Node.js paketi ve site yönetimi fonksiyonlarını kullanarak bir Nuxt.js projesinin nasıl kurulacağını, yapılandırılacağını ve çalıştırılacağını inceleyeceğiz. ServBay’de geliştirme modu (ters proxy ile) ve üretim modu (statik dosya servisi ile) kurulumları aşama aşama anlatılacaktır.

Ön Gereksinimler

Başlamadan önce lütfen aşağıdaki gereksinimlere sahip olduğunuzdan emin olun:

1. ServBay uygulamasını başarıyla yüklemiş olmanız gerekir.
2. ServBay’de Node.js paketinin kurulu ve etkin olması gerekir. Bunu ServBay kontrol panelindeki “Paketler” sekmesinden kontrol edebilir veya kurabilirsiniz.
3. Node.js, npm (veya Yarn/pnpm) ve temel terminal komutlarına aşinalığınız olmalı.
4. (Tavsiye edilir) VS Code gibi bir kod editörü kurulu olmalı.

Nuxt.js Projesi Oluşturma

Nuxt.js projesini hızlıca başlatmak için create-nuxt-app scaffolding aracını kullanacağız.

1. Terminali Açın ve ServBay Web Kök Dizini’ne Geçin

   ServBay’in varsayılan web kök dizini /Applications/ServBay/www’dür. Yerel geliştirme projeleriniz için burası idealdir. Terminal uygulamasını açın ve aşağıdaki komutu girerek bu dizine geçin:

   cd /Applications/ServBay/www

2. Yeni Nuxt.js Projesi Başlatın

   npx create-nuxt-app komutunu kullanarak servbay-nuxt-app adında yeni bir proje başlatın. npx, npm 5.2+ ile gelen bir araçtır; paketleri global kurmaya gerek kalmadan komutları çalıştırmanıza imkan verir.

   npx create-nuxt-app servbay-nuxt-app

   Komutu girdikten sonra terminalde çıkan yönergeleri takip edin. İhtiyacınıza göre seçenekleri düzenleyebilirsiniz. Örnek bir kurulum diyaloğu aşağıdaki gibidir:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Paket yöneticinizi seçin, Npm veya Yarn önerilir
   ? UI framework: None          # Dilerseniz bir UI framework seçin
   ? Nuxt.js modules: Axios      # Gerekli modülleri seçin
   ? Linting tools: ESLint       # Linting aracı seçin
   ? Testing framework: None     # Test çerçevesi seçin
   ? Rendering mode: Universal (SSR / SSG) # Universal hem SSR hem SSG desteği sunar
   ? Deployment target: Server (Node.js hosting) # Yerel geliştirme/Node.js sunucu için Server seçin
   ? Development tools: jsconfig.json (Recommended for VS Code) # İhtiyaca göre dev araçlarından birini seçin

3. Proje Bağımlılıklarını Kurun

   Yeni oluşturulan proje klasörüne geçin ve seçtiğiniz paket yöneticisi ile bağımlılıkları kurun:

   cd servbay-nuxt-app
   npm install
   # Eğer Yarn kullanıyorsanız: yarn install
   # Ya da pnpm kullanıyorsanız: pnpm install

   Bağımlılıkların kurulmasını bekleyin.

Proje Ana Sayfa İçeriğini Düzenleme

Doğru çalıştığını test edebilmek için ana sayfa içeriğimizi basit bir şekilde güncelleyeceğiz.

1. pages/index.vue Dosyasını Açın

   Kod editörünüz ile proje klasörü altındaki pages/index.vue dosyasını açın.

2. Dosya İçeriğini Değiştirin

   Dosyanın içeriğini aşağıdaki şekilde düzenleyin; böylece ana sayfa üzerinde "Hello ServBay!" metni gözükür:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Burada style etiketine scoped özelliği eklenmiştir; bu sayede stil yalnızca bu bileşene uygulanır ve output, daha şık gözükmesi için biraz iyileştirilmiştir.

ServBay’de Geliştirme Modunu Çalıştırma

Nuxt.js geliştirme sunucusu normalde belirli bir yerel portta çalışır. ServBay’in özelleştirilebilir alan adı, SSL sertifikası ve birleşik 80/443 portlarını kullanabilmek için ServBay’in web sitesi özelliği ile ters proxy yapılandırması yapacağız.

1. Nuxt.js Geliştirme Sunucusunu Başlatın

   Proje ana dizininden aşağıdaki komut ile Nuxt.js geliştirme sunucusunu başlatabilirsiniz. Sunucunun çalışacağı portu 8585 olarak belirliyoruz; siz farklı, boş bir port kullanabilirsiniz.

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Yarn için: yarn dev --port 8585
   # pnpm için: pnpm run dev --port 8585

   Sunucu başlatıldığında, genellikle http://localhost:8585 adresinde çalışıyor olarak görünecektir. Sunucunun sürekli çalışabilmesi için terminal penceresini açık bırakın.

2. ServBay Sitesini Yapılandırın (Ters Proxy)

   ServBay kontrol panelini açın ve ‘Siteler’ sekmesine geçin. Sol alt köşedeki + butonuna tıklayarak yeni bir web sitesi ekleyin:

   • Ad (Name): Kolay tanınacak bir isim, örneğin Nuxt.js Dev Site (Proxy).
   • Alan Adı (Domain): Tarayıcıda erişmek istediğiniz bir özel alan adı, örneğin nuxt-dev.servbay.demo. .servbay.demo uzantısı ServBay markasıyla uyumlu iyi bir tercihtir.
   • Web Sitesi Türü (Website Type): Ters Proxy (Reverse Proxy) seçin.
   • IP Adresi (IP Address): 127.0.0.1 girin (localhost).
   • Port (Port): Nuxt.js geliştirme sunucusunda kullandığınız port numarasını girin, örneğin 8585.

   Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” düğmesine tıklayın. ServBay yapılandırmayı otomatik olarak güncelleyip etkinleştirir.

   ServBay’de Node.js geliştirme sitesi eklemeye dair daha detaylı bilgi için Node.js Geliştirme Sitesi Ekleme rehberine göz atabilirsiniz.

3. Geliştirme Modu Sitesini Ziyaret Edin

   Tarayıcınızda, ServBay’de ayarladığınız alan adını girerek siteye ulaşabilirsiniz; örneğin https://nuxt-dev.servbay.demo.

   ServBay’in ters proxy yeteneği sayesinde, geliştirme sunucunuzu doğrudan özelleştirilmiş alan adı ve HTTPS portu ile görüntüleyebilirsiniz. ServBay, SSL sertifikasını (ServBay User CA tarafından imzalanmış) otomatik şekilde oluşturup yapılandırır; sisteminizde bu CA’ya güven verildiğinden emin olun. Geliştirme ortamında HTTPS kullanımı, canlı sunucu ortamını benzetmek, Service Worker veya güvenliğe ihtiyaç duyan fonksiyonları test etmek için oldukça değerlidir.

Üretim Sürümünü Derleme ve Çalıştırma

Nuxt.js projesini tamamlayıp yayına almaya veya yerel ortamda üretim ön izlemesi yapmaya karar verdiğinizde, projenin üretim sürümünü derlemeniz gerekir. Universal modda çalışıp statik site üretmek istiyorsanız genellikle nuxt generate (veya npm run export) komutuyla bunu yapabilirsiniz.

1. Üretim Sürümünü Derleyin ve Statik Dosyaları Oluşturun

   Proje ana dizininde aşağıdaki komutları çalıştırın. npm run build ile kodlarınızı üretime uygun şekilde derleyin, npm run export ile tüm rotaların statik HTML dosyaları olarak çıktılarını alın (varsayılan olarak dist klasörüne yazılır).

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Yarn ile: yarn build && yarn export
   # pnpm ile: pnpm build && pnpm run export

   İşlem tamamlandığında, proje klasöründe dist isimli bir klasör oluşacak ve tüm statik dosyalar burada yer alacaktır.

2. ServBay Sitesini Yapılandırın (Statik Site Servisi)

   ServBay kontrol panelini açın ve ‘Siteler’ sekmesine geçin. Sol alt köşedeki + butonuna tıklayarak yeni bir site ekleyin:

   • Ad (Name): Kolay tanınacak bir isim, örneğin Nuxt.js Prod Site (Static).
   • Alan Adı (Domain): Üretim sürümünü ziyaret etmek için istediğiniz özel alan adı, örneğin nuxt-prod.servbay.demo.
   • Web Sitesi Türü (Website Type): Statik (Static) seçin.
   • Web Sitesi Kök Dizini (Website Root): Nuxt.js’in oluşturduğu statik dosyaların bulunduğu dizin, örneğin /Applications/ServBay/www/servbay-nuxt-app/dist.

   Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” düğmesine basın. ServBay yapılandırmayı hemen aktif eder.

3. Üretim Modu Sitesini Ziyaret Edin

   Tarayıcınızdan, üretim sürümü için ayarladığınız alan adına gidin: örneğin https://nuxt-prod.servbay.demo.

   ServBay’in yüksek performanslı web sunucusu (yapılandırmanıza göre Caddy veya Nginx) dist klasöründe yer alan statik içerikleri doğrudan sunacaktır. Bu yöntem statik içerik sunmak için optimum hız ve verimlilik sağlar. Ayrıca ServBay ile ücretsiz SSL sertifikası ve özel alan adı desteğine de sahip olursunuz.

Özet

ServBay ile Nuxt.js projelerinizi yerel geliştirme ve ön izleme ortamlarını kolayca yönetebilirsiniz. Node.js paketini kullanarak geliştirme sunucunuzu ServBay ile başlatabilir, web sitesi özellikleri ile ters proxy yapılandırıp özel alan adı ve HTTPS ile test edebilirsiniz. Geliştirme bittikten sonra projeyi derleyip statik dosyalarını üretebilir; ServBay’in statik site servis fonksiyonu üzerinden yüksek performanslı yerel ön izlemenizi gerçekleştirebilirsiniz. Bu iş akışı, ServBay’in kolaylık ve gücünden maksimum faydalanarak, ön uç projelerinizin yerel geliştirme ve test süreçlerini ciddi şekilde basitleştirir. Umarız bu rehber, ServBay ile Nuxt.js geliştirme süreçlerinizde size etkin bir yol gösterici olur!