ServBay

Bahasa Indonesia

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Bahasa Indonesia

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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:

  1. Instalasi ServBay: Anda sudah berhasil memasang lingkungan pengembangan lokal ServBay.
  2. 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 ​

  1. 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:

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

    Windows:

    cmd
    cd C:\ServBay\www
npm create vue@latest

    Ikuti 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

  2. Instalasi Dependency

    Setelah inisialisasi proyek selesai, masuk ke folder proyek yang baru dibuat, servbay-vue-app, lalu jalankan perintah npm install untuk mengunduh semua dependency yang dibutuhkan.

    bash
    cd servbay-vue-app
npm install

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>

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.

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

    bash
    npm run dev -- --port 8585

    Terminal akan menampilkan server pengembangan berjalan dan mendengarkan di port yang dipilih, misalnya http://localhost:8585.

  2. 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 ke http://127.0.0.1:8585.

    Untuk langkah detail menambahkan website Node.js di ServBay, silakan lihat Menambahkan Website Development Node.js di ServBay.

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

  1. Build Produksi

    Di root folder proyek, jalankan perintah berikut untuk membangun versi produksi:

    bash
    npm run build

    Proses build akan menghasilkan file-file statis yang telah dioptimalkan, yang secara default disimpan pada folder dist di root proyek.

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

    Setelah disimpan, ServBay akan mengatur web server-nya untuk melayani file statis pada direktori dist.

  3. 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 menjalankan npm 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.