Membuat & 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 dan berkinerja tinggi. Framework ini menyederhanakan banyak konfigurasi kompleks, sehingga pengembang bisa lebih fokus pada logika bisnis. Nuxt.js sangat ahli dalam membangun aplikasi server-side rendering (SSR), namun juga menawarkan kemampuan static site generation (SSG) yang bertenaga—menjadikannya pilihan ideal untuk membuat situs web dan aplikasi kaya konten serta ramah SEO.

Fitur & Kelebihan Utama Nuxt.js

• Server-Side Rendering (SSR): Melakukan prarender halaman Vue di server, meningkatkan kecepatan muat halaman awal, pengalaman pengguna, serta daya jangkau mesin pencari (SEO).
• Static Site Generation (SSG): Menghasilkan file HTML statis sepenuhnya saat proses build. Cara ini sangat cepat, mudah dideploy, dan tanpa beban server runtime—cocok untuk situs dengan konten relatif tetap seperti blog atau dokumentasi.
• Pemecahan Kode Otomatis: Nuxt.js membagi file JavaScript per rute secara otomatis, sehingga pengunjung hanya perlu memuat kode yang diperlukan untuk setiap halaman—menjadikan performa aplikasi jauh lebih efisien.
• Routing Berbasis Sistem File: Membuat file .vue di dalam folder pages secara otomatis menghasilkan konfigurasi rute, sangat memudahkan manajemen navigasi.
• Modular: Ekosistem modul Nuxt yang luas memungkinkan integrasi berbagai fitur tambahan dan layanan pihak ketiga (seperti Axios, dukungan PWA, integrasi CMS, dsb).
• Konvensi lebih penting dari konfigurasi: Struktur folder dan penamaan yang mengikuti aturan baku, sehingga meminimalkan waktu untuk mengatur konfigurasi.
• Pengalaman Pengembangan Maksimal: Mendukung hot module reloading (HMR), pelaporan error yang jelas, dan fitur lain untuk meningkatkan produktivitas.

Dengan beragam keunggulan ini, Nuxt.js membuat proses pengembangan aplikasi web modern, berkinerja tinggi, dan ramah SEO menjadi jauh lebih efisien dan menyenangkan.

Mengonfigurasi & Menjalankan Proyek Nuxt.js di ServBay

Panduan ini akan menunjukkan cara memanfaatkan lingkungan pengembangan lokal ServBay, terutama melalui paket Node.js dan fitur manajemen situsnya, untuk membuat, mengkonfigurasi, serta menjalankan proyek Nuxt.js. Kami akan menjelaskan pengaturan mode pengembangan (dengan reverse proxy) dan mode produksi (melalui layanan file statis) di ServBay.

Prasyarat

Sebelum mulai, pastikan Anda sudah:

1. Menginstal aplikasi ServBay dengan sukses.
2. Memastikan Node.js telah diinstall dan diaktifkan di ServBay. Anda dapat mengeceknya pada tab "Paket" di panel kontrol ServBay.
3. Memiliki pemahaman dasar tentang Node.js, npm (atau Yarn/pnpm), serta perintah Terminal.
4. (Opsional tapi disarankan) Instal editor kode seperti VS Code.

Membuat Proyek Nuxt.js

Kita akan menggunakan tool scaffolding create-nuxt-app untuk menginisialisasi proyek Nuxt.js dengan cepat.

1. Buka Terminal dan Masuk ke Direktori Root Website ServBay

   Direktori root website default di ServBay adalah /Applications/ServBay/www. Ini adalah tempat yang direkomendasikan untuk menyimpan proyek pengembangan lokal Anda. Buka aplikasi terminal, lalu jalankan perintah berikut:

   cd /Applications/ServBay/www

2. Inisialisasi Proyek Nuxt.js Baru

   Gunakan perintah npx create-nuxt-app untuk membuat proyek baru bernama servbay-nuxt-app. Tool npx sudah tersedia di npm 5.2+.

   npx create-nuxt-app servbay-nuxt-app

   Setelah mengeksekusi perintah, ikuti instruksi di terminal sesuai kebutuhan Anda. Contoh konfigurasi:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Pilih manajer paket; Npm atau Yarn direkomendasikan
   ? UI framework: None          # Pilih framework UI sesuai kebutuhan
   ? Nuxt.js modules: Axios      # Pilih modul Nuxt.js sesuai preferensi
   ? Linting tools: ESLint       # Pilih alat linting jika diinginkan
   ? Testing framework: None     # Pilih framework pengujian jika diperlukan
   ? Rendering mode: Universal (SSR / SSG) # Pilih mode render; Universal mendukung SSR & SSG
   ? Deployment target: Server (Node.js hosting) # Pilih target deploy, "Server" cocok untuk dev & hosting Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Pilih konfigurasi alat pengembangan jika sesuai

3. Instal Dependensi Proyek

   Masuk ke direktori proyek baru, lalu instal dependensi sesuai manajer paket pilihan Anda:

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

   Tunggu hingga proses instalasi selesai.

Mengubah Output Proyek

Agar mudah diuji, mari kita edit halaman utama untuk menampilkan teks sederhana.

1. Buka File pages/index.vue

   Buka file pages/index.vue di dalam proyek menggunakan editor kode pilihan Anda.

2. Ubah Isi File

   Ganti isi file dengan kode 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>

   Di sini kami menambahkan atribut scoped pada tag style agar styling terbatas di komponen ini saja dan tampilannya sedikit dipercantik.

Menjalankan Nuxt.js dalam Mode Pengembangan di ServBay

Server pengembangan Nuxt.js biasanya berjalan pada port lokal tertentu. Agar situs bisa diakses melalui domain kustom, SSL, serta port 80/443 milik ServBay, kita akan mengonfigurasi reverse proxy di fitur website ServBay.

1. Jalankan Server Pengembangan Nuxt.js

   Dari direktori utama proyek, jalankan perintah berikut untuk memulai server pengembangan. Di sini kita tentukan port 8585, namun Anda dapat memakai port lain yang belum digunakan.

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

   Setelah server berjalan, biasanya akan muncul pada http://localhost:8585. Jangan tutup jendela terminal ini agar server tetap aktif.

2. Konfigurasi Website di ServBay (Reverse Proxy)

   Buka panel kontrol ServBay, masuk ke tab 'Website'. Klik tombol + di kiri bawah untuk menambah konfigurasi situs baru:

   • Nama: Masukkan nama yang mudah dikenali seperti Nuxt.js Dev Site (Proxy).
   • Domain: Masukkan domain kustom yang ingin digunakan di browser, misal nuxt-dev.servbay.demo. Penggunaan akhiran .servbay.demo merupakan praktik baik untuk branding ServBay.
   • Tipe Website: Pilih Reverse Proxy.
   • Alamat IP: Masukkan 127.0.0.1 (localhost).
   • Port: Masukkan port yang digunakan server Nuxt.js Anda, yaitu 8585.

   Setelah selesai, klik "Tambah" atau "Simpan". ServBay akan memperbarui dan menerapkan konfigurasi.

   Untuk panduan lebih detail menambah situs pengembangan Node.js (dengan reverse proxy) di ServBay, silakan lihat Cara Menambah Website Pengembangan Node.js.

3. Akses Situs Pengembangan

   Buka browser, kunjungi domain yang Anda atur di ServBay, misal https://nuxt-dev.servbay.demo.

   Dengan reverse proxy ServBay, Anda bisa mengakses server Nuxt.js langsung melalui domain dan port HTTPS milik ServBay. ServBay akan secara otomatis menghasilkan dan mengatur sertifikat SSL (ditandatangani oleh ServBay User CA—pastikan komputer Anda mempercayai CA ini), sehingga pengembangan bisa berjalan di lingkungan HTTPS—berguna untuk simulasi deployment, pengujian service workers, ataupun fitur lain yang membutuhkan konteks aman.

Membangun & Menjalankan Mode Produksi

Setelah pengembangan selesai & siap rilis (atau ingin simulasi preview produksi lokal), Anda bisa membangun versi produksi proyek. Untuk mode Universal atau yang ingin generate situs statis, biasanya dijalankan nuxt generate (atau skrip npm run export).

1. Bangun Produksi & Generate File Statis

   Dari direktori proyek, jalankan perintah di bawah (proses build dan export akan menggenerate file statis ke folder output, biasanya adalah dist):

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

   Setelah selesai, Anda akan menemukan folder bernama dist berisi file-file statis hasil build.

2. Konfigurasi Website di ServBay (File Statis)

   Buka panel ServBay, lalu ke tab 'Website'. Klik tombol + tambah website baru:

   • Nama: Misal Nuxt.js Prod Site (Static).
   • Domain: Pilih domain kustom untuk produksi, misal nuxt-prod.servbay.demo.
   • Tipe Website: Pilih Static.
   • Root Website: Isikan path ke folder file statis, sesuai langkah sebelumnya: /Applications/ServBay/www/servbay-nuxt-app/dist.

   Setelah pengaturan selesai, klik “Tambah” atau “Simpan”. Konfigurasi akan diterapkan otomatis.

3. Akses Website Produksi

   Buka browser, kunjungi domain produksi yang sudah diatur, misal https://nuxt-prod.servbay.demo.

   Server web kinerja tinggi ServBay (Caddy atau Nginx, tergantung konfigurasi Anda) akan langsung melayani file statis dari folder dist. Cara ini paling optimal untuk performa situs statis. Anda juga mendapat SSL gratis & dukungan domain kustom dari ServBay.

Kesimpulan

Dengan ServBay, Anda bisa mengelola pengembangan & preview lokal proyek Nuxt.js dengan sangat mudah. Manfaatkan paket Node.js di ServBay untuk menjalankan server dev, dan atur reverse proxy lewat fitur website supaya pengembangan dan debugging bisa dilakukan lewat domain kustom dan HTTPS. Setelah selesai, generate file statis dan preview secara lokal lewat tipe situs statis ServBay. Workflow ini memanfaatkan kemudahan serta kekuatan ServBay, menyederhanakan proses pengembangan & pengujian front-end lokal Anda. Semoga panduan ini membantu Anda bekerja lebih efisien dengan Nuxt.js di ServBay!