Menyebarkan aplikasi Angular ke halaman GitHub adalah cara yang bagus untuk menghostingnya secara gratis. Angular adalah framework JavaScript yang populer untuk membangun aplikasi satu halaman.

Angular memiliki antarmuka baris perintah komprehensif yang mendukung pembuatan dan pengaturan cepat aplikasi JavaScript. CLI Angular memiliki beberapa perintah untuk membuat, membangun, melayani, dan menghasilkan komponen aplikasi.

Anda juga dapat menggunakan CLI untuk menerapkan aplikasi Angular ke berbagai target, termasuk halaman GitHub.

Apa yang kau butuhkan

Untuk memanfaatkan panduan ini sebaik-baiknya, Anda harus memiliki keterampilan dan alat berikut:

  • Anda harus akrab dengan dasar Angular, seperti konsep aplikasi, setelan, URL, dll.
  • Anda akrab dengan dasar-dasar GitHub dan Git, seperti membuat akun GitHub, membuat repositori git (repo), dan halaman GitHub (halaman GH).
  • Anda memiliki aplikasi Angular yang siap diterapkan.
  • URL dasar Anda berada di jalur yang benar. Penyebaran ke halaman GH gagal karena menyetel base-href (base-url) yang salah.
    • instagram viewer
  • Akun GitHub.
  • Repositori GitHub (repo) dengan kode aplikasi.

Sekarang setelah Anda memiliki semua ini, mari kita mulai proses penerapan.

Proses Penerapan

Untuk memulai, Anda harus membuat repositori GitHub untuk proyek Anda dan memasukkan kode ke utama/tuan cabang.

Selanjutnya, buat cabang GH-pages.

1. Buat Cabang GH-halaman

Ini adalah retasan yang akan membantu Anda mendapatkan tautan GH-pages untuk membantu menyetel base-href.

Pertama, buat halaman GH di repositori lokal Anda dengan perintah berikut:

git cabang gh-halaman

Selanjutnya, periksa dari cabang utama ke halaman GH untuk mentransfer semua kode.

git checkout gh-halaman

Kemudian, dorong GH-pages ke GitHub untuk membuat cabang GH-pages jarak jauh.

git push asal gh-halaman

Pada bilah alat di bawah nama repo, klik Setelan > Laman.

Di bawah Bangun dan terapkan, Pilih Terapkan dari cabang. Selanjutnya, pilih gh-pages sebagai nama cabang, lalu klik Menyimpan. Ini akan membuat link GH-pages di kanan atas di bawah label GH-pages.

Selanjutnya, salin tautan ini ke situs yang diterbitkan seperti yang diilustrasikan di bawah ini. Anda akan menggunakan tautan untuk menyiapkan referensi dasar selama penerapan.

3. Instal halaman Angular-CLI-GH

Paket angular-cli-ghpages adalah alat yang digunakan CLI Angular untuk tujuan penyebaran.

Arahkan kembali ke repositori proyek lokal Anda. Kemudian instal dan jalankan angular-cli-ghpages dengan perintah ini:

ng tambahkan angular-cli-ghpages

4. Terapkan Aplikasi

Untuk membangun aplikasi dalam produksi, Anda harus menghubungkannya ke server jarak jauh di GitHub.

Konfigurasikan aplikasi Anda ke server jarak jauh dengan menjalankan perintah berikut:

ng menyebarkan --base-href=https://GithubUserName.github.io/GithubRepoName/

Ingatlah untuk mengganti tautan di atas dengan tautan langsung dari halaman GH

Build yang berhasil akan terlihat seperti ilustrasi di bawah ini:

Selanjutnya, arahkan ke GitHub dan klik tautan GH-pages untuk melihat proyek yang Anda terapkan.

Selamat, Anda telah menerapkan Aplikasi Angular Anda!

Jika tautan hanya menampilkan file README, harap kembali ke pengaturan GitHub GH-pages. Pastikan cabang yang dipilih adalah gh-pages dan bukan cabang utama atau master. Kemudian beri waktu lima menit dan muat ulang. Terkadang GitHub membutuhkan waktu untuk mencerminkan perubahan.

Untuk mempelajari lebih lanjut tentang cara menggunakan CLI Angular dalam penerapan, kunjungi dokumentasi sudut.

Cara Menerapkan Aplikasi Angular ke Halaman GitHub

Ada beberapa cara untuk menerapkan aplikasi Angular ke halaman GH, tetapi metode ini adalah yang termudah. Anda menyiapkan tautan repo halaman GH dan menggunakannya dengan Angular-CLI untuk menerapkan aplikasi Anda ke halaman GitHub.

Masih banyak lagi yang bisa Anda lakukan dengan Angular dan Angular CLI. Jangan ragu untuk menjelajah. Gunakan CLI untuk menerapkan aplikasi ke halaman GH untuk visibilitas dan hosting gratis untuk aplikasi Anda.