Pengenalan
Angular 4 adalah salah satu framework JavaScript terpopuler yang digunakan untuk membangun aplikasi web modern. Namun, ketika datang untuk melakukan hosting, banyak pengembang mengalami kesulitan untuk menemukan tempat terbaik untuk menjalankan aplikasi mereka. Salah satu solusi yang bisa dipertimbangkan adalah hosting Angular 4 di Github Pages. Artikel ini akan memberikan tutorial lengkap tentang cara melakukan hosting Angular 4 di Github Pages.
Persiapan
Sebelum memulai, pastikan Anda sudah memiliki akun Github dan menginstal Git di komputer Anda. Jika belum, silakan kunjungi situs resmi Github dan instal Git pada perangkat Anda. Setelah itu, buat repo baru di Github dan tambahkan file README.md di dalamnya. Anda akan menggunakannya untuk menjalankan aplikasi Angular 4 Anda di Github Pages.
Langkah 1: Membuat Aplikasi Angular 4
Langkah pertama adalah membuat aplikasi Angular 4. Jika sudah familiar dengan Angular, bisa mempraktikkan membuat aplikasi secara manual. Namun, jika ingin lebih mudah, bisa menggunakan angular-cli yang tersedia dari situs resmi Angular. Setelah itu, buat direktori baru dan beri nama dengan nama aplikasi, lalu masuk ke direktori tersebut dan jalankan perintah ‘ng new nama-aplikasi’.
Proses pembuatan aplikasi akan berjalan, dan setelah selesai, Anda akan memiliki folder baru dengan nama aplikasi. Masuk ke folder tersebut dan jalankan perintah ‘ng build –prod’. Hal ini akan membuat build produksi yang siap untuk dihosting di Github Pages.
Langkah 2: Membuat Branch gh-pages
Jika sudah memiliki aplikasi Angular 4 yang siap untuk dihosting di Github Pages, langkah selanjutnya adalah membuat branch gh-pages di repo Github Anda. Pertama, buka repo di Github dan klik pada tab ‘Settings’. Scroll ke bawah dan cari bagian ‘Github Pages’, kemudian atur source dari Github Pages menjadi branch gh-pages. Setelah itu, klik tombol ‘Save’.
Buka terminal atau command prompt dan masuk ke direktori aplikasi Angular 4 yang sudah diperbarui. Kemudian, gunakan perintah ‘git init’ untuk menginisialisasi repo git, lalu gunakan perintah ‘git remote add origin https://github.com/username/nama-repo.git’ untuk menambahkan repo Github Anda sebagai remote origin. Setelah itu, buat branch baru dengan nama gh-pages dan jalankan perintah ‘git checkout -b gh-pages’ untuk beralih ke branch gh-pages yang baru dibuat.
Langkah 3: Menambahkan file Build ke Branch gh-pages
Selanjutnya, masuk ke direktori dist di dalam folder aplikasi Angular 4, kemudian copy semua file dan direktori yang ada di dalamnya ke direktori utama aplikasi. Pastikan tidak ada file atau direktori yang terlupakan, karena ini akan menyebabkan masalah saat aplikasi dihosting di Github Pages.
Masuk ke repo Github Anda dan pastikan Anda berada di branch gh-pages. Kemudian, tambahkan semua file baru yang sudah di-copy menggunakan perintah ‘git add .’, lalu commit perubahan menggunakan perintah ‘git commit -m “menambahkan build aplikasi”‘. Setelah itu, push perubahan ke branch gh-pages di repo Github menggunakan perintah ‘git push origin gh-pages’.
Langkah 4: Melihat Aplikasi yang Sudah Dihos di Github Pages
Setelah perubahan berhasil dish push ke branch gh-pages di repo Github, aplikasi Angular 4 Anda harus sudah bisa diakses di Github Pages. Buka browser dan kunjungi link ‘https://username.github.io/nama-repo’ untuk melihat hasilnya. Jika semuanya berjalan dengan baik, aplikasi Andat sudah berhasil di-hosting di Github Pages.
Kesimpulan
Hosting aplikasi Angular 4 di Github Pages cukup sederhana jika Anda mengikuti panduan ini. Pastikan Anda telah mempersiapkan akun Github dan menginstal Git, membuat aplikasi Angular 4, membuat branch gh-pages, menambahkan file build ke branch gh-pages, dan memeriksa aplikasi untuk melihat apakah semuanya berjalan dengan baik. Jangan lupa untuk mempromosikan aplikasi Anda dan meningkatkan kunjungan Anda dengan menggunakan teknik SEO yang tepat.