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 Angular di ServBay ​

Ringkasan ​

Dokumen ini bertujuan untuk membimbing Anda cara membuat, mengonfigurasi, dan menjalankan proyek Angular di lingkungan pengembangan web lokal menggunakan ServBay. Kita akan memanfaatkan lingkungan Node.js yang kuat dari ServBay serta fitur manajemen situs web (sebelumnya dikenal sebagai "host") yang fleksibel, sehingga memudahkan pengaturan baik untuk lingkungan pengembangan maupun produksi, sekaligus memastikan akses aman melalui domain khusus dan sertifikat SSL. ServBay mengintegrasikan berbagai paket perangkat lunak yang diperlukan untuk pengembangan (disebut "service"), seperti Node.js, PHP, Python, Go, Java, database, dan lain-lain, sehingga sangat ideal untuk pengembangan lokal full-stack.

Apa Itu Angular? ​

Angular adalah framework front-end open source yang dikelola oleh Google untuk membangun aplikasi satu halaman (SPA) yang dinamis dan berperforma tinggi. Angular dibangun di atas TypeScript dan menawarkan himpunan alat yang komprehensif dengan pendekatan pengembangan terstruktur, sangat cocok untuk pengembangan aplikasi enterprise yang besar dan kompleks.

Fitur Utama dan Keunggulan Angular ​

  • Arsitektur Berbasis Komponen: Membangun UI dengan komponen yang bisa digunakan ulang untuk meningkatkan skalabilitas dan pemeliharaan kode.
  • Dukungan TypeScript: Memberikan pengecekan tipe statis dan fitur pemrograman berorientasi objek yang memperbaiki kualitas dan efisiensi pengembangan kode.
  • Dependency Injection: Membantu integrasi dan pengujian komponen dengan lebih mudah serta memudahkan manajemen dependensi.
  • CLI (Command Line Interface) yang Kuat: Mempermudah pembuatan proyek, komponen, service, module, serta tugas build dan testing.
  • Solusi Built-in: Menyediakan modul built-in untuk routing, formulir, HTTP Client, dan kebutuhan umum lain.
  • Optimasi Performa: Mendukung teknik seperti AOT (Ahead-of-Time) compilation dan tree-shaking untuk meningkatkan performa aplikasi.

Dengan menggabungkan Angular dan lingkungan stabil ServBay, developer dapat fokus sepenuhnya pada pengembangan logika bisnis.

Prasyarat ​

Sebelum memulai, pastikan Anda sudah mempersiapkan beberapa hal berikut:

  1. Instal ServBay: Pastikan Anda telah sukses menginstal dan menjalankan ServBay (mendukung macOS & Windows).
  2. Aktifkan Paket Node.js: Di control panel ServBay, pastikan Anda telah menginstal dan mengaktifkan versi Node.js yang dibutuhkan. ServBay mendukung instalasi dan pergantian antara beberapa versi Node.js dengan mudah.

Menyiapkan dan Menjalankan Proyek Angular di ServBay ​

Kita akan menggunakan lingkungan Node.js yang disediakan oleh ServBay untuk membuat dan menjalankan proyek Angular. Di fase pengembangan, kita akan mengatur reverse proxy menggunakan fitur situs ServBay yang mengarah ke server pengembangan Angular. Untuk mode produksi, kita akan membangun proyek lalu mengonfigurasi layanan file statis di ServBay.

1. Membuat Proyek Angular ​

Langkah pertama adalah menggunakan Angular CLI untuk membuat proyek baru.

  1. Instal Angular CLI: Buka terminal Anda, lalu gunakan lingkungan Node.js ServBay untuk menginstal Angular CLI secara global. Jika PATH Node.js ServBay belum otomatis ditambah ke PATH sistem Anda, Anda mungkin perlu beralih dulu ke lingkungan Node.js ServBay. Biasanya ServBay mengatur PATH secara otomatis.

    bash
    npm install -g @angular/cli

    Perintah ini akan menginstal perintah ng ke sistem Anda, sehingga Anda bisa menggunakan Angular CLI secara global.

  2. Membuat Proyek Angular Baru: Pindah ke direktori root situs web yang disarankan ServBay, lalu gunakan ng new untuk membuat proyek Angular baru. Disarankan untuk memakai nama proyek yang merefleksikan branding ServBay, misalnya servbay-angular-app.

    macOS:

    bash
    cd /Applications/ServBay/www
ng new servbay-angular-app

    Windows:

    bash
    cd C:\ServBay\www
ng new servbay-angular-app

    Angular CLI akan menanyakan beberapa pengaturan proyek. Ikuti instruksinya:

    ? Would you like to add Angular routing? Yes  # Tambahkan routing, disarankan pilih Yes
? Which stylesheet format would you like to use? CSS # Pilih format CSS

    Setelah selesai, Angular CLI akan membuat folder servbay-angular-app di root situs Anda berisi struktur dan file dasar:

    • macOS: /Applications/ServBay/www/servbay-angular-app
    • Windows: C:\ServBay\www\servbay-angular-app

  3. Instal Dependensi Proyek: Masuk ke direktori proyek baru, lalu instal seluruh paket dependensi lokal.

    bash
    cd servbay-angular-app
npm install

    Perintah npm install akan membaca file package.json dan menginstal dependensi ke folder node_modules.

2. Modifikasi Output Proyek Angular (Opsional) ​

Untuk memastikan proyek Anda berhasil berjalan, Anda dapat mengubah halaman depan agar menampilkan sesuatu yang sederhana.

  1. Edit File src/app/app.component.html: Gunakan editor favorit Anda untuk membuka file servbay-angular-app/src/app/app.component.html. Hapus atau ganti seluruh kontennya agar hanya memuat judul sederhana, misalnya “Hello ServBay!”.

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Ini adalah aplikasi Angular Anda yang berjalan dengan ServBay!</p>
</div>

3. Menjalankan Proyek di Mode Pengembangan ​

Selama tahap pengembangan, biasanya kita menggunakan server dev bawaan Angular CLI dengan perintah ng serve. Server ini mendukung hot reload agar pengembangan lebih efisien. Kemudian, manfaatkan reverse proxy ServBay agar bisa diakses lewat domain lokal.

  1. Jalankan Angular Development Server: Di root proyek, jalankan perintah di bawah ini untuk memulai server dev. Tentukan port khusus, misalnya 8585, agar tidak bentrok dengan port default server web ServBay.

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585

    Perintah ini akan menjalankan server web di http://localhost:8585/. Pastikan terminal tetap terbuka agar server tetap berjalan.

  2. Konfigurasi Situs ServBay (Reverse Proxy): Buka Control Panel ServBay, lalu ke menu pengaturan “Situs” (website/host). Tambahkan konfigurasi situs baru untuk reverse proxy domain lokal ke server dev Angular.

    • Nama (Name): Misal My Angular Dev Site (untuk tampilan internal ServBay).
    • Domain: Disarankan memakai domain test ServBay seperti servbay-angular-dev.servbay.demo. Domain .servbay.demo otomatis diarahkan ke 127.0.0.1.
    • Tipe Situs (Website Type): Pilih Reverse Proxy.
    • Alamat Proxy (Proxy Address): Gunakan 127.0.0.1.
    • Port Proxy (Proxy Port): Isi port yang Anda gunakan ketika menjalankan ng serve, misal 8585.

    Setelah selesai, simpan dan terapkan perubahan ServBay.

  3. Akses Situs Mode Pengembangan: Buka browser Anda, akses domain lokal yang sudah dikonfigurasi, yaitu https://servbay-angular-dev.servbay.demo.

    Karena akses melalui ServBay, dan ServBay secara default mendukung pembuatan serta konfigurasi sertifikat SSL (dengan ServBay User CA atau ServBay Public CA), Anda bisa langsung mengakses situs pengembangan Anda secara HTTPS. Ini meniru lingkungan produksi dan membuat Anda bisa mengidentifikasi masalah terkait HTTPS lebih awal.

4. Build dan Menjalankan Versi Produksi ​

Setelah pengembangan proyek selesai dan siap rilis, Anda perlu build versi produksi yang sudah dioptimalkan. Versi produksi berupa file statis yang dapat dihosting dengan server file statis manapun. Di sini kita akan memakai fitur situs statis pada ServBay.

  1. Build Versi Produksi: Di root proyek, jalankan perintah berikut untuk membangun versi produksi:

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Untuk versi CLI Angular terbaru cukup gunakan:
# ng build

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# Untuk versi CLI Angular terbaru cukup gunakan:
# ng build

    Flag --prod (di CLI versi baru ini perilaku default) akan mengaktifkan optimasi produksi seperti AOT, kompresi kode, tree-shaking, dan lain-lain. File hasil build akan tersimpan di folder dist/servbay-angular-app (nama folder menyesuaikan dengan konfigurasi proyek Anda).

  2. Konfigurasi Situs ServBay (File Statis): Buka Control Panel ServBay, masuk ke pengaturan “Situs”, lalu tambahkan konfigurasi situs yang domainnya diarahkan ke folder berisi file build produksi.

    • Nama (Name): Contoh My Angular Production Site
    • Domain: Gunakan domain test ServBay lain, misalnya servbay-angular-prod.servbay.demo.
    • Tipe Situs: Pilih Static.
    • Root Directory Situs: Arahkan ke folder hasil build proyek Anda, biasanya:
    • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
    • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

    Pastikan yang dipilih adalah folder yang sudah memuat file index.html.

    Setelah selesai, simpan dan terapkan perubahan.

  3. Akses Situs Mode Produksi: Buka browser Anda dan akses domain yang sudah Anda konfigurasi, misal https://servbay-angular-prod.servbay.demo.

    Anda sekarang melihat versi produksi aplikasi Angular Anda yang dihosting melalui web server berperforma tinggi ServBay (Caddy atau Nginx, tergantung pengaturan). ServBay juga secara otomatis mengatur sertifikat SSL sehingga akses tetap aman.

Keunggulan ServBay untuk Pengembangan Angular ​

  • Lingkungan Terintegrasi: Instal dan kelola Node.js di ServBay tanpa ribet mengatur variabel environment.
  • Manajemen Situs yang Fleksibel: Pengaturan reverse proxy dan file statis mudah lewat tampilan antarmuka—memudahkan switching akses antara mode pengembangan dan produksi.
  • Dukungan SSL Internal: Pengembangan lokal sudah langsung secure dengan sertifikat SSL otomatis, sehingga simulasi HTTPS produksi sangat mudah.
  • Dukungan Multi Teknologi: Bila proyek Anda memakai backend API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, dsb) atau database (MySQL, PostgreSQL, MongoDB, Redis), ServBay bisa mengintegrasikan semuanya—menjadi lingkungan lokal full-stack yang lengkap dan selalu update.
  • Backup & Restore Data: ServBay menyediakan fitur backup konfigurasi, situs, database, dan sertifikat SSL untuk memastikan data lokal Anda tetap aman.
  • Reset Password Database: ServBay punya fitur bawaan mereset password root database MySQL, MariaDB, PostgreSQL, sehingga masalah akses database lokal dapat diselesaikan dengan cepat.

FAQ (Pertanyaan yang Sering Diajukan) ​

  • Q: Saat menjalankan ng new atau ng serve muncul error command not found: ng. Apa solusi? A: Ini berarti Angular CLI belum terinstal dengan benar atau tidak ada di PATH. Pastikan sudah menginstal @angular/cli secara global (npm install -g @angular/cli) dan environment Node.js ServBay sudah masuk ke PATH. Coba restart terminal atau ServBay.
  • Q: ng serve gagal dijalankan dengan pesan port sudah dipakai, apa yang harus dilakukan? A: Port yang Anda pilih (misal 8585) terpakai oleh aplikasi lain. Jalankan ng serve --port PORT_BEBAS (misal ng serve --port 8586) lalu sesuaikan pengaturan port di reverse proxy ServBay.
  • Q: Situs ServBay sudah dikonfigurasi tapi domain tidak bisa diakses? A: Periksa hal berikut:
    • Pastikan ServBay aplikasi sedang berjalan.
    • Untuk mode pengembangan, pastikan ng serve sedang aktif dan listening di port yang sama seperti setingan ServBay.
    • Untuk mode produksi, pastikan root directory di ServBay diarahkan ke folder yang memuat index.html hasil build (dist/nama-proyek-anda).
    • Cek file log ServBay untuk detail error.
    • Pastikan domain yang Anda akses persis sama dengan yang dikonfigurasikan di ServBay.
  • Q: Bisakah saya menggunakan web server berbeda (Caddy/Nginx/Apache) di ServBay untuk host build produksi Angular? A: Bisa, ServBay mendukung Caddy, Nginx, dan Apache sebagai server untuk file statis. Saat pengaturan situs statis dibuat, ServBay akan menggunakan web server aktif dan optimal untuk meng-host file Anda.

Kesimpulan ​

Dengan mengikuti panduan ini, Anda sudah dapat membuat dan menjalankan proyek Angular di lingkungan ServBay—mulai dari development server yang diakses lewat domain lokal reverse proxy, sampai membangun dan meng-host versi produksi lewat layanan file statis ServBay. Didukung ekosistem Node.js, manajemen situs yang efisien, dan SSL otomatis, workflow pengembangan Angular lokal Anda jadi lebih cepat dan profesional. Dukungan stack teknologi penuh ServBay makin memperkuat pondasi untuk pengembangan full-stack di komputer Anda.