Hosting React on Github

Pendahuluan

React merupakan salah satu framework JavaScript yang populer di kalangan pengembang web. Dengan React, kita dapat membuat aplikasi web dengan tampilan yang dinamis dan interaktif. Namun, untuk mempublikasikan aplikasi React yang telah kita buat, kita memerlukan tempat untuk menyimpan berkas-berkas aplikasi tersebut. Salah satu tempat yang dapat kita gunakan untuk menyimpan aplikasi React adalah Github Pages.

Github Pages adalah layanan dari Github yang memungkinkan kita untuk menyimpan website statis secara gratis. Dengan Github Pages, kita dapat menyimpan berkas-berkas HTML, CSS, dan Javascript secara gratis dan dapat diakses secara publik.

Dalam artikel ini, kita akan membahas cara hosting aplikasi React di Github Pages. Simak terus artikel ini untuk mengetahui langkah-langkahnya.

Langkah-langkah Hosting React di Github Pages

1. Membuat Repository Github

Langkah pertama yang harus kita lakukan adalah membuat repository Github untuk menyimpan aplikasi React kita. Kita dapat membuat repository baru dengan cara klik tombol “New” di halaman utama Github. Setelah itu, kita dapat memberi nama repository sesuai dengan keinginan kita.

Setelah membuat repository baru, kita perlu menghubungkan repository tersebut dengan komputer kita. Kita dapat melakukan hal ini dengan cara membuat clone repository ke dalam komputer kita. Caranya adalah dengan menjalankan perintah git clone di terminal atau command prompt.

Setelah itu, kita dapat membuat aplikasi React di dalam repository tersebut dengan menjalankan perintah “create-react-app”.

2. Mengubah Konfigurasi Aplikasi React

Setelah membuat aplikasi React di dalam repository Github, kita perlu mengubah konfigurasi aplikasi React agar dapat dihosting di Github Pages. Caranya adalah dengan mengubah file package.json dan mengubah homepage menjadi alamat Github Pages kita.

Contohnya, jika alamat Github Pages kita adalah “https://username.github.io/nama-repository”, maka kita perlu mengubah homepage menjadi “https://username.github.io/nama-repository”.

Setelah itu, kita perlu menjalankan perintah “npm run build” untuk membuat file build untuk aplikasi React kita.

3. Mengupload File Build ke Github Pages

Setelah membuat file build untuk aplikasi React kita, kita perlu mengupload file tersebut ke Github Pages. Caranya adalah dengan menjalankan perintah “git add .” untuk menambahkan semua berkas dalam direktori, kemudian menjalankan perintah “git commit” untuk meng-commit perubahan, dan terakhir menjalankan perintah “git push” untuk mengupload file ke Github.

Setelah itu, kita perlu mengaktifkan Github Pages untuk repository kita. Caranya adalah dengan masuk ke halaman repository di Github, klik tab “Settings”, dan cari bagian “Github Pages”. Di bagian tersebut, kita perlu memilih branch dan direktori tempat kita menyimpan file build untuk aplikasi React kita.

Setelah itu, kita dapat mengakses aplikasi React kita dengan alamat “https://username.github.io/nama-repository”.

Kesimpulan

Dalam artikel ini, kita telah membahas cara hosting aplikasi React di Github Pages. Cara ini dapat dilakukan dengan membuat repository Github, mengubah konfigurasi aplikasi React, dan mengupload file build ke Github Pages. Dengan mengikuti langkah-langkah di atas, kita dapat dengan mudah mempublikasikan aplikasi React yang telah kita buat.