Membuat dan Menjalankan Proyek Vue.js dengan ServBay
Vue.js adalah framework JavaScript progresif yang populer untuk membangun antarmuka pengguna. Mudah dipelajari, fleksibel, dan memiliki performa tinggi—sangat cocok untuk membangun aplikasi halaman tunggal (SPA). ServBay adalah lingkungan pengembangan web lokal yang tangguh, menawarkan dukungan Node.js secara praktis dan kompatibel di macOS maupun Windows, membuatnya menjadi platform ideal untuk pengembangan Vue.js.
Panduan ini akan mengupas tuntas cara memanfaatkan ekosistem ServBay untuk membuat proyek Vue.js dari awal, serta cara mengaksesnya di mode pengembangan dan produksi.
Apa itu Vue.js?
Vue.js merupakan framework JavaScript progresif untuk membuat antarmuka pengguna. Berbeda dari framework besar lainnya, Vue dirancang dengan pendekatan pengembangan bertahap bottom-up. Library inti Vue hanya berfokus pada lapisan view—sehingga mudah dipelajari dan dapat dengan mudah diintegrasikan dengan library pihak ketiga atau proyek yang sudah ada. Versi terbaru, Vue 3, menawarkan banyak fitur baru dan peningkatan seperti performa yang lebih baik, ukuran paket yang lebih kecil, dan dukungan TypeScript yang lebih optimal.
Fitur dan Keunggulan Utama Vue 3
- Composition API: Mengorganisasi logika menggunakan function composition, sehingga kode pada komponen besar jadi lebih mudah dikelola dan digunakan ulang.
- Peningkatan Performa: Vue 3 menggunakan objek Proxy untuk sistem reaktifnya, dan algoritma virtual DOM yang dioptimasi, membuat performa semakin meningkat.
- Ukuran Paket Lebih Kecil: Melalui teknik tree-shaking, library inti Vue 3 jadi lebih ringan dan proses loading lebih cepat.
- Dukungan TypeScript Lebih Baik: Vue 3 memberikan definisi tipe TypeScript yang lengkap, sehingga pengalaman mengembangkan aplikasi Vue dengan TypeScript jadi semakin lancar.
- Lifecycle Komponen yang Ditingkatkan: Lifecycle hook baru dan fungsi Setup membuat logika komponen jadi lebih jelas serta mudah dikelola.
Dengan Vue 3, pengembang bisa membangun aplikasi web modern yang responsif secara lebih efektif.
Membuat dan Menjalankan Proyek Vue.js di Lingkungan Terintegrasi ServBay
Pada artikel ini, kita akan memanfaatkan lingkungan Node.js yang disediakan ServBay untuk membuat dan menjalankan proyek Vue.js. Kita juga akan menggunakan fitur Website di ServBay untuk mengatur server web, melakukan reverse proxy, serta layanan file statis untuk akses lokal ke proyek Anda.
Prasyarat
Sebelum memulai, pastikan Anda telah melakukan hal berikut:
- Instalasi ServBay: Anda sudah berhasil memasang lingkungan pengembangan lokal ServBay.
- Instalasi Paket Node.js: Melalui fitur manajemen paket ServBay, Anda telah memasang paket Node.js. Ikuti langkah detailnya pada Cara Menginstal dan Menggunakan Node.js di ServBay.
Membuat Proyek Vue.js
Inisialisasi Proyek
Buka aplikasi terminal Anda. ServBay menyarankan untuk menyimpan situs proyek pada direktori default. Masuk ke direktori tersebut dan jalankan perintah
npm create vue@latest
untuk menginisialisasi proyek Vue.js baru. Penambahan@latest
memastikan Anda menggunakan versi terbaru dari Vue CLI atau tool create-vue, yang biasanya menghasilkan proyek Vue 3.macOS:
bashcd /Applications/ServBay/www npm create vue@latest
1
2Windows:
cmdcd C:\ServBay\www npm create vue@latest
1
2Ikuti instruksi pada terminal untuk memasukkan nama proyek (disarankan untuk menamainya
servbay-vue-app
), serta pilih fitur tambahan seperti TypeScript, Vue Router, Pinia, dan lain-lain sesuai kebutuhan. Berikut contoh konfigurasi:bash✔ Project name: … servbay-vue-app ✔ Add TypeScript? … No # Pilih Yes atau No sesuai kebutuhan Anda ✔ Add JSX Support? … No # Pilih Yes atau No sesuai kebutuhan Anda ✔ Add Vue Router for Single Page Application development? … Yes # Dianjurkan memilih Yes ✔ Add Pinia for state management? … No # Pilih Yes atau No sesuai kebutuhan Anda ✔ Add Vitest for Unit testing? … No # Pilih Yes atau No sesuai kebutuhan Anda ✔ Add an End-to-End Testing Solution? … No # Pilih Yes atau No sesuai kebutuhan Anda ✔ Add ESLint for code quality? … Yes # Dianjurkan memilih Yes ✔ Add Prettier for code formatting? … Yes # Dianjurkan memilih Yes ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Pilih Yes atau No sesuai kebutuhan Anda
1
2
3
4
5
6
7
8
9
10Instalasi Dependency
Setelah inisialisasi proyek selesai, masuk ke folder proyek yang baru dibuat,
servbay-vue-app
, lalu jalankan perintahnpm install
untuk mengunduh semua dependency yang dibutuhkan.bashcd servbay-vue-app npm install
1
2
Mengubah Contoh Konten Proyek (Opsional)
Untuk memastikan proyek berjalan dengan baik, Anda bisa mengubah file src/App.vue
agar menampilkan "Hello ServBay!" secara sederhana.
Buka file src/App.vue
pada folder proyek Anda, lalu ubah isinya menjadi:
html
<template>
<div id="app">
<h1>Hello ServBay!</h1>
<p>Ini adalah aplikasi Vue.js yang berjalan dengan 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Mengatur Lingkungan Pengembangan (Menggunakan Reverse Proxy)
Pada mode pengembangan, proyek Vue biasanya menjalankan server lokal (berbasis Vite atau Webpack) yang menyediakan fitur seperti Hot Module Reload (HMR) untuk memudahkan proses development. ServBay dapat mengarahkan domain lokal ke server pengembangan ini dengan reverse proxy.
Menjalankan Server Pengembangan
Di root folder proyek, jalankan perintah berikut untuk menyalakan server pengembangan. Gunakan parameter
--port
(misal: 8585) untuk menentukan port, pastikan port tersebut tidak digunakan aplikasi lain.bashnpm run dev -- --port 8585
1Terminal akan menampilkan server pengembangan berjalan dan mendengarkan di port yang dipilih, misalnya
http://localhost:8585
.Mengatur Reverse Proxy Website di ServBay
Buka antarmuka aplikasi ServBay, lalu masuk ke pengaturan Website. Tambahkan konfigurasi website baru dengan tipe Reverse Proxy:
- Name:
My first Vue dev site
(atau nama lain yang mudah diidentifikasi) - Domain:
servbay-vue-dev.servbay.demo
(atau domain.servbay.demo
pilihan Anda) - Site Type:
Reverse Proxy
- Reverse Proxy Target IP:
127.0.0.1
- Reverse Proxy Target Port:
8585
(sesuaikan dengan port server pengembangan Anda)
Setelah disimpan, ServBay akan memperbarui pengaturan web server (Caddy atau Nginx) dan mem-proxy permintaan ke domain
servbay-vue-dev.servbay.demo
kehttp://127.0.0.1:8585
.Untuk langkah detail menambahkan website Node.js di ServBay, silakan lihat Menambahkan Website Development Node.js di ServBay.
- Name:
Akses Mode Pengembangan
Pastikan web server ServBay berjalan. Buka browser dan akses domain yang telah Anda setup:
https://servbay-vue-dev.servbay.demo
.Karena ServBay mendukung konfigurasi otomatis sertifikat SSL untuk domain lokal (melalui ServBay User CA atau ServBay Public CA), Anda bisa langsung mengakses aplikasi pengembangan secara aman dengan HTTPS—sangat menyerupai lingkungan produksi. Untuk detail pengaturan SSL, lihat Mengatur SSL Certificate untuk Website di ServBay.
Anda seharusnya sekarang dapat melihat aplikasi Vue berjalan di mode pengembangan di browser, serta menikmati fitur hot reload ketika kode diperbarui.
Membuat Build Produksi & Deploy (Menggunakan Layanan Situs Statis)
Ketika pengembangan selesai dan proyek siap dipublikasikan, Anda perlu membangun versi produksi yang sudah dioptimalkan. Build ini biasanya berisi file statis (HTML, CSS, JavaScript, dll.), dan dapat diekspos melalui fitur website statis ServBay.
Build Produksi
Di root folder proyek, jalankan perintah berikut untuk membangun versi produksi:
bashnpm run build
1Proses build akan menghasilkan file-file statis yang telah dioptimalkan, yang secara default disimpan pada folder
dist
di root proyek.Pengaturan Layanan File Statis
Buka aplikasi ServBay, masuk ke pengaturan Website dan tambahkan konfigurasi baru dengan tipe Static:
- Name:
My first Vue production site
(atau nama lain yang mudah dikenali) - Domain:
servbay-vue-prod.servbay.demo
(atau domain.servbay.demo
pilihan Anda) - Site Type:
Static
- Root Directory: arahkan ke path absolut folder
dist
hasil build proyek Anda:- macOS:
/Applications/ServBay/www/servbay-vue-app/dist
- Windows:
C:\ServBay\www\servbay-vue-app\dist
- macOS:
Setelah disimpan, ServBay akan mengatur web server-nya untuk melayani file statis pada direktori
dist
.- Name:
Akses Mode Produksi
Pastikan web server ServBay berjalan. Buka browser dan akses domain yang telah Anda setup untuk versi produksi:
https://servbay-vue-prod.servbay.demo
.Pada tahap ini, apa yang Anda lihat adalah aplikasi Vue versi produksi yang sudah dioptimalkan—siap memberikan performa terbaik. Dengan fitur domain kustom dan SSL otomatis dari ServBay, Anda juga dapat dengan aman melakukan pengujian dan preview situs produksi di lokal.
Catatan Penting
- Konflik Port: Jika port
8585
(atau port lain yang Anda pilih untuk menjalankannpm run dev
) dipakai aplikasi lain, perintah akan gagal. Silakan gunakan port yang berbeda dan pastikan konfigurasi reverse proxy ServBay juga ikut diperbarui. - Status Web Server ServBay: Pastikan web server ServBay (Caddy atau Nginx, tergantung konfigurasi Anda) dalam keadaan aktif. Jika tidak, website tidak bisa diakses dengan domain yang telah Anda setup.
- Resolusi Domain: ServBay secara otomatis akan memetakan domain
.servbay.demo
yang Anda tambahkan di pengaturan Website ke alamat lokal (127.0.0.1
). Jika menggunakan domain lain, Anda mungkin perlu mengedit file hosts system secara manual atau gunakan fitur Hosts Manager ServBay untuk memastikan resolusi alamat berjalan lancar.
Kesimpulan
ServBay memudahkan Anda membangun lingkungan pengembangan Node.js terintegrasi di macOS maupun Windows, serta mengelola siklus pengembangan dan deployment proyek Vue.js dengan mudah. Fitur Website di ServBay memungkinkan Anda untuk dengan cepat mengonfigurasi reverse proxy untuk server pengembangan, atau melayani file build produksi secara langsung—dilengkapi keunggulan domain kustom dan SSL otomatis demi keamanan dan kenyamanan. Ini semua sangat menyederhanakan proses setup dan alur kerja proyek Vue.js lokal Anda.