How to Deploy Angular App in Shared Hosting

Angular adalah salah satu framework JavaScript yang populer dan digunakan oleh banyak developer untuk membuat aplikasi web modern dan interaktif. Namun, ketika datang ke deployment, mungkin Anda mengalami sedikit kesulitan. Terutama jika Anda menggunakan shared hosting sebagai tempat hosting Anda.

Step 1: Build Angular App

Langkah pertama dalam deployment adalah membangun aplikasi Angular Anda. Untuk melakukan ini, Anda perlu membuka terminal dan menjalankan perintah berikut:

ng build --prod

Perintah ini akan membangun aplikasi Angular Anda dan menghasilkan file yang siap di-deploy.

Setelah proses build selesai, Anda akan memiliki folder dist di direktori Anda. Isi folder ini adalah file yang siap Anda deploy ke server shared hosting Anda.

Step 2: Upload Files to Shared Hosting

Setelah Anda memiliki file yang siap di-deploy, langkah selanjutnya adalah meng-upload file tersebut ke server shared hosting Anda. Untuk melakukan ini, Anda perlu menggunakan FTP client.

Anda perlu meng-upload seluruh isi folder dist yang dihasilkan oleh perintah ng build ke dalam public_html atau folder yang ditentukan oleh web server Anda.

Pastikan semua file dan folder ter-upload dengan benar dan dapat diakses melalui URL yang benar.

Step 3: Konfigurasi Server

Setelah file ter-upload, Anda perlu mengkonfigurasi server shared hosting Anda agar dapat meng-handle aplikasi Angular Anda.

Pertama, pastikan server shared hosting Anda mendukung teknologi server-side rendering (SSR) seperti Node.js. Jika tidak, Anda perlu meminta provider hosting Anda untuk mengaktifkan fitur ini.

Setelah itu, Anda perlu membuat file .htaccess yang berisi konfigurasi server-side rendering. Berikut adalah contohnya:

RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(.*)$ index.html [L]

File ini akan mengarahkan semua permintaan ke file index.html, yang akan meng-handle routing aplikasi Angular Anda.

Step 4: Testing

Setelah semua konfigurasi selesai, saatnya untuk melakukan testing. Pastikan aplikasi Anda berjalan dengan baik di server shared hosting Anda. Coba akses halaman utama dan navigasikan ke beberapa halaman lain untuk memastikan semuanya berjalan dengan baik.

Jika ada masalah, pastikan untuk memeriksa error log dan melakukan debugging untuk menemukan masalahnya.

Step 5: Enjoy Your Angular App on Shared Hosting

Sekarang, aplikasi Angular Anda sudah siap untuk diakses oleh pengguna di server shared hosting. Nikmati aplikasi Anda dan pastikan untuk melakukan maintenance secara berkala untuk memastikan aplikasi Anda selalu berjalan dengan baik.

Kesimpulan

Deploying aplikasi Angular di shared hosting memang sedikit rumit, namun dengan mengikuti langkah-langkah yang tepat, Anda dapat melakukan deployment dengan mudah. Pastikan untuk membangun aplikasi Anda terlebih dahulu, meng-upload file ke server shared hosting, mengkonfigurasi server, melakukan testing, dan menikmati aplikasi Anda di server shared hosting.