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 direktoripages
, 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:
- Aplikasi ServBay sudah terpasang dengan baik.
- Paket Node.js sudah terinstall dan diaktifkan di ServBay. Cek dan pasang melalui tab "Paket" pada panel kontrol ServBay.
- Paham tentang dasar Node.js, npm (atau Yarn/pnpm), dan perintah terminal.
- (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.
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:
bashcd /Applications/ServBay/www
1Windows:
bashcd C:\ServBay\www
1Inisialisasi Proyek Nuxt.js Baru
Gunakan perintah
npx create-nuxt-app
untuk membuat proyek baru bernamaservbay-nuxt-app
.npx
adalah alat yang disertakan pada npm versi 5.2 ke atas, memungkinkan Anda menjalankan paket npm tanpa harus menginstall secara global.bashnpx create-nuxt-app servbay-nuxt-app
1Ikuti instruksi di terminal untuk melakukan konfigurasi. Anda bisa menyesuaikan pilihan sesuai kebutuhan. Contoh proses konfigurasi:
bash? 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
1
2
3
4
5
6
7
8
9
10Instal Dependensi Proyek
Masuk ke direktori proyek yang baru dan instal semua dependensi yang dibutuhkan:
bashcd servbay-nuxt-app npm install # Atau gunakan Yarn: yarn install # Atau gunakan pnpm: pnpm install
1
2
3
4Tunggu proses instalasi hingga selesai.
Modifikasi Konten Output Proyek
Untuk verifikasi sederhana, kita akan mengubah file halaman utama agar menampilkan teks.
Buka File
pages/index.vue
Gunakan editor kode pilihan Anda untuk membuka file
pages/index.vue
di direktori proyek.Edit Isi File
Ubah isi file seperti berikut agar halaman menampilkan "Hello ServBay!":
html<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22Penambahan 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.
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:
bashcd /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
1
2
3
4Windows:
bashcd 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
1
2
3
4Setelah berjalan, server biasanya aktif di
http://localhost:8585
. Pastikan terminal tetap terbuka agar server terus berjalan.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.
- Nama: Masukkan nama yang mudah dikenali, misalnya
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
).
Build Produksi & Generate File Statis
Dari root proyek, jalankan:
macOS:
bashcd /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
1
2
3
4
5Windows:
bashcd 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
1
2
3
4
5Setelah proses selesai, akan muncul folder
dist
di direktori proyek berisi semua file statis yang telah digenerate.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
- macOS:
Setelah selesai, klik “Tambah” atau “Simpan”. ServBay akan memperbarui pengaturan dan mengaktifkannya.
- Nama: Misalnya,
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!