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

    bash
    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:

    bash
    ✔ 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.

    bash
    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:

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

    bash
    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:

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