Membuat dan Menjalankan Proyek Angular di ServBay

Ringkasan

Dokumen ini ditujukan untuk memandu Anda membuat, mengonfigurasi, dan menjalankan proyek Angular di lingkungan pengembangan Web lokal ServBay. Kita akan memanfaatkan dukungan Node.js yang kuat dari ServBay serta fitur manajemen situs web (sebelumnya disebut “host”) yang fleksibel untuk dengan mudah mengatur lingkungan pengembangan maupun produksi, serta memastikan akses yang aman melalui domain khusus dan sertifikat SSL. ServBay telah terintegrasi dengan beragam paket pengembangan (“layanan”) seperti Node.js, PHP, Python, Go, Java, database, dan lain-lain, sehingga menjadi pilihan ideal untuk pengembangan full-stack lokal.

Apa itu Angular?

Angular adalah framework frontend open-source yang dikembangkan dan dikelola oleh Google untuk membangun aplikasi halaman tunggal (SPA) yang dinamis dan berkinerja tinggi. Framework ini dibangun menggunakan TypeScript, menyediakan set alat komprehensif serta pola pengembangan yang terstruktur, sangat cocok untuk membangun aplikasi enterprise yang besar dan kompleks.

Fitur dan Keunggulan Utama Angular

• Arsitektur Berbasis Komponen: Antarmuka pengguna dibangun dari komponen yang dapat digunakan kembali, meningkatkan kemudahan pemeliharaan dan skalabilitas kode.
• Dukungan TypeScript: Menyediakan pemeriksaan tipe statis serta fitur pemrograman berorientasi objek yang kuat, meningkatkan kualitas kode dan efisiensi pengembangan.
• Dependency Injection: Membuat komponen lebih mudah diuji dan dikelola dependensinya.
• CLI (Command Line Interface) yang Kuat: Memudahkan pembuatan proyek, generate komponen/layanan/modul, serta proses build dan testing.
• Solusi Bawaan: Sudah menyediakan modul-modul seperti routing, penanganan form, dan HTTP client yang sering digunakan.
• Optimalisasi Performa: Mendukung teknis seperti AOT (Ahead-of-Time) compilation, tree-shaking, dll untuk mengoptimalkan performa aplikasi.

Dengan memadukan Angular dan lingkungan stabil dari ServBay, developer dapat lebih fokus merealisasikan logika bisnis aplikasi.

Prasyarat

Sebelum memulai, pastikan Anda telah:

1. Menginstal ServBay: ServBay telah berhasil diinstal dan dijalankan di macOS Anda.
2. Mengaktifkan Paket Node.js: Pada panel kontrol ServBay, pastikan Anda sudah menginstal dan mengaktifkan versi Node.js yang dibutuhkan. ServBay mendukung instalasi banyak versi Node.js dan mudah untuk beralih antar versi tersebut.

Membuat & Menjalankan Proyek Angular di ServBay

Kita akan menggunakan lingkungan Node.js dari ServBay untuk membuat dan menjalankan proyek Angular. Pada mode pengembangan, kita akan mengonfigurasi reverse proxy dari fitur situs web ServBay ke server dev Angular; untuk mode produksi, kita akan build proyek dan menggunakan layanan file statis ServBay.

1. Membuat Proyek Angular

Pertama, kita perlu menggunakan Angular CLI untuk membuat proyek baru.

1. Instal Angular CLI: Buka Terminal, kemudian instal Angular CLI secara global menggunakan lingkungan Node.js dari ServBay. Jika environment Node.js ServBay belum otomatis ditambahkan ke PATH, Anda mungkin perlu beralih ke environment Node.js milik ServBay. Biasanya, ServBay akan mengatur PATH secara otomatis.

   npm install -g @angular/cli

   Perintah di atas akan menginstal perintah ng pada sistem Anda, sehingga Angular CLI dapat digunakan secara global.

2. Membuat Proyek Angular Baru: Masuk ke direktori root situs web yang disarankan oleh ServBay: /Applications/ServBay/www, lalu buat proyek Angular baru menggunakan perintah ng new. Sebaiknya gunakan nama proyek yang mengandung identitas ServBay, misal servbay-angular-app.

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

   Angular CLI akan menanyakan beberapa pengaturan proyek. Jawab atau pilih preferensi Anda sesuai prompt berikut:

   ? Would you like to add Angular routing? Yes  # Apakah ingin menambah fitur routing, disarankan pilih Yes
   ? Which stylesheet format would you like to use? CSS # Pilih format stylesheet, misalnya CSS

   Setelah proses selesai, CLI akan membuat folder baru bernama servbay-angular-app di /Applications/ServBay/www beserta struktur dan file dasar proyek.

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

   cd servbay-angular-app
   npm install

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

2. Memodifikasi Output Proyek Angular (Opsional)

Untuk memastikan proyek berhasil dijalankan, Anda bisa memodifikasi tampilan halaman depan.

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 modifikasi isinya sehingga hanya menampilkan judul sederhana, misalnya "Hello ServBay!".

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

3. Menjalankan Proyek dalam Mode Pengembangan

Selama pengembangan, Angular CLI menyediakan server pengembangan (ng serve) yang mendukung hot-reload serta pengujian cepat. Kita akan menggunakan fitur reverse proxy dari ServBay, sehingga server dev Angular bisa diakses melalui domain lokal.

1. Jalankan Angular Development Server: Pada root proyek (/Applications/ServBay/www/servbay-angular-app), jalankan perintah berikut untuk menyalakan server pengembangan. Gunakan port khusus, misalnya 8585, agar tidak bentrok dengan port default ServBay.

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

   Perintah ini akan membangun dan menjalankan server web di http://localhost:8585/. Terminal harus tetap terbuka selama server digunakan.

2. Konfigurasi Website di ServBay (Reverse Proxy): Buka panel kontrol ServBay, masuk ke menu “Website” (sebelumnya “Host”). Tambahkan konfigurasi situs baru dan arahkan domain lokal via reverse proxy ke dev-server Angular.

   • Nama (Name): Misalnya My Angular Dev Site (hanya untuk tampilan internal ServBay)
   • Domain: Disarankan gunakan domain tes berbasis ServBay, misal servbay-angular-dev.servbay.demo. ServBay secara otomatis akan memetakan domain .servbay.demo ke lokal 127.0.0.1.
   • Tipe Website (Website Type): Pilih Reverse Proxy.
   • Alamat Proxy (Proxy Address): Masukkan 127.0.0.1.
   • Port Proxy (Proxy Port): Masukkan port yang digunakan pada ng serve, misal 8585.

   Setelah selesai, simpan dan terapkan perubahan pada ServBay.

3. Akses Website Mode Pengembangan: Buka browser dan kunjungi domain Anda, misal https://servbay-angular-dev.servbay.demo.

   Karena ServBay secara otomatis menghasilkan dan mengonfigurasi sertifikat SSL untuk situs lokal (lewat ServBay User CA atau ServBay Public CA), Anda dapat langsung mengakses situs dev lewat HTTPS. Hal ini mensimulasikan lingkungan produksi dan membantu menemukan masalah SSL lebih awal.

4. Build & Menjalankan Versi Produksi

Setelah pengembangan proyek Angular selesai, Anda bisa build versi produksi. Hasil build-nya adalah file statis yang dapat dihosting oleh server file statis mana pun. Di sini, kita akan menggunakan fitur situs statis milik ServBay.

1. Build Versi Produksi: Pada root proyek (/Applications/ServBay/www/servbay-angular-app), jalankan perintah berikut untuk membangun versi produksi:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Atau pada Angular CLI versi terbaru gunakan:
   # ng build

   Opsi --prod (pada versi baru sudah default) mengaktifkan optimasi produksi seperti kompilasi AOT, minifikasi kode, tree-shaking, dsb. Hasil build terletak di folder dist/servbay-angular-app (nama folder sesuai pengaturan, defaultnya nama proyek).

2. Konfigurasi Website ServBay (File Statis): Buka panel kontrol ServBay, masuk ke menu pengaturan website, lalu tambahkan situs baru yang menunjuk ke direktori hasil build produksi tadi.

   • Nama (Name): Misal My Angular Production Site
   • Domain: Disarankan gunakan domain tes ServBay lainnya, misal servbay-angular-prod.servbay.demo.
   • Tipe Website (Website Type): Pilih Static.
   • Root Directory Website: Arahkan ke lokasi output build proyek Anda. Berdasarkan langkah sebelumnya, biasanya di /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Pastikan folder tersebut berisi file index.html.

   Setelah selesai, simpan dan terapkan konfigurasi ServBay.

3. Akses Website Mode Produksi: Buka browser dan kunjungi domain yang Anda atur, misal https://servbay-angular-prod.servbay.demo.

   Anda kini mengakses versi produksi dari aplikasi Angular Anda yang dihosting oleh web server performa tinggi ServBay (Caddy atau Nginx tergantung pengaturan). Sertifikat SSL diatur otomatis untuk akses yang aman.

Keunggulan ServBay dalam Pengembangan Angular

• Lingkungan Terintegrasi: Instal dan kelola banyak versi Node.js dengan mudah di ServBay, tanpa repot setting environment variable secara manual.
• Manajemen Website yang Fleksibel: Setting reverse proxy dan layanan file statis cukup dari antarmuka yang intuitif, serta mudah berpindah antar mode pengembangan dan produksi.
• Dukungan SSL Bawaan: Sediakan dan atur sertifikat SSL gratis secara otomatis untuk pengembangan lokal, mensimulasikan lingkungan produksi HTTPS, dan mencegah peringatan mixed content.
• Mendukung Berbagai Teknologi: Jika proyek Anda juga membutuhkan 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 dapat mengintegrasikan semuanya, menghadirkan lingkungan full-stack lokal yang lengkap. Seluruh paket ini didukung penuh dan diperbarui secara berkala.
• Backup & Restore Data Mudah: ServBay memudahkan backup pengaturan, website, database, hingga sertifikat SSL agar keamanan data pengembangan terjamin.
• Reset Password Database: Tersedia fitur reset password root untuk database MySQL, MariaDB, PostgreSQL, sehingga Anda mudah mengatasi kendala umum pada pengembangan.

Tanya Jawab (FAQ)

• Q: Saya mengalami error command not found: ng saat menjalankan ng new atau ng serve. Bagaimana solusinya? A: Ini biasanya karena Angular CLI belum terinstal atau lingkungan PATH belum benar. Pastikan sudah menjalankan npm install -g @angular/cli serta environment Node.js ServBay sudah ter-setting di PATH. Coba restart terminal/Shell atau aplikasi ServBay Anda.
• Q: Server ng serve gagal dijalankan karena port digunakan program lain. Bagaimana mengatasinya? A: Port (misal 8585) sudah digunakan aplikasi lain. Gunakan parameter --port di ng serve untuk memilih port lain yang masih kosong, misal ng serve --port 8586, dan update juga port di konfigurasi proxy ServBay.
• Q: Saya sudah mengonfigurasi website di ServBay, tapi domain tidak dapat diakses? A: Cek beberapa hal berikut:
  • Pastikan ServBay berjalan.
  • Untuk mode pengembangan, pastikan perintah ng serve masih aktif dan port sudah sama dengan pengaturan reverse proxy.
  • Untuk mode produksi, pastikan Root Directory benar-benar menunjuk ke folder hasil build berisi file index.html (dist/nama-proyek-anda).
  • Periksa log ServBay untuk detail error lebih lanjut.
  • Pastikan domain yang diakses sama persis dengan yang tertera pada konfigurasi situs ServBay.
• Q: Bisakah saya memilih server web di ServBay (Caddy/Nginx/Apache) untuk hosting versi produksi Angular? A: Bisa, ServBay mendukung Caddy, Nginx, dan Apache sebagai server file statis. Saat setup website statis, ServBay otomatis memakai server aktif yang Anda pilih. Semua server tersebut sama-sama optimal melayani file statis.

Kesimpulan

Lewat panduan ini, Anda telah berhasil membuat dan menjalankan proyek Angular di ServBay. Anda juga telah mempelajari cara menggunakan reverse proxy untuk mengakses dev server Angular menggunakan domain lokal, serta membangun dan meng-online-kan versi produksi dengan layanan hosting file statis ServBay. Dengan lingkungan Node.js yang siap pakai, manajemen website yang mudah, dan dukungan SSL bawaan ServBay, workflow pengembangan Angular lokal Anda akan menjadi jauh lebih efisien dan nyaman. Dukungan teknologi stack yang luas juga membuat ServBay menjadi fondasi kokoh untuk pengembangan full-stack di perangkat Anda.