Cara Mendeploy Aplikasi Vite/React ke GitHub Pages

IQBAL FARHAN SYUHADA

23 Jul 2024

GitHub Pages adalah layanan hosting statis gratis dari GitHub yang memungkinkan Anda untuk mendepoy situs web langsung dari repositori GitHub Anda. Jika Anda memiliki aplikasi Vite/React dan ingin mendepoynya ke GitHub Pages, berikut adalah langkah-langkah lengkap yang perlu Anda ikuti.

Langkah 1: Instalasi Paket gh-pages

Langkah pertama adalah menginstal paket gh-pages, yang akan membantu kita dalam mendepoy aplikasi ke GitHub Pages. Buka terminal di VS Code (gunakan ctrl+~) dan jalankan perintah berikut:

npm install gh-pages --save-dev

Langkah 2: Tambahkan Script Deploy di package.json

Selanjutnya, kita perlu menambahkan skrip untuk membangun dan mendepoy aplikasi di file package.json. Buka file package.json Anda dan tambahkan baris-baris berikut sebelum "build": "vite build",:

"predeploy": "npm run build",
"deploy": "gh-pages -d dist",

Konfigurasi ini memastikan bahwa aplikasi akan dibangun terlebih dahulu sebelum di-deploy.

Langkah 3: Konfigurasikan vite.config.js

Untuk memberitahu Vite di mana aplikasi akan dihosting, kita perlu menambahkan konfigurasi base di file vite.config.js. Jika Anda mendepoy aplikasi ke <gitusername>.github.io, tambahkan baris berikut sebelum plugins: [react()],:

base: "/",

Namun, jika Anda mendepoy ke subdirektori (misalnya, https://<gitusername>.github.io/<nama-repositori>), ganti dengan:

base: "/<NAMA_REPOSITORI>",

Pastikan untuk mengganti <NAMA_REPOSITORI> dengan nama repositori GitHub Anda.

Langkah 4: Jalankan Deploy

Setelah semua konfigurasi selesai, kita siap untuk mendepoy aplikasi. Kembali ke terminal dan jalankan perintah berikut:

npm run deploy

Perintah ini akan membangun aplikasi dan kemudian mendepoynya ke branch gh-pages di repositori GitHub Anda.

Contoh Konfigurasi

Berikut adalah contoh lengkap dari file package.json dan vite.config.js yang telah dikonfigurasi:

package.json:

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "vite build"
  }
}

vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: "/",
  plugins: [react()],
});

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mendepoy aplikasi Vite/React ke GitHub Pages. Anda sekarang dapat melihat aplikasi Anda yang telah terdeploy di <gitusername>.github.io atau di subdirektori sesuai dengan konfigurasi yang Anda pilih. Untuk memperbarui deploy aplikasi Anda di masa mendatang, cukup jalankan perintah npm run deploy lagi.

Selamat mencoba dan semoga berhasil!