Meluncurkan sebuah Aplikasi React* ke GitHub Pages (Halaman Github)

* dibuat menggunakan create-react-app

Sumber asli

Kredit untuk gitname, click here for original tutorial

Permulaan

Dalam tutorial ini, Aku akan tunjukkan gimana caranya bisa membuat Aplikasi React dan meluncurkannya ke GitHub Pages.

Untuk membuatnya, kalian gunakan perintah create-react-app (membutuhkan npm), yaitu alat yang membuat aplikasi React dari awal. Setelah itu, kalian bisa gunakan gh-pages, untuk meluncurkan situs web kalian ke GitHub Pages, sebuah layanan web hosting gratis dari Github.

Jika kalian mengikuti tutorial ini dengan benar, kalian akan mendapatkan Aplikasi React benar-benar dijalankan di Github.

Terjemahan

Tutorial ini telah diterjemahkan dari Bahasa Inggris ke dalam bahasa berikut:

• Cina Tradisional (kredit: @creaper9487)

Tutorial

Persyaratan

1. Node dan npm. Versi yang lebih baru, biasanya lebih baik:

   $ node --version
   v21.6.2
   
   $ npm --version
   10.2.4

   dimana perintah yang digunakan adalah npm dan npx. Perintah ini akan dipakai di sini.

2. Git. Bisa dipasang di Windows, Mac, Linux, maupun Android.

   $ git --version
   git version 2.44.0

3. Akun GitHub.

4. Khusus kamu pengguna Android, gunakan Termux:

   • Izinkan Termux menggunakan penyimpanan ponselmu

     $ termux-setup-storage

   • Tingkatkan paket Termux ke versi baru

     $ pkg upgrade && pkg update

   • Pasang git dan nodejs

     $ pkg install git && pkg install nodejs

   Jika sudah, lanjut ke bagian Prosedur.

Prosedur

1. Buat repositori kosong lewat GitHub

1. Masuk ke akun Github.
2. Kunjungi formulir Create a new repository.
3. Isi sesuai data berikut:

   • Repository name: Namanya bebas*.

     * Untuk situs proyek, kalian bisa masukkan nama apa saja. Sedangkan situs pengguna, GitHub membutuhkan nama repositori yang sesuai format berikut: {username}.github.io (contohnya gitname.github.io)

     Nama yang sudah kalian masukkan tadi akan muncul di beberapa tempat: (a) di dalam referensi repositori melalui Github, (b) tautan repositori, dan (c) in tautan tempat aplikasi React diluncurkan.

     Dalam tutorial ini, aku akan pilih sebagai situs proyek.

     Aku akan namai: react-gh-pages

   • Privasi repositori: Pilih Publik (atau Privat*).

     * Untuk pengguna GitHub versi gratis, hanya bisa memilih Publik untuk menjalankan Github Pages. Sedangkan pengguna GitHub Pro (dan pengguna berbayar lainnya), baik repositori Publik maupun Privat bisa digunakan untuk GitHub Pages.

     Karena kita pengguna gratisan, maka kita pilih: Publik

   • Inisiasi repositori: Biarkan semua kotak centang kosong.

     Karena itu akan membuat repositori menjadi kosong, daripada mengisinya dengan file README.md, .gitignore, dan/atau LICENSE.

4. Setelah dirasa tidak ada yang terlewat, klik Submit.

Sampai di sini, kita sudah membuat repositori kosong, yang akan diisi dengan aplikasi React milik kita.

2. Buat Aplikasi React

1. Buat aplikasi react dengan nama my-app:

   Jika kalian mau nama yang lain (seperti react-cantiks, dsb.), kalian bisa menggantinya dengan nama yang lain (contohnya my-app --> react-cantiks).

   $ npx create-react-app my-app

   Perintah ini akan membuat proyek baru dengan bahasa program Javascript. Yang mau pakai TypeScript, kalian bisa gunakan perintah ini:

   $ npx create-react-app my-app --template typescript

   Kedua perintah di atas (pilih salah satu) akan membuat sebuah folder bernama my-app (atau sesuai nama yang kalian mau tadi,) yang isinya adalah aplikasi React beserta alat-alat esensial lainnya.

   Sebagai info tambahan, folder itu juga adalah repositori Git. Akan dijelaskan lebih lanjut pada Langkah 6

   Nama Branch: master vs. main

   Repositori Git akan mempunyai satu branch, namanya (a) master, nama asal dari pemasangan Git yang segar; atau (b) nilai dari pengkonfigurasi Git, init.defaultBranch, jika perangkat kalian menjalankan Git 2.28 atau lebih baru dan kalian sudah menetapkan variabel itu dalam konfigurasi Git (misalnya lewat perintah $ git config --global init.defaultBranch main).

   Karena aku tidak menetapkan nilainya, branch yang ada di repositoriku dinamakan master. Jika saja nama branch kalian berbeda (bisa dicek dengan $ git branch), seperti main; kalian bisa ganti nama branch yang ada di keseluruhan tutorial dengan nama lain (contohnya master → main).

2. Masuk ke folder proyek yang telah kita buat:

   $ cd my-app

Sampai di sini, kita sudah masuk di dalam folder proyek React beserta sumber kode di dalamnya. Sisa perintah yang ada di bawah ini dapat dijalankan dalam folder tersebut.

3. Pasang paket npm gh-pages

1. Pasang paket npm gh-pages dan pilih sebagai development dependency:

   $ npm install gh-pages --save-dev

Sampai di sini, gh-pages sudah terpasang di perangkat kita dan aplikasi React kita sudah terhubung di dalam file package.json.

4. Tambah properti homepage ke dalam file package.json

1. Edit file package.json menggunakan teks editor.

   $ vi package.json

   Dalam tutorial ini, aku menggunakan vi. Kalau gak tau, kalian bisa gunakan aplikasi teks editor yang lain, misalnya Visual Studio Code. Atau, untuk pengguna Android, bisa menggunakan teks editor bawaan Termux dengan perintah $ nano package.json.

2. Tambah properti homepage dalam format ini*: https://{username}.github.io/{nama-repo}

   * Untuk situs proyek, itu tadi formatnya. Sedangkan untuk situs pengguna, formatnya: https://{username}.github.io. Kalian bisa baca lebih jelasnya properti homepage ini di halaman "GitHub Pages" tentang peluncuran situs halaman.

   {
     "name": "my-app",
     "version": "0.1.0",
   + "homepage": "https://gitname.github.io/react-gh-pages",
     "private": true,

Sampai saat ini, file package.json aplikasi React ini telah ditambahkan properti homepage.

5. Tambahkan skrip peluncuran ke dalam file package.json

1. Buka lagi file package.json (kalau misalnya sudah disimpan, tapi mau diedit lagi).

   $ vi package.json

2. Tambahkan properti predeploy serta deploy ke dalam obyek scripts:

   "scripts": {
   +   "predeploy": "npm run build",
   +   "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",

Sampai di sini, aplikasi React sudah bisa diluncurkan.

6. Tambahkan "remote" yang mengarah pada repositori Github

1. Khusus yang baru memasang Git, inisiasi terlebih dulu Git ke dalam folder aplikasi React kalian dengan perintah ini:

   $ cd my-app
   $ git init
   $ git add .
   $ git config --global user.name {nama-akun-github}

   Ini untuk mencegah error pada saat menggunakan perintah selanjutnya.

2. Tambahkan "remote" ke dalam repositori Git lokal:

   $ git remote add origin https://github.com/{username}/{nama-repo}.git

   Sebagai contoh, kutulis seperti ini:

   $ git remote add origin https://github.com/gitname/react-gh-pages.git

   Perintah ini mengotomatisasi perintah $ git push ke dalam repositori Github yang sudah kita buat sebelumnya pada Langkah 1.

7. Dorong Aplikasi React ke Repositori Github

1. Dorong Aplikasi React milik kita menggunakan perintah ini:

   $ npm run deploy

   Yang akan menyebabkan skrip predeploy dan deploy yang sudah ditulis di file package.json dijalankan.

   Skrip predeploy akan membuat aplikasi React versi distribusi dan disetor ke dalam forder bernama build. Lalu, skrip deploy akan mendorong konten dalam folder tersebut dalam sebuah commit baru branchgh-pages repositori Github, kalau belum ada.

   Secara default, commit baru di branch gh-pages akan ada pesan commit yakni "Updates". Kalian bisa menentukan pesan sendiri lewat opsi -m, seperti ini:

   $ npm run deploy -- -m "Luncurkan aplikasi React ke Github"

Sampai di sini, repositori Github berisi branch bernama gh-pages, di mana isinya adalah file aplikasi React versi distribusi. Bagaimanapun, kita belum mengatur Github Pages untuk menjalankan file tersebut.

8. Atur GitHub Pages

1. Cari menu pengaturan GitHub Pages
   1. Di browser kalian, masuk ke repositori Github kalian.
   2. Di atas browser kode, klik pada tab yang berlabel "Settings".
   3. Di menu samping, tepatnya bagian "Code and automation", klik "Pages".
2. Atur pengaturan "Build and deployment" seperti ini:
   1. Source: Deploy from a branch
   2. Branch:
      • Branch: gh-pages
      • Folder: / (root)
3. Klik tombol "Save".

Itu dia! Aplikasi React kita sekarang sudah meluncur! 🚀

Sampai di sini, kalian sudah bisa membagikan URL aplikasi React ke teman-teman (ada di Langkah 4.) Sebagai contoh, URL milikku adalah https://gitname.github.io/react-gh-pages.

9. (Yang ini boleh di-skip) Setor kode sumber aplikasi React ke GitHub

1. Commit perubahan ketika kalian mengikuti tutorial ini ke branch repositori Git lokal master; setelah itu, dorong ke branch repositori Github master milik kalian.

   $ git add .
   $ git commit -m "Penambahan kode sumber aplikasi React"
   $ git push origin master

   Di titik ini, aku menyarankan untuk menjelajahi repositori. Akan ada dua branche: master dan gh-pages. Branch master berisi kode sumber aplikasi React, sedangkan branch gh-pages berisi aplikasi React versi distribusi.

Referensi

1. Panduan peluncuran resmi create-react-app
2. GitHub blog: Bangun dan luncurkan Github Pages dari branch apa saja
3. Menyediakan file CNAME ketika menggunakan domain kustom

Catatan

• Terima kasih yang sebesar-besarnya kepada Github yang telah menyediakan hosting gratis untuk developer pemula.
• Dan saatnya, untuk mengembangkan aplikasi React menjadi suatu yang unik.
• Repositori ini memiliki dua branch:
  • master - kode sumber aplikasi React.
  • gh-pages - aplikasi React yang dibuat dari kode sumber tersebut.

Kontributor

Terimakasih buat kalian yang telah membantu dalam proses pengembangan tutorial ini.

This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into master, and (b) each person who contributed in a different way (e.g. providing constructive feedback) and who approved of me including them in this list.