Membuat dan Menjalankan Proyek Vue.js di macOS dengan ServBay

Vue.js adalah framework JavaScript progresif yang populer untuk membangun antarmuka pengguna. Framework ini mudah dipelajari, fleksibel, dan memiliki performa tinggi, sangat ideal untuk membangun aplikasi satu halaman (SPA). ServBay, sebagai lingkungan pengembangan web lokal yang kuat, menyediakan dukungan Node.js yang praktis untuk developer, menjadikannya platform terbaik dalam pengembangan Vue.js di macOS.

Panduan ini akan memaparkan secara detail cara memanfaatkan lingkungan terintegrasi ServBay untuk membuat proyek Vue.js dari nol, serta mengaksesnya melalui ServBay dalam mode pengembangan dan produksi.

Apa itu Vue.js?

Vue.js adalah framework JavaScript progresif untuk membangun antarmuka pengguna. Berbeda dari framework besar lainnya, Vue dirancang dengan pendekatan pengembangan bertahap dari bawah ke atas. Inti library Vue hanya fokus pada layer view, sehingga mudah digunakan dan gampang dipadukan dengan library pihak ketiga maupun proyek yang sudah ada. Vue 3—versi terbaru—menawarkan banyak fitur serta peningkatan baru, termasuk performa lebih cepat, ukuran bundle lebih kecil, dan dukungan TypeScript yang lebih baik.

Fitur Utama dan Keunggulan Vue 3

• Composition API: Mengorganisasi logika kode dengan fungsi komposisi, sehingga kode komponen besar lebih mudah dikelola dan digunakan ulang.
• Peningkatan Performa: Vue 3 memanfaatkan objek Proxy untuk sistem reaktivitas dan optimalisasi algoritma virtual DOM, menghasilkan peningkatan performa yang signifikan.
• Ukuran Bundle Lebih Kecil: Melalui teknik tree-shaking, library inti Vue 3 menjadi lebih kecil dan proses loading lebih cepat.
• Dukungan TypeScript yang Lebih Baik: Vue 3 memiliki definisi tipe TypeScript yang lebih lengkap sehingga pengalaman mengembangkan aplikasi Vue dengan TypeScript semakin baik.
• Lifecycle Komponen yang Ditingkatkan: Lifecycle hook dan fungsi Setup yang baru membuat logika komponen menjadi lebih jelas dan mudah dikelola.

Menggunakan Vue 3 akan membantu developer membangun aplikasi web modern yang responsif dan efisien.

Membuat dan Menjalankan Proyek Vue.js dengan Lingkungan Terintegrasi ServBay

Pada artikel ini, kita akan menggunakan lingkungan Node.js yang disediakan ServBay untuk membuat dan menjalankan proyek Vue.js. Fitur Website di ServBay akan dimanfaatkan untuk mengonfigurasi web server—mengaktifkan reverse proxy dan layanan file statis agar proyek dapat diakses secara lokal.

Prasyarat

Sebelum memulai, pastikan Anda telah menyelesaikan persiapan berikut:

1. Install ServBay: ServBay telah terpasang dengan sukses di macOS Anda.
2. Install Paket Node.js: Anda telah menginstal paket Node.js melalui fitur manajemen paket ServBay. Langkah rinci dapat dibaca di Menginstal dan Menggunakan Node.js di ServBay.

Membuat Proyek Vue.js

1. Inisialisasi Proyek

   Pertama, buka aplikasi terminal Anda. Direkomendasikan untuk menempatkan proyek website pada direktori /Applications/ServBay/www. Masuk ke direktori tersebut dan gunakan perintah npm create vue@latest untuk menginisialisasi proyek Vue.js baru. Penggunaan @latest memastikan Anda menggunakan versi terkini dari Vue CLI atau create-vue tool, biasanya menghasilkan proyek Vue 3.

   cd /Applications/ServBay/www
   npm create vue@latest

   Ikuti instruksi di terminal untuk memberi nama proyek (misalnya servbay-vue-app), serta pilih apakah ingin menambahkan TypeScript, Vue Router, Pinia, dan fitur lain sesuai kebutuhan. Contoh konfigurasi sebagai berikut:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Pilih Yes atau No sesuai kebutuhan
   ✔ Add JSX Support? … No # Pilih Yes atau No sesuai kebutuhan
   ✔ Add Vue Router for Single Page Application development? … Yes # Disarankan pilih Yes
   ✔ Add Pinia for state management? … No # Pilih Yes atau No sesuai kebutuhan
   ✔ Add Vitest for Unit testing? … No # Pilih Yes atau No sesuai kebutuhan
   ✔ Add an End-to-End Testing Solution? … No # Pilih Yes atau No sesuai kebutuhan
   ✔ Add ESLint for code quality? … Yes # Disarankan pilih Yes
   ✔ Add Prettier for code formatting? … Yes # Disarankan pilih Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Pilih Yes atau No sesuai kebutuhan

2. Install Dependensi

   Setelah proyek selesai diinisialisasi, masuk ke direktori proyek yang baru servbay-vue-app, lalu jalankan perintah npm install untuk memasang semua dependensi yang diperlukan proyek.

   cd servbay-vue-app
   npm install

Ubah Konten Contoh Proyek (Opsional)

Untuk memastikan proyek berhasil dijalankan, Anda dapat mengubah file src/App.vue dan mengganti konten default dengan output sederhana "Hello ServBay!".

Buka file src/App.vue di direktori proyek dan ubah isinya menjadi:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Ini adalah aplikasi Vue.js yang berjalan melalui ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Mengatur Lingkungan Pengembangan (Menggunakan Reverse Proxy)

Pada mode pengembangan, proyek Vue umumnya berjalan dengan server lokal (berbasis Vite atau Webpack) yang menyediakan Hot Module Reload (HMR) dan fitur kemudahan lain untuk developer. ServBay dapat memetakan domain lokal ke alamat dan port server pengembangan ini dengan reverse proxy.

1. Menjalankan Server Pengembangan

   Pada direktori root proyek, jalankan perintah di bawah untuk memulai server pengembangan. Gunakan argumen --port untuk menentukan port yang akan digunakan (misal: 8585) dan pastikan port tersebut belum digunakan aplikasi lain.

   npm run dev -- --port 8585

   Terminal akan menampilkan bahwa server telah berjalan dan mendengarkan di port yang Anda tentukan, misal di http://localhost:8585.

2. Konfigurasi Reverse Proxy Website di ServBay

   Buka aplikasi ServBay, navigasikan ke pengaturan Website. Tambahkan konfigurasi website baru dan pilih tipe Reverse Proxy:

   • Nama: My first Vue dev site (atau nama lain yang mudah dikenali)
   • Domain: servbay-vue-dev.servbay.demo (atau domain .servbay.demo lain sesuai keinginan)
   • Tipe Website: Reverse Proxy
   • Target IP Reverse Proxy: 127.0.0.1
   • Port Target Reverse Proxy: 8585 (disamakan dengan port pada server pengembangan)

   Setelah disimpan, ServBay akan memperbarui konfigurasi web server (Caddy atau Nginx) otomatis agar domain servbay-vue-dev.servbay.demo mengarah ke http://127.0.0.1:8585.

   Untuk panduan langkah lebih rinci membuat website Node.js di ServBay, lihat Menambahkan Website Pengembangan Node.js di ServBay.

3. Akses Mode Pengembangan

   Pastikan web server ServBay berjalan. Buka browser dan akses domain yang tadi dikonfigurasi: https://servbay-vue-dev.servbay.demo.

   Karena ServBay mendukung pengaturan otomatis sertifikat SSL untuk domain lokal (melewati ServBay User CA atau ServBay Public CA), Anda bisa langsung mengakses website pengembangan lokal dengan aman menggunakan HTTPS—layaknya lingkungan produksi. Untuk detail pengaturan SSL, baca Mengonfigurasi Sertifikat SSL untuk Website di ServBay.

   Sekarang aplikasi Vue Anda akan terlihat berjalan dalam mode pengembangan di browser, dan Anda bisa menikmati hot reload setiap kali ada perubahan kode.

Build Versi Produksi dan Deployment (Menggunakan Layanan Website Statis)

Setelah pengembangan selesai dan siap deploy, proyek Vue.js Anda perlu di-build terlebih dahulu untuk produksi. Build produksi ini berupa kumpulan file statis (HTML, CSS, JavaScript) yang dapat langsung di-deploy melalui fitur website statis ServBay.

1. Build Versi Produksi

   Pada direktori root proyek, jalankan perintah berikut untuk build produksi:

   npm run build

   Proses ini akan menghasilkan file statis yang teroptimasi dan sudah dibundel di folder dist di root proyek.

2. Mengatur Layanan File Statis

   Buka aplikasi ServBay, navigasi ke pengaturan Website, lalu tambahkan konfigurasi website baru dengan tipe Static:

   • Nama: My first Vue production site (atau nama lain yang mudah dikenali)
   • Domain: servbay-vue-prod.servbay.demo (atau domain .servbay.demo lain sesuai selera)
   • Tipe Website: Static
   • Root Directory Website: /Applications/ServBay/www/servbay-vue-app/dist (alamat penuh ke direktori dist hasil build)

   Setelah konfigurasi disimpan, ServBay akan mengarahkan web server untuk melayani file statis dari direktori dist tersebut.

3. Akses Mode Produksi

   Pastikan web server ServBay berjalan. Buka browser dan akses domain khusus build produksi Anda: https://servbay-vue-prod.servbay.demo.

   Anda akan melihat aplikasi Vue build produksi yang sudah dioptimalkan untuk performa dan loading terbaik. Dengan fitur custom domain dan SSL otomatis di ServBay, Anda juga dapat mengecek dan meninjau situs produksi Anda secara lokal dengan aman.

Hal yang Perlu Diperhatikan

• Konflik Port: Jika port yang Anda masukkan untuk npm run dev (8585 atau lainnya) sudah digunakan aplikasi lain, akan muncul error. Cobalah gunakan port lain yang masih kosong, dan pastikan pengaturan port reverse proxy di ServBay juga ikut diperbarui.
• Status Web Server ServBay: Pastikan web server (Caddy atau Nginx—sesuai konfigurasi ServBay Anda) dalam keadaan berjalan, jika tidak maka domain website tidak bisa diakses.
• Resolusi Domain: ServBay akan otomatis mengatur domain .servbay.demo yang ditambahkan pada pengaturan Website agar mengarah ke lokal (127.0.0.1). Jika Anda menggunakan domain lain, Anda mungkin perlu mengedit file hosts sistem secara manual atau menggunakan fitur Hosts Manager di ServBay agar domain mengarah ke lokal dengan benar.

Ringkasan

Dengan ServBay, Anda dapat dengan mudah membangun lingkungan pengembangan lokal terintegrasi Node.js di macOS, sekaligus mengelola pengembangan dan deployment produksi proyek Vue.js. Fitur Website pada ServBay memudahkan pengaturan reverse proxy untuk akses server pengembangan, atau layanan file statis untuk build produksi—dan Anda mendapatkan kemudahan serta keamanan dari domain kustom dan SSL otomatis. Semua ini menyederhanakan proses setup proyek Vue.js lokal Anda dan mempercepat alur kerja pengembangan.