Pada artikel ini, kita akan mempelajari cara men-deploy aplikasi React ke GitHub Pages.
Kesederhanaan dalam men-deploy situs web statis dengan GitHub Pages adalah proses yang dapat dengan mudah ditransfer ke aplikasi React. Hanya dengan beberapa langkah, sangat mudah untuk meng-host aplikasi React di GitHub Pages secara gratis atau membuatnya untuk diterapkan di domain atau subdomain kustom Anda sendiri.
Prasyarat
- Akun GitHub
- Familiar dengan perintah-perintah Git
- Node.js terinstal, atau Anda dapat menginstalnya disini
Apa yang dimaksud dengan GitHub Pages?
GitHub Pages adalah layanan dari GitHub yang memungkinkan Anda menambahkan file HTML, JavaScript, dan CSS ke repositori dan membuat situs web statis yang di-host.
Situs web dapat dihosting di domain github.io milik GitHub (misalnya, https://username.github.io/repositoryname) atau di domain kustom Anda sendiri. Aplikasi React dapat di-host di GitHub Pages dengan cara yang sama.
Cara men-deploy aplikasi React ke GitHub Pages
Untuk men-deploy aplikasi React Anda ke GitHub Pages, ikuti langkah-langkah berikut:
- Siapkan aplikasi React Anda
- Buat repositori GitHub untuk proyek Anda
- Push aplikasi React Anda ke repositori GitHub Anda
Menyiapkan aplikasi React
Mari kita mulai dengan membuat aplikasi React baru. Untuk tutorial ini, kita akan menggunakan create-react-app tetapi Anda dapat mengatur proyek sesuai keinginan Anda.
Buka terminal pada komputer Anda dan arahkan ke direktori yang Anda inginkan. Untuk tutorial ini, kita akan membuat proyek di direktori desktop, seperti ini:
cd desktop
Buat aplikasi React menggunakan create-react-app:
npx create-react-app "your-project-name"
Hanya dalam beberapa menit, create-react-app akan selesai menyiapkan aplikasi React baru!
Sekarang, mari kita masuk ke dalam direktori proyek aplikasi React yang baru saja dibuat, seperti ini:
cd "your-project-name"
Tutorial ini terbatas untuk mendemonstrasikan cara men-deploy aplikasi React ke GitHub Pages, jadi kita akan membiarkan pengaturan saat ini seperti apa adanya tanpa membuat perubahan tambahan.
Membuat repositori GitHub
Langkah selanjutnya adalah membuat repositori GitHub untuk menyimpan file dan revisi proyek kita.
Di akun GitHub Anda, klik ikon + di kanan atas dan ikuti petunjuk untuk menyiapkan repositori baru.
Setelah repositori Anda berhasil dibuat, Anda akan melihat halaman yang terlihat seperti ini:
Luar biasa! Mari kita lanjutkan ke langkah berikutnya.
Push aplikasi React ke repositori GitHub
Setelah repositori jarak jauh GitHub disiapkan, langkah selanjutnya adalah menginisialisasi Git di dalam proyek sehingga kita dapat melacak perubahan dan menjaga lingkungan pengembangan lokal tetap sinkron dengan repositori jarak jauh.
Melacak dan menyinkronkan perubahan
Inisialisasi Git dengan perintah berikut:
git init
Push kode ke repositori GitHub
Sekarang, kita akan mengomit kode kita dan mendorongnya ke cabang kita di GitHub. Untuk melakukannya, cukup salin dan tempel kode yang diterima saat Anda membuat repositori baru (lihat tangkapan layar repo di atas).
git commit -m "first commit" git branch -M main git remote add origin https://github.com/varreltantio/testreact.git git push -u origin main
Menambahkan dependency GitHub Pages
Selanjutnya, kita akan memasang paket gh-pages di dalam proyek kita. Paket ini memungkinkan kita untuk memublikasikan berkas build ke dalam cabang gh-pages di GitHub, di mana berkas tersebut dapat dihosting.
Instal gh-pages sebagai dev dependency melalui npm:
npm install gh-pages --save-dev
Menambahkan deploy scripts
Sekarang, mari kita konfigurasikan file package.json sehingga kita dapat mengarahkan repositori GitHub kita ke lokasi di mana aplikasi React kita akan dit-deploy.
Kita juga perlu menambahkan scripts predeploy dan deploy ke file package.json. Script predeploy digunakan untuk mem-bundle aplikasi React. Sedangkan script deploy akan men-deploy berkas yang sudah dibundle.
Pada berkas package.json, tambahkan properti homepage yang mengikuti struktur berikut ini: http://{github-username}.github.io/{repo-name}
Sekarang, mari tambahkan scripts terlebih dahulu.
Di dalam berkas package.json, scroll ke bawah ke properti scripts dan tambahkan perintah berikut:
"predeploy" : "npm run build", "deploy" : "gh-pages -d build",
Selesai! Kita telah selesai mengonfigurasi berkas package.json.
Melakukan perubahan dan mendorong pembaruan kode ke repositori GitHub
Sekarang, mari kita komit perubahan kita dan mendorong kode ke repositori jarak jauh kita, seperti ini:
git add . git commit -m "setup gh-pages" git push
Kita dapat men-deploy aplikasi React kita hanya dengan menjalankan: npm run deploy. Ini akan membuat versi bundel dari aplikasi React kita dan mendorongnya ke cabang gh-pages di repositori jarak jauh di GitHub.
Selamat, Anda telah berhasil men-deploy react apps ke github pages. Untuk melihat hasil deploy, Anda bisa buka properti homepage di package.json atau melalui link berikut http://{github-username}.github.io/{repo-name}