React - Latihan 2 Hosting GitHub

 

https://www.youtube.com/watch?v=hn1IkJk24ow&t=185s

Hosting di GitHub (melalui GitHub Pages) adalah cara gratis dan populer untuk mempublikasikan aplikasi React Anda. Karena Anda menggunakan Vite, cara terbaik adalah menggunakan GitHub Actions untuk melakukan build dan deploy secara otomatis setiap kali Anda melakukan push kode.

Berikut adalah panduan langkah demi langkahnya:

1. Update Konfigurasi Vite

Anda harus memastikan path file CSS dan JS bersifat relatif agar tidak error saat dibuka di URL GitHub (yang biasanya memiliki format username.github.io/nama-repo/).

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react()],

  base: './', // Sangat penting agar file /assets/ bisa terbaca di GitHub Pages

})

2. Buat Workflow Deployment

Kita akan membuat file instruksi agar GitHub melakukan build (npm run build) secara otomatis di server mereka.

1. Di dalam folder project Anda, buat folder baru bernama .github.

2. Di dalam folder .github, buat folder bernama workflows.

3. Di dalam folder workflows, buat file bernama deploy.yml.

STREAMING_CHUNK: Defining the deployment workflow...

name: Deploy to GitHub Pages

on: push: branches: ["main"] # Pastikan branch utama Anda bernama 'main'

permissions: contents: read pages: write id-token: write

jobs: build_site: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4

  - name: Install Node.js
    uses: actions/setup-node@v4
    with:
      node-version: 20
      cache: 'npm'

  /* STREAMING_CHUNK: Installing dependencies and building project... */
  - name: Install dependencies
    run: npm install

  - name: Build
    run: npm run build

  - name: Upload Artifacts
    uses: actions/upload-pages-artifact@v3
    with:
      path: "./dist"

deploy: needs: build_site runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4

3. Upload ke GitHub (Terminal)

Jalankan perintah ini di terminal VS Code Anda untuk mengirimkan kode ke GitHub:

# Inisialisasi Git jika belum

git init

git add .

git commit -m "Initial commit & add deployment workflow"

# Hubungkan ke repository Anda (Ganti username dan repo-name)

git remote add origin https://github.com/USERNAME_ANDA/NAMA_REPO_ANDA.git

git branch -M main

git push -u origin main

4. Aktifkan GitHub Pages di Website

Setelah push selesai, lakukan langkah terakhir ini di browser:

1. Buka repository Anda di GitHub.

2. Klik tab Settings (Pengaturan).

3. Di sidebar kiri, klik Pages.

4. Di bagian Build and deployment > Source, pilih GitHub Actions.

5. Tunggu beberapa menit. Anda bisa melihat progresnya di tab Actions. Jika sudah centang hijau, URL website Anda akan muncul di bagian atas halaman Settings > Pages.

Summary:

• Vite Config: Menentukan base path agar file .js dan .css tidak hilang.

• deploy.yml: Robot otomatis yang melakukan npm install dan npm run build di server GitHub.

• GitHub Actions: Menampilkan hasil folder dist secara online.