Membuat dan Menjalankan Proyek Nuxt.js dengan ServBay

Apa Itu Nuxt.js?

Nuxt.js adalah framework open-source berbasis Vue.js yang dirancang khusus untuk membangun aplikasi web modern berperforma tinggi. Framework ini menyederhanakan banyak aspek konfigurasi kompleks sehingga pengembang bisa lebih fokus pada logika bisnis. Nuxt.js sangat unggul untuk membangun aplikasi dengan server-side rendering (SSR), namun juga menawarkan kemampuan static site generation (SSG) yang kuat. Oleh sebab itu, Nuxt.js ideal untuk membangun situs dan aplikasi yang kaya konten dan ramah SEO.

Fitur dan Keunggulan Utama Nuxt.js

• Server-side Rendering (SSR): Vue halaman dirender di server sebelum dikirim ke klien, mempercepat waktu muat awal, meningkatkan pengalaman pengguna, serta memudahkan mesin pencari mengindeks konten—sangat baik untuk SEO.
• Static Site Generation (SSG): HTML statis sepenuhnya dihasilkan saat proses build. Metode ini sangat efisien, mudah dideploy, dan tidak memerlukan runtime server, cocok untuk situs yang kontennya jarang berubah seperti blog atau dokumentasi.
• Automatic Code Splitting: Nuxt.js secara otomatis membagi kode JavaScript berdasarkan rute halaman, sehingga hanya kode yang diperlukan yang dimuat saat user mengakses halaman, meningkatkan kinerja aplikasi secara signifikan.
• File-system Routing: Routing otomatis berdasarkan file .vue di direktori pages, sangat mempermudah pengelolaan rute aplikasi.
• Modular: Ekosistem modul yang luas memudahkan integrasi dengan berbagai fitur dan layanan pihak ketiga (seperti Axios, dukungan PWA, CMS, dan lainnya).
• Convention over Configuration: Struktur direktori dan penamaan berstandar mengurangi kebutuhan konfigurasi yang rumit.
• Optimasi Pengalaman Developer: Mendukung hot module reload (HMR), pelaporan error, dan fitur lain yang meningkatkan efisiensi pengembangan.

Dengan fitur-fitur ini, Nuxt.js membuat proses membangun aplikasi web modern, berperforma tinggi, dan SEO-friendly menjadi lebih mudah, efisien, dan menyenangkan.

Konfigurasi dan Menjalankan Proyek Nuxt.js di ServBay

Panduan ini akan menunjukkan cara memanfaatkan lingkungan pengembangan lokal ServBay, khususnya paket Node.js dan fitur manajemen website-nya, untuk membuat, mengkonfigurasi, dan menjalankan proyek Nuxt.js. Kami akan membahas cara menjalankan mode pengembangan (menggunakan reverse proxy) dan mode produksi (menggunakan layanan file statis) di ServBay.

Prasyarat

Sebelum mulai, pastikan Anda memenuhi persyaratan berikut:

1. Aplikasi ServBay sudah terpasang dengan baik.
2. Paket Node.js sudah terinstall dan diaktifkan di ServBay. Cek dan pasang melalui tab "Paket" pada panel kontrol ServBay.
3. Paham tentang dasar Node.js, npm (atau Yarn/pnpm), dan perintah terminal.
4. (Disarankan) Instal editor kode seperti VS Code.

Membuat Proyek Nuxt.js

Kita akan menggunakan alat create-nuxt-app untuk memulai proyek Nuxt.js dengan cepat.

1. Buka Terminal dan Masuk ke Direktori Root Website ServBay

   Direktori root website bawaan ServBay adalah tempat ideal untuk menyimpan proyek pengembangan lokal Anda. Buka aplikasi terminal dan jalankan perintah berikut untuk masuk ke direktori tersebut:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Inisialisasi Proyek Nuxt.js Baru

   Gunakan perintah npx create-nuxt-app untuk membuat proyek baru bernama servbay-nuxt-app. npx adalah alat yang disertakan pada npm versi 5.2 ke atas, memungkinkan Anda menjalankan paket npm tanpa harus menginstall secara global.

   npx create-nuxt-app servbay-nuxt-app

   Ikuti instruksi di terminal untuk melakukan konfigurasi. Anda bisa menyesuaikan pilihan sesuai kebutuhan. Contoh proses konfigurasi:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Pilih manajer paket, rekomendasi Npm atau Yarn
   ? UI framework: None          # Pilih kerangka UI sesuai kebutuhan
   ? Nuxt.js modules: Axios      # Pilih modul Nuxt.js sesuai kebutuhan
   ? Linting tools: ESLint       # Pilih alat linting sesuai keperluan
   ? Testing framework: None     # Pilih framework testing jika perlu
   ? Rendering mode: Universal (SSR / SSG) # Pilih mode render, Universal mendukung SSR dan SSG
   ? Deployment target: Server (Node.js hosting) # Pilih target deployment, Server cocok untuk pengembangan lokal dan server Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Pilih konfigurasi alat dev sesuai kebutuhan

3. Instal Dependensi Proyek

   Masuk ke direktori proyek yang baru dan instal semua dependensi yang dibutuhkan:

   cd servbay-nuxt-app
   npm install
   # Atau gunakan Yarn: yarn install
   # Atau gunakan pnpm: pnpm install

   Tunggu proses instalasi hingga selesai.

Modifikasi Konten Output Proyek

Untuk verifikasi sederhana, kita akan mengubah file halaman utama agar menampilkan teks.

1. Buka File pages/index.vue

   Gunakan editor kode pilihan Anda untuk membuka file pages/index.vue di direktori proyek.

2. Edit Isi File

   Ubah isi file seperti berikut agar halaman menampilkan "Hello ServBay!":

   <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>

   Penambahan atribut scoped pada tag style bertujuan membatasi style hanya untuk komponen ini dan memperindah tampilan output.

Menjalankan Mode Pengembangan di ServBay

Server pengembangan Nuxt.js biasanya berjalan di port lokal tertentu. Agar dapat diakses melalui domain kustom, sertifikat SSL, dan port 80/443 yang dikelola ServBay, kita gunakan fitur reverse proxy di ServBay.

1. Jalankan Server Pengembangan Nuxt.js

   Dari direktori root proyek, jalankan perintah berikut untuk memulai server Nuxt.js di port 8585. Anda dapat memakai port lain yang belum digunakan.

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Atau dengan Yarn: yarn dev --port 8585
   # Atau dengan pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Atau dengan Yarn: yarn dev --port 8585
   # Atau dengan pnpm: pnpm run dev --port 8585

   Setelah berjalan, server biasanya aktif di http://localhost:8585. Pastikan terminal tetap terbuka agar server terus berjalan.

2. Konfigurasi Website ServBay (Reverse Proxy)

   Buka panel kontrol ServBay dan masuk ke tab ‘Website’. Klik tombol + di kiri bawah untuk menambah konfigurasi website baru:

   • Nama: Masukkan nama yang mudah dikenali, misalnya Nuxt.js Dev Site (Proxy).
   • Domain: Masukkan domain kustom yang akan digunakan, misal nuxt-dev.servbay.demo. Penggunaan akhiran .servbay.demo dianjurkan untuk brand ServBay.
   • Tipe Website: Pilih Reverse Proxy.
   • Alamat IP: Masukkan 127.0.0.1 (localhost).
   • Port: Masukkan port sesuai dengan server Nuxt.js, yakni 8585.

   Setelah mengisi, klik “Tambah” atau “Simpan”. ServBay akan memperbarui konfigurasi agar langsung aktif.

   Untuk langkah lebih detail tentang penambahan website Node.js (dengan reverse proxy) di ServBay, lihat Menambahkan Website Pengembangan Node.js.

3. Akses Website Mode Pengembangan

   Buka browser dan akses domain yang telah dikonfigurasi, misalnya https://nuxt-dev.servbay.demo.

   Dengan reverse proxy ServBay, Anda bisa mengakses server Nuxt.js melalui domain dan port HTTPS yang dikelola ServBay. Sertifikat SSL secara otomatis dibuat dan dikonfigurasi (ditandatangani oleh ServBay User CA, pastikan CA ini telah tepercaya oleh sistem Anda). Penggunaan HTTPS bahkan di lingkungan development sangat berguna untuk simulasi kondisi produksi, menguji Service Workers, atau fitur yang membutuhkan koneksi aman.

Membuat dan Menjalankan Versi Produksi

Setelah proyek Nuxt.js rampung dan siap untuk deployment/preview lokal, Anda dapat membangun versi produksinya. Untuk mode Universal yang ingin menghasilkan situs statis, jalankan nuxt generate (atau skrip npm run export).

1. Build Produksi & Generate File Statis

   Dari root proyek, jalankan:

   macOS:

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

   Windows:

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

   Setelah proses selesai, akan muncul folder dist di direktori proyek berisi semua file statis yang telah digenerate.

2. Konfigurasi Website ServBay (Layanan File Statis)

   Buka panel kontrol ServBay dan ke tab ‘Website’. Klik tombol + di pojok kiri bawah untuk menambah konfigurasi:

   • Nama: Misalnya, Nuxt.js Prod Site (Static).
   • Domain: Masukkan domain kustom untuk versi produksi, contoh nuxt-prod.servbay.demo.
   • Tipe Website: Pilih Static.
   • Root Website: Masukkan path folder file statis hasil build Nuxt.js:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Setelah selesai, klik “Tambah” atau “Simpan”. ServBay akan memperbarui pengaturan dan mengaktifkannya.

3. Akses Website Mode Produksi

   Buka browser dan masuk ke domain produksi, misal https://nuxt-prod.servbay.demo.

   Web server high-performance ServBay (Caddy atau Nginx, tergantung konfigurasi Anda) akan langsung menghidangkan file statis dari folder dist. Cara ini sangat optimal untuk konten statis dan memberikan kecepatan akses maksimal. Anda juga mendapat sertifikat SSL gratis serta dukungan domain kustom dari ServBay.

Kesimpulan

Dengan ServBay, Anda dapat dengan mudah mengelola lingkungan pengembangan dan preview lokal proyek Nuxt.js. Paket Node.js ServBay memungkinkan Anda menjalankan server pengembangan, dan fitur manajemen website-nya memudahkan setup reverse proxy agar bisa menggunakan domain serta HTTPS kustom selama pengembangan. Setelah selesai coding, build proyek dan generate file statis, kemudian gunakan fitur website statis ServBay untuk preview lokal yang optimal. Workflow ini benar-benar memanfaatkan kemudahan dan kekuatan ServBay untuk memperlancar proses pengembangan dan pengujian frontend. Semoga panduan ini membantu Anda semakin produktif menggunakan ServBay untuk pengembangan Nuxt.js!