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

Nuxt.js Nedir?

Nuxt.js, popüler Vue.js framework'ünün üzerine inşa edilmiş açık kaynaklı bir framework'tür ve modern, yüksek performanslı web uygulamaları geliştirmek için özel olarak tasarlanmıştır. Nuxt.js, pek çok karmaşık yapılandırmayı geliştiricinin odağından uzaklaştırarak, iş mantığına yoğunlaşmasını sağlar. Özellikle sunucu tarafı render (SSR) uygulamaları geliştirmede oldukça başarılıdır; ayrıca güçlü bir statik site oluşturma (SSG) kabiliyetine sahiptir. Bu sayede, içerik açısından zengin, SEO dostu web siteleri ve uygulamalar geliştirmek için ideal bir tercihtir.

Nuxt.js'nin Ana Özellikleri ve Avantajları

• Sunucu Tarafı Render (SSR): Vue sayfalarını, sunucu üzerinde önceden render ederek; ilk yüklenme hızını artırır, kullanıcı deneyimini iyileştirir ve içeriğin arama motorları tarafından daha iyi taranmasını sağlayarak SEO'ya katkıda bulunur.
• Statik Site Oluşturma (SSG): Proje derlenirken tamamen statik HTML dosyaları üretir. Bu yöntem son derece yüksek performans sunar, kolayca dağıtılabilir ve sunucu çalışma zamanı maliyeti gerektirmez; sık sık değişmeyen içerikler veya blog/dokümantasyon siteleri için idealdir.
• Otomatik Kod Parçalama: Nuxt.js, rotalara göre JavaScript kodunu otomatik olarak böler; kullanıcı sayfayı ziyaret ettiğinde yalnızca gerekli kodu yükler ve böylelikle uygulama performansı beden belirgin şekilde yükselir.
• Dosya Sistemi Bazlı Yönlendirme: pages klasöründe .vue dosyaları oluşturarak otomatik olarak yönlendirme yapılandırmasını gerçekleştirir ve bu sayede yönetim oldukça kolaylaşır.
• Modüler Yapı: Kapsamlı bir modül ekosistemine sahiptir; çeşitli fonksiyon ve üçüncü parti hizmetler (örneğin Axios, PWA desteği, içerik yönetim sistemi entegrasyonları vb.) kolayca entegre edilebilir.
• Yapılandırma Yerine Konvansiyon: Belirli bir klasör yapısı ve adlandırma kurallarına göre ilerleyerek, karmaşık ayarlarla vakit kaybetmeyi önler.
• Geliştirici Deneyimi İyileştirmeleri: Sıcak modül yenilemeleri (HMR), hata raporlamaları gibi özelliklerle geliştirme süreçlerini hızlandırır.

Bu avantajlar sayesinde, Nuxt.js ile karmaşık, yüksek performanslı ve SEO dostu web uygulamaları daha verimli ve kolay bir şekilde geliştirilebilir.

ServBay Üzerinde Nuxt.js Projesi Kurmak ve Çalıştırmak

Bu rehberde, ServBay'in sunduğu güçlü yerel geliştirme ortamı — özellikle Node.js paketlerinin ve web sitesi yönetim özelliklerinin nasıl kullanılacağını — bir Nuxt.js projesi oluşturmak, ayarlamak ve çalıştırmak için adım adım anlatıyoruz. ServBay üzerinde geliştirme modunu (ters proxy kullanarak) ve üretim modunu (statik dosya servisi ile) ayrı ayrı ele alıyoruz.

Gereksinimler

Başlamadan önce, aşağıdaki koşulları sağladığınızdan emin olun:

1. ServBay uygulamasının başarılı bir şekilde kurulu olması.
2. ServBay'de Node.js paketinin kurulu ve etkin olması. Bunu, ServBay kontrol panelindeki ‘Paketler’ sekmesinden kontrol edebilir ve kurabilirsiniz.
3. Node.js, npm (veya Yarn/pnpm) ile temel terminal komutları hakkında bilgi sahibi olmanız.
4. (Tavsiye edilir) Bir kod editörü yüklü olması, örneğin VS Code.

Nuxt.js Projesi Oluşturma

create-nuxt-app komut satırı aracı ile hızlıca bir Nuxt.js projesi başlatacağız.

1. Terminali Açıp ServBay Web Sitesi Kök Dizini’ne Girin

   ServBay'in varsayılan web sitesi kök dizini, yerel geliştirme projelerinizi saklamak için idealdir. Terminal uygulamanızı açın ve aşağıdaki komutu çalıştırarak bu klasöre gidin:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Yeni Nuxt.js Projesi Başlatma

   npx create-nuxt-app komutunu kullanarak, servbay-nuxt-app ismiyle yeni bir proje başlatıyoruz. npx, npm 5.2+ ile gelen ve paketleri global kurmaya gerek olmadan çalıştırmaya olanak veren bir araçtır.

   npx create-nuxt-app servbay-nuxt-app

   Komutu uyguladıktan sonra terminaldeki yönergeleri izleyerek proje ayarlarını yapabilirsiniz. İşte örnek bir kurulum süreci:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Paket yöneticinizi seçin, Npm veya Yarn önerilir
   ? UI framework: None          # İhtiyaca göre bir UI framework seçin
   ? Nuxt.js modules: Axios      # Gerekirse Nuxt.js modüllerinden seçim yapın
   ? Linting tools: ESLint       # Kod kontrolü için bir linting aracı seçin
   ? Testing framework: None     # Gerekirse bir test framework'u seçin
   ? Rendering mode: Universal (SSR / SSG) # Render modunu belirleyin, Universal SSR & SSG sağlar
   ? Deployment target: Server (Node.js hosting) # Sunucu tipi, Server yerel geliştirme ve Node.js deploy için uygundur
   ? Development tools: jsconfig.json (Recommended for VS Code) # Geliştirme aracı ayarlarını seçin

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

   Yeni oluşturduğunuz proje klasörüne girin ve seçtiğiniz paket yöneticisiyle gerekli bağımlılıkları yükleyin:

   cd servbay-nuxt-app
   npm install
   # Veya Yarn kullanın: yarn install
   # Veya pnpm: pnpm install

   Yükleme işleminin bitmesini bekleyin.

Proje Ana Sayfasını Düzenleme

Test için ana sayfa kodunu basit bir metin gösterecek şekilde değiştirelim.

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

   Kod editörünüzle proje klasöründeki pages/index.vue dosyasını açın.

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

   Dosya içeriğini, ekranda "Hello ServBay!" metni gözükecek şekilde aşağıdaki kodla değiştirin:

   <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 ekledik; bu şekilde stil yalnızca mevcut bileşene uygulanır ve çıktının görünümünü biraz daha güzelleştirmiş olduk.

ServBay'de Geliştirme Modunu Çalıştırmak

Nuxt.js geliştirme sunucusu genellikle belirli bir yerel portta çalışır. ServBay'in özel alan adı, SSL sertifikası ve merkezi 80/443 portları üzerinden erişmek için ServBay'in web sitesi ayarlarında ters proxy kullanacağız.

1. Nuxt.js Geliştirme Sunucusunu Başlatma

   Proje kökündeyken, geliştirme sunucusunu başlatmak için şu komutu çalıştırın. Port olarak 8585 seçiyoruz; dilediğiniz başka bir boş port seçebilirsiniz.

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Veya Yarn kullanın: yarn dev --port 8585
   # Veya pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Veya Yarn kullanın: yarn dev --port 8585
   # Veya pnpm: pnpm run dev --port 8585

   Sunucu başladığında, genellikle http://localhost:8585 adresinde çalışır. Bu terminal penceresini açık bırakın; sunucu çalışmaya devam etsin.

2. ServBay Web Sitesini Ayarlayın (Ters Proxy)

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

   • İsim: Tanınabilir bir ad girin, ör. Nuxt.js Dev Site (Proxy).
   • Alan adı: Tarayıcıda erişmek istediğiniz özel alan adını girin, örn. nuxt-dev.servbay.demo. .servbay.demo sonekini kullanmak ServBay markası için iyi bir tercihtir.
   • Web Site Türü: Ters Proxy seçin.
   • IP Adresi: 127.0.0.1 (Yerel loopback adresi).
   • Port: Nuxt.js sunucusunu başlatırken kullandığınız port, burada 8585.

   Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” düğmesine tıklayın. ServBay otomatik konfigürasyon günceller ve etkinleştirir.

   ServBay'de Node.js geliştirme sitesi ekleme (genellikle ters proxy ile) ile ilgili daha ayrıntılı adımlar için bkz: Node.js Geliştirme Web Sitesi Ekleme.

3. Geliştirme Modu Sitesine Erişin

   Web tarayıcınızı açın, ServBay'de kurduğunuz alan adına gidin, ör. https://nuxt-dev.servbay.demo.

   ServBay'in ters proxy özelliğiyle, Nuxt.js geliştirme sunucunuza doğrudan ServBay tarafından yönetilen alan adı ve HTTPS portu üzerinden ulaşabilirsiniz. ServBay, otomatik olarak SSL sertifikası (ServBay User CA tarafından imzalanmış) üretip yapılandırır; sisteminizin bu CA'ya güvendiğinden emin olun. Böylece geliştirme ortamınızda da HTTPS kullanabilirsiniz — bu, prodüksiyonu simüle etmek, Service Worker test etmek veya güvenli ortam gerektiren işlevleri denemek için oldukça değerlidir.

Üretim Sürümünü Oluşturmak ve Çalıştırmak

Nuxt.js projeniz geliştirme aşaması tamamlandığında ve deploy olmaya hazırsa (veya üretim ortamını yerel olarak test etmek istiyorsanız), projeyi derleyip üretim sürümünü oluşturmalısınız. Universal mod ve statik site için genellikle nuxt generate (ya da npm run export script ile) komutu kullanılır.

1. Üretim Sürümü Derleyip Statik Dosyaları Oluşturun

   Proje kökünde şu komutları çalıştırın. npm run build kodunuzu derler, npm run export ise rotalara uygun statik HTML dosyalarını çıkış dizinine (dist) yazar.

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Veya Yarn: yarn build && yarn export
   # Veya pnpm: pnpm build && pnpm run export

   Derleme tamamlandığında, proje klasörünüzde tüm statik dosyaları içeren bir dist klasörü göreceksiniz.

2. ServBay Web Sitesini Ayarlayın (Statik Dosya)

   ServBay kontrol panelinde, ‘Web Sitesi’ sekmesine gidin ve sol alttaki + butonuna tıklayarak yeni bir site ekleyin:

   • İsim: Kolayca ayırt edebileceğiniz bir ad girin, ör. Nuxt.js Prod Site (Static).
   • Alan adı: Üretim için erişmek istediğiniz özel bir alan adı girin, örn. nuxt-prod.servbay.demo.
   • Web Site Türü: Statik (Static) seçin.
   • Web Site Kök Dizini: Nuxt.js tarafından üretilen statik dosyaların bulunduğu dizin yolunu girin:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Ayarları tamamladıktan sonra “Ekle” veya “Kaydet” butonuna tıklayın. ServBay otomatik olarak konfigürasyonu güncelleyip etkinleştirir.

3. Üretim Sitesine Ulaşın

   Web tarayıcınızı açın, üretim sürümü için oluşturduğunuz alan adına gidin, örn. https://nuxt-prod.servbay.demo.

   ServBay’in yüksek performanslı web sunucusu (Caddy veya Nginx; ayarınıza göre) doğrudan dist klasöründeki statik dosyaları sunacaktır. Statik içeriği servis etmek için en hızlı ve en optimize edilmiş yöntem budur. Ayrıca, ServBay sayesinde ücretsiz SSL sertifikası ve özel alan adı avantajlarından da faydalanırsınız.

Sonuç

ServBay ile, Nuxt.js projelerinizin yerel geliştirme ve önizleme sürecini kolayca yönetebilirsiniz. Node.js paketleriyle geliştirme sunucusunu başlatıp, ServBay’in web sitesi fonksiyonu ile ters proxy kurarak özel alan adı ve HTTPS ortamında geliştirme ve debug işlemleri gerçekleştirebilirsiniz. Geliştirme tamamlandıktan sonra, projeyi derleyip statik dosyaları oluşturun ve ServBay’in statik web sitesi türüyle yüksek performanslı yerel önizleme yapın. Bu iş akışı, ServBay’in sunduğu kolaylık ve güçlü özelliklerle ön yüz projelerinin yerel geliştirme ve test süreçlerini oldukça rahatlatır. Bu rehberin, Nuxt.js geliştirmede ServBay’i daha verimli kullanmanıza yardımcı olmasını dileriz!