Cara Deploy React App ke Netlify, Vercel, dan GitHub Pages

1. Pendahuluan

Hai, teman-teman developer! Pernah nggak sih, kamu udah semangat banget bikin proyek React keren, dari UI-nya yang memukau sampai fungsionalitasnya yang super canggih? Tapi, pas sampai di titik ini, rasanya kok agak dag-dig-dug ya? "Oke, project-nya udah jadi, terus gimana biar bisa dilihat orang lain?" Nah, di sinilah proses deploy itu jadi penting banget!

Banyak dari kita mungkin merasa deploy itu ribet, butuh skill dewa, atau bahkan harus sewa server mahal. Padahal, zaman sekarang, deploy aplikasi web modern itu jauh lebih mudah, cepat, dan bahkan bisa gratis, lho! Bayangin, kamu bisa bikin portofolio online, aplikasi kecil untuk bisnis, atau bahkan side project iseng yang langsung bisa diakses siapa pun, kapan pun, dan di mana pun. Keren banget, kan?

Di artikel ini, kita akan bongkar tuntas cara deploy aplikasi React kamu ke tiga platform paling populer dan ramah developer: Netlify, Vercel, dan GitHub Pages. Jangan khawatir kalau kamu masih pemula, karena kita akan bahas dari nol, mulai dari kenapa platform ini worth it banget sampai langkah-langkah praktisnya.

Jadi, siap-siap ya, karena setelah ini, proyek React kamu nggak cuma akan diam di folder laptopmu aja, tapi siap menyapa dunia! Yuk, kita mulai petualangan deploy ini bareng-bareng!

2. Yuk, Kita Bikin Proyek Dummy React Bareng!

Nah, sebelum kita bisa deploy proyek React impianmu, tentu saja kita harus punya proyeknya dulu, dong! Jangan khawatir, kita akan bikin proyek "dummy" yang sederhana tapi cukup representatif untuk latihan deploy. Kita akan pakai Vite karena ini tool favorit banyak developer React sekarang, super cepat dan gampang banget digunakan.

2.1. Mempersiapkan Lingkungan Development (Node.js & npm/Yarn)

Pertama dan paling utama, komputer kamu harus punya Node.js dan package manager-nya (biasanya npm atau Yarn). Ibaratnya, ini adalah "bahan bakar" utama biar proyek JavaScript dan React bisa jalan di komputermu.

  • Cek Node.js dan npm/Yarn:

Buka Terminal (di macOS/Linux) atau Command Prompt/PowerShell (di Windows). Ketik perintah ini:

node -v
npm -v

Atau kalau kamu pakai Yarn:

yarn -v

Kalau muncul angka versi (misalnya v18.x.x atau v20.x.x untuk Node.js), berarti kamu sudah punya. Selamat!

  • Kalau Belum Ada, Instal Dulu:

Kalau belum ada, tenang aja. Kamu bisa kunjungi website resmi Node.js di nodejs.org dan unduh versi LTS (Long Term Support) yang direkomendasikan. Instalasinya gampang kok, tinggal ikuti aja instruksinya seperti instal program biasa. Setelah instalasi, coba cek lagi versinya di Terminal/Command Prompt untuk memastikan semuanya beres.

2.2. Memulai Proyek React Pertama Kita

Sekarang saatnya bikin proyek React-nya pakai Vite! Ini cepat banget, lho.

  • Buka Terminal/Command Prompt:

Pastikan kamu berada di folder tempat kamu ingin menyimpan proyekmu. Misalnya, kalau kamu mau simpan di folder Documents/MyReactProjects, ya arahkan Terminal/Command Prompt ke sana.

  • Buat Proyek React dengan Vite:

Ketik perintah ini:

npm create vite@latest

Atau kalau pakai Yarn:

yarn create vite

Setelah itu, kamu akan diminta beberapa informasi:

  • Project name: Ketik nama proyekmu, misalnya my-react-deploy-app.
  • Select a framework: Pilih React (pakai panah atas/bawah, lalu Enter).
  • Select a variant: Pilih JavaScript + SWC (atau TypeScript + SWC kalau kamu mau tantangan!).

Tunggu sebentar, Vite akan langsung membuat struktur folder dasar proyek React kamu. Cepat banget, kan?

Hasilnya

  • Masuk ke Folder Proyek & Instal Dependencies:

Setelah selesai, masuk ke folder proyek yang baru kamu buat:

cd my-react-deploy-app

Kemudian, instal semua dependencies (paket-paket yang dibutuhkan proyek) dengan perintah:

npm install

Atau kalau pakai Yarn:

yarn install

Proses ini mungkin butuh waktu sedikit, tergantung kecepatan internetmu.

Hasilnya

  • Jalankan Proyek (Lihat Hasilnya!):

Akhirnya, coba jalankan proyekmu untuk melihat apakah sudah berfungsi dengan baik:

npm run dev

Atau kalau pakai Yarn:

yarn dev

Biasanya, ini akan membuka browser otomatis atau memberikan alamat (http://localhost:5173/ atau semacamnya). Buka alamat itu di browser-mu, dan kamu akan melihat boilerplate aplikasi React dari Vite yang fresh! Selamat, proyek React-mu sudah berhasil berjalan di local!

Hasilnya

2.3. Sedikit Sentuhan Magis pada Proyek Dummy (Template Code FREE Shaynakit)

Biar proyek dummy kita nggak kosong-kosong amat dan punya "roh" sedikit, yuk kita tambahkan template source code gratis dari shaynakit.com . Ini juga melatih kamu buat familiar sama kode React.

Jadi Shaynakit udah nyiapin source code desainnya buat kita. Isinya macem-macem, ada icon, gambar, pokoknya semua yang kita butuhin buat ngebangun halaman nanti. Nah, sekarang kita liat dulu gimana caranya ngedownload file-nya, jadi kayak gini caranya cukup ikutin langkah-langkah ini:

  1. Buka situs utamanya di sini: https://shaynakit.com/landing.
  2. Klik menu Register atau langsung aja meluncur ke https://shaynakit.com/register buat daftar akun dulu.
  3. Setelah berhasil daftar dan login, buka halaman template yang mau dipakai di sini: https://shaynakit.com/details/bookies-read-digital-html-tailwind-css-template.
  4. Klik tombol Download, lalu pilih opsi Free Trial.
  5. Lanjut klik Start Today buat mulai akses gratisnya.
  6. Setelah itu, balik lagi ke halaman template tadi dan klik tombol Download sekali lagi.
  7. File-nya bakal langsung keunduh dalam format .zip.
  8. Simpan file .zip itu ke folder lokal kamu, misalnya ke: ./source-code/Bookies.zip.
  9. Lalu extract File
  10. Akses file ke vscode

Hasilnya bakal seperti ini

Copy tag main pada file details.html ini

Lalu paste di sisi kiri dan akan menghasilkan kode jsx di sebelah kanan lalu copy

Hapus semua kode di dalam return(...) yang ada di fungsi App.jsx reactnya dan ganti dengan ini:

import './index.css';

function App() {
  return (
    <main className="relative mx-auto w-full max-w-[640px] px-6 overflow-hidden min-h-screen pt-[30px] pb-[38px] flex flex-col bg-white">
      <span
        id="BackgroundGrey"
        className="bg-bookies-grey-light h-[206px] absolute top-0 left-0 w-full"
      />
      <nav className="flex items-center justify-between relative">
        <a href="index.html">
          <div className="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center hover:bg-bookies-hover-grey-light transition-all duration-300">
            <img src="/assets/images/icons/back.svg" alt="icon" className="size-4" />
          </div>
        </a>
        <button type="button" className="cursor-pointer">
          <div className="size-[35px] shrink-0 rounded-full bg-white flex justify-center items-center hover:bg-bookies-hover-grey-light transition-all duration-300">
            <img src="/assets/images/icons/love.svg" alt="icon" className="size-4" />
          </div>
        </button>
      </nav>
      <header className="mt-[30px] relative">
        <div className="p-[6px] mx-auto rounded-[19.5px] w-[150px] h-[195px] bg-white shrink-0">
          <div className="flex items-center justify-center rounded-[19.5px] overflow-hidden">
            <img
              src="/assets/images/thumbnails/details.png"
              alt="thumbnails"
              className="w-full h-full object-cover"
            />
          </div>
        </div>
        <h1 className="mt-5 text-center font-medium text-[22px] leading-[33px]">
          The Power of Hooked
        </h1>
        <p className="text-center text-bookies-grey mt-1">Growth Business</p>
        <p className="tracking-[0.57em] text-bookies-grey text-center mt-[10px]">
          •••
        </p>
        <h3 className="text-center mt-[10px] font-medium">by Nir Eyal</h3>
      </header>
      <section id="Sinopsis" className="mt-[30px] flex flex-col gap-2">
        <h2 className="text-bookies-grey">Sinopsis</h2>
        <p className="leading-[28px] text-bookies-black">
          Why do some products capture wide spread attention while others what makes
          us engage with people.
        </p>
      </section>
      <div className="flex flex-col justify-between flex-1">
        <section id="Keypoints" className="mt-[30px] flex flex-col gap-2">
          <h2 className="text-bookies-grey">Keypoints</h2>
          <div id="Points" className="flex flex-col gap-[14px]">
            <div className="point flex items-center gap-2">
              <img
                src="/assets/images/icons/bullet-point.svg"
                alt="icon"
                className="size-4 shrink-0"
              />
              <p>Medium chart of team product</p>
            </div>
            <div className="point flex items-center gap-2">
              <img
                src="/assets/images/icons/bullet-point.svg"
                alt="icon"
                className="size-4 shrink-0"
              />
              <p>Perdalam notifications</p>
            </div>
            <div className="point flex items-center gap-2">
              <img
                src="/assets/images/icons/bullet-point.svg"
                alt="icon"
                className="size-4 shrink-0"
              />
              <p>Membuat funnel marketing</p>
            </div>
          </div>
        </section>
        <a href="read.html" className="mt-[50px] mx-auto relative group">
          <div className="relative z-30 rounded-full bg-bookies-button-purple py-[13px] w-[200px] flex justify-center text-center text-white font-medium">
            Read Now
          </div>
          <span className="w-[218px] h-[36px] rounded-full bg-bookies-button-purple/40 absolute top-[22px] -left-[9px] blur-lg opacity-0 group-hover:opacity-100 transition-all duration-300" />
        </a>
      </div>
    </main>

  );
}

export default App;

Ingat pasth src="assets/images/icons/love.svg” ubah menjadi src="/assets/images/icons/love.svg”

Lalu copy folder assets di template htmlnya dan semua yang ada di dalamnya seperti ini

Paste ke folder public react

Lalu copy seluruh kode di dalam output.css template shaynakitnya

Lalu hapus semua kode index.css di proyek react dan paste ke sana

Lalu hapus file App.css dan import index.css di dalam App.jsx seperti kode pertama ini

Paste ini ke dalam index.html proyek react

<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap>" rel="stylesheet" />
  • Jalankan Lagi Proyeknya:

Setelah diedit dan disimpan, jalankan lagi proyeknya:

npm run dev

Atau:

yarn dev

Lihat di browser-mu! Sekarang ada judul, tombol counter yang bisa diklik, dan sedikit teks. Keren, kan? Proyek "dummy" kita ini sudah siap untuk di-deploy!

Hasilnya

Gimana, gampang banget, kan, bikin proyek React pakai Vite? Sekarang, proyekmu sudah siap untuk deploy!

3. Netlify: Deploy Cepat Tanpa Ribet

Sekarang kita masuk ke bagian yang paling seru: proses deploy yang sebenarnya! Kita mulai dengan Netlify, yang terkenal banget karena kemudahannya.

Kamu udah punya proyek React di lokal yang udah ada counter-nya? Mantap! Sekarang saatnya kita kirim proyek itu ke internet biar bisa diakses siapa aja. Kita akan mulai petualangan deploy ini dengan Netlify. Kenapa Netlify? Yuk, kita bahas!

3.1. Mengenal Netlify: Kenapa Harus Pakai Ini?

Netlify itu ibarat "superhero" di dunia deploy aplikasi web, terutama untuk proyek frontend seperti React. Kenapa begitu?

  1. Super Cepat & Mudah (Zero Configuration): Ini adalah poin utamanya. Netlify dirancang untuk developer yang ingin deploy secepat mungkin tanpa pusing mikirin server, konfigurasi ribet, atau pipeline CI/CD yang kompleks. Kamu tinggal push kode ke GitHub (atau GitLab/Bitbucket), Netlify langsung tahu apa yang harus dilakukan.
  2. Gratis untuk Proyek Personal & Kecil: Yup, kamu nggak salah baca! Netlify punya paket gratis yang lebih dari cukup untuk kebanyakan proyek personal, portofolio, atau aplikasi kecil. Kamu dapat custom domain, SSL/HTTPS otomatis, bahkan bandwidth yang lumayan besar.
  3. CI/CD Otomatis (Continuous Integration/Continuous Deployment): Begitu kamu push perubahan ke repository Git-mu, Netlify akan otomatis mendeteksi perubahan, menjalankan proses build proyekmu, dan langsung me-deploy versi terbarunya. Kamu nggak perlu lagi upload file manual satu per satu. Praktis banget!
  4. SSL/HTTPS Gratis: Ini penting banget untuk keamanan dan kredibilitas website-mu. Netlify menyediakan sertifikat SSL/HTTPS secara gratis dan otomatis. Nggak perlu pusing lagi ngurusin sertifikat.
  5. Pratinjau Deployment (Deploy Previews): Setiap kali kamu membuat Pull Request atau Merge Request baru, Netlify bisa membuat preview unik dari perubahan itu. Jadi, kamu bisa lihat hasilnya di staging sebelum benar-benar di-merge ke branch utama dan di-deploy ke production. Berguna banget untuk review kode!
  6. CDN Global: Aplikasi kamu akan disajikan melalui Content Delivery Network (CDN) global, yang artinya aplikasi akan dimuat lebih cepat untuk pengguna di seluruh dunia karena file-nya disajikan dari server terdekat.

Dengan semua keunggulan ini, Netlify jadi pilihan yang sangat menarik, apalagi buat kamu yang baru mulai atau punya proyek React yang butuh deploy cepat dan efisien.

3.2. Membuat Akun Netlify (Gratis dan Gampang!)

Langkah pertama adalah membuat akun Netlify. Prosesnya cepat dan sederhana kok!

  • Kunjungi Website Netlify: Buka browser kamu dan pergi ke app.netlify.com/signup.
  • Daftar dengan Akun Git (Direkomendasikan):

Netlify sangat terintegrasi dengan penyedia layanan Git seperti GitHub, GitLab, atau Bitbucket. Cara termudah dan sangat direkomendasikan adalah dengan daftar menggunakan akun GitHub-mu (atau yang lain). Klik tombol "Sign up with GitHub" (atau pilihan lainnya).

Mengapa direkomendasikan? Karena ini akan mempermudah proses deploy otomatis nanti. Netlify akan langsung bisa terhubung ke repository kode kamu.

  • Izinkan Akses: Setelah kamu memilih GitHub (atau yang lain), kamu akan diminta untuk mengotorisasi Netlify untuk mengakses repository Git-mu. Jangan khawatir, ini aman kok, dan diperlukan agar Netlify bisa mendeteksi perubahan di kodemu. Ikuti saja langkah-langkah otorisasi yang muncul.
  • Selesai! Setelah otorisasi berhasil, kamu akan langsung diarahkan ke dashboard Netlify-mu. Sesederhana itu!

3.3. Menghubungkan Proyek React ke Netlify: Proses Otomatis vs. Manual

Ada dua cara utama untuk menghubungkan proyek React-mu ke Netlify:

3.3.1. Cara Otomatis (Direkomendasikan: Lewat GitHub)

Ini adalah cara yang paling sering digunakan dan paling efisien karena Netlify akan otomatis mendeteksi perubahan di repository Git-mu.

3.3.1.1. Pastikan Proyekmu Ada di GitHub:

Proyek React my-react-deploy-app yang tadi kita buat harus sudah ada di repository GitHub-mu. Kalau belum, lakukan langkah-langkah berikut:

  • Inisialisasi Git di folder proyekmu: git init
  • Tambahkan semua file: git add .
  • Buat commit pertama: git commit -m "Initial commit"
  • Buat repository baru di GitHub caranya yaitu:
  • Klik New Repository
  • Lalu isi seperti ini
  • Hasil
  • Hubungkan repository lokalmu ke repository remote di GitHub. Biasanya perintahnya seperti ini (ganti URL-nya dengan URL repository punyamu):

Caranya adalah copy block ini :

Lalu paste ke terminal

Lalu jalankan

git push -u origin master

Setelah itu, pastikan kode proyekmu sudah ada di GitHub.

Hasilnya di VSCode

Hasilnya di GitHub

3.3.1.2. Impor Proyek dari Git di Netlify:

  • Di dashboard Netlify, klik tombol "Add new site" (atau "Add site") lalu pilih "Import an existing project".
  • Pilih penyedia Git-mu (misalnya GitHub).
  • Netlify akan menampilkan daftar repository yang bisa di-deploy. Cari repository proyek React-mu (my-react-deploy-app) dan pilih. Jika tidak muncul, kamu mungkin perlu mengatur ulang izin Netlify di GitHub-mu.
  • Setelah memilih repository, kamu akan melihat "Basic build settings". Netlify biasanya sudah otomatis mendeteksi bahwa ini adalah proyek React yang dibangun dengan Vite.
    • Build command: npm run build (atau yarn build jika kamu menggunakan Yarn)
    • Publish directory: dist (Ini adalah folder tempat file hasil build Vite disimpan)
  • Pastikan pengaturannya sudah benar, lalu klik tombol "Deploy site".

3.3.1.3. Selesai!

Netlify akan mulai proses build dan deploy. Kamu akan melihat log deployment secara real-time. Dalam beberapa saat, proyekmu akan LIVE dan memiliki URL unik (misalnya https://namasitusrandom.netlify.app). Selamat, kamu baru saja deploy aplikasi React pertamamu ke Netlify!

3.3.2. Cara Manual (Drag & Drop)

Meskipun kurang efisien untuk update berkelanjutan, cara ini bisa sangat cepat jika kamu hanya ingin meng-upload build proyek React-mu sekali atau mencoba-coba.

3.3.2.1. Build Proyek React-mu:

Pertama, kamu harus membuat versi production dari proyek React-mu. Buka Terminal/Command Prompt di folder proyekmu dan jalankan perintah:

npm run build

Atau kalau pakai Yarn:

yarn build

Perintah ini akan membuat folder dist di dalam folder proyekmu. Di sinilah semua file HTML, CSS, dan JavaScript yang sudah dioptimasi untuk production berada.

3.3.2.2. Drag & Drop ke Netlify:

  • Di dashboard Netlify, klik tombol "Add new site" lalu pilih "Deploy manually" (atau cari bagian "Want to deploy a new site without connecting to Git?").
  • Kamu akan melihat area untuk drag & drop. Cukup seret seluruh folder dist yang baru saja kamu buat tadi ke area tersebut.
  • Netlify akan langsung meng-upload file-file tersebut dan me-deploy situsmu.

3.3.2.3. Selesai!

Situsmu akan langsung live dan mendapatkan URL unik. Ingat, kalau ada perubahan kode, kamu harus menjalankan npm run build lagi, lalu meng-upload ulang folder dist secara manual. Ini kenapa cara otomatis lebih direkomendasikan.

3.4. Setting Penting di Netlify (Domain Kustom, Environment Variables, dll.)

Setelah situsmu live, ada beberapa pengaturan penting yang mungkin ingin kamu tahu:

  • Custom Domain: URL bawaan Netlify biasanya seperti https://namasitusrandom.netlify.app. Kalau kamu punya domain sendiri (misalnya namakumu.com), kamu bisa menghubungkannya ke situs Netlify-mu.
    • Di dashboard Netlify, pilih situsmu.
    • Pergi ke "Site settings" > "Domain management".
    • Klik "Add a custom domain" dan ikuti instruksinya. Netlify akan memandumu cara mengatur DNS records di penyedia domainmu. Prosesnya otomatis dan Netlify akan mengurus SSL/HTTPS untuk custom domain kamu juga!
  • Environment Variables: Kadang, aplikasi React-mu butuh mengakses data sensitif seperti API Key atau URL backend yang tidak boleh diekspos di kode sumber. Kamu bisa menyimpannya sebagai environment variables di Netlify.
    • Di dashboard Netlify, pilih situsmu.
    • Pergi ke "Site settings" > "Build & deploy" > "Environment".
    • Klik "Add a variable" dan masukkan Key (nama variabel) dan Value (nilainya).
    • Di proyek React yang dibangun dengan Vite, untuk mengakses variabel ini saat build time, kamu harus memberikan prefix VITE_ pada variabelmu (contoh: VITE_API_KEY). Lalu di kode React-mu, kamu bisa mengaksesnya dengan import.meta.env.VITE_API_KEY.
  • Redirects & Rewrites: Untuk aplikasi React yang menggunakan client-side routing (misalnya dengan React Router), kamu mungkin perlu mengonfigurasi redirect agar semua path mengarah ke index.html. Ini mencegah error "404 Not Found" saat pengguna me-refresh halaman di sub-path.
    • Buat file bernama _redirects (tanpa ekstensi) di folder public di proyek React-mu.
    • Isi file itu dengan baris ini: /* /index.html 200
    • Commit dan push perubahan ini ke GitHub. Netlify akan otomatis menerapkannya.

3.5. Tips & Trik Netlify untuk Developer React

  • Gunakan Production Build: Selalu pastikan kamu men-deploy versi production (hasil npm run build), bukan versi development. Versi production sudah dioptimasi, ukurannya lebih kecil, dan performanya lebih baik.
  • Perhatikan public folder: File-file statis seperti gambar atau favicon yang kamu letakkan di folder public di proyek Vite-mu akan di-copy langsung ke root build tanpa diproses Webpack. Jadi, referensikan mereka relatif terhadap root (misal: /logo.png).
  • Netlify Analytics: Netlify punya fitur analitik bawaan yang bisa kamu aktifkan untuk memantau trafik situsmu.
  • Manfaatkan Deploy Previews: Ini fitur killer! Selalu cek deploy preview untuk Pull Request atau Merge Request sebelum di-merge ke main branch agar yakin tidak ada bug atau breaking changes.
  • Gunakan Netlify CLI: Kalau kamu suka kerja lewat Terminal, Netlify punya Command Line Interface (CLI) yang powerful untuk mengelola situsmu, termasuk deploy langsung dari lokal. Install dengan npm install netlify-cli -g.

Gimana? Lumayan mudah, kan, deploy aplikasi React ke Netlify? Sekarang proyekmu sudah live dan bisa diakses. Kamu sudah selangkah lebih maju dalam petualangan web development-mu! Yuk lanjut ke Vercel.

4. Vercel: Performa Tinggi, Pengalaman Developer Terbaik

Sekarang kita akan menjelajahi platform deploy keren lainnya yang jadi favorit banyak developer: Vercel! Kalau Netlify fokus pada kecepatan dan kemudahan deploy, Vercel itu unggul dalam performa dan pengalaman developer yang luar biasa, terutama untuk proyek berbasis React, Next.js, dan sejenisnya. Yuk, kita selami kenapa Vercel ini istimewa!

4.1. Mengapa Vercel Jadi Pilihan Banyak Developer?

Vercel itu seperti developer-centric platform yang sangat memanjakan developer. Fitur-fiturnya dirancang untuk membuat proses build dan deploy aplikasimu jadi lebih menyenangkan dan efisien.

  1. Optimal untuk Framework Modern (React, Next.js, dsb.): Vercel adalah kreator Next.js, jadi nggak heran kalau mereka punya integrasi paling dalam dan optimal untuk Next.js, React, dan framework JavaScript modern lainnya. Ini berarti performa aplikasimu akan maksimal di Vercel.
  2. Performa Maksimal dengan Edge Network: Vercel punya jaringan global yang canggih (Edge Network). Ini artinya, aplikasi kamu akan disajikan dari lokasi server terdekat dengan pengguna, membuat waktu loading jadi super cepat di mana pun penggunamu berada.
  3. Deploy Preview Otomatis: Sama seperti Netlify, Vercel juga menyediakan fitur Deploy Preview yang sangat berguna. Setiap kali kamu membuat Pull Request atau Merge Request baru di Git, Vercel akan otomatis membuat staging URL yang unik. Kamu bisa langsung melihat perubahan terbaru tanpa perlu me-deploy ke production dulu. Fitur ini sangat membantu proses review kode dan kolaborasi tim.
  4. Serverless Functions: Ini salah satu fitur unggulan Vercel! Kamu bisa menambahkan backend logic kecil menggunakan Serverless Functions (misalnya, untuk API atau logika sederhana) langsung di proyek frontend React-mu. Vercel akan mengelola servernya secara otomatis, jadi kamu nggak perlu pusing provisioning apa pun.
  5. Analytics & Observability: Vercel menyediakan tools untuk memantau performa dan penggunaan aplikasi kamu, seperti Web Vitals dan Analytics bawaan, yang sangat membantu dalam mengoptimalkan pengalaman pengguna.
  6. Gratis untuk Proyek Personal: Sama seperti Netlify, Vercel juga punya paket gratis yang sangat murah hati untuk proyek personal atau non-komersial. Ini mencakup bandwidth, build time, dan fitur penting lainnya.

Singkatnya, kalau kamu mencari performa yang blazing fast dan pengalaman developer yang mulus dengan integrasi mendalam untuk framework modern, Vercel adalah pilihan yang sangat solid!

4.2. Langkah Mudah Membuat Akun Vercel

Membuat akun Vercel itu semudah membuat akun Netlify, bahkan terasa sangat serupa.

  • Kunjungi Website Vercel: Buka browser kamu dan pergi ke vercel.com.
  • Daftar dengan Akun Git (Direkomendasikan):

Di halaman utama, klik tombol "Sign Up" atau "Continue with GitHub". Vercel sangat menganjurkan untuk mendaftar menggunakan akun Git-mu (GitHub, GitLab, atau Bitbucket). Pilih "Continue with GitHub" untuk integrasi terbaik.

  • Otorisasi Akses: Kamu akan diarahkan ke GitHub (atau penyedia Git lainnya) untuk mengotorisasi Vercel mengakses repository Git-mu. Ini diperlukan agar Vercel bisa mendeteksi push kode dan me-deploy proyekmu secara otomatis. Ikuti instruksi otorisasi yang muncul.
  • Selesai! Setelah otorisasi berhasil, kamu akan langsung masuk ke dashboard Vercel-mu. Akunmu sudah siap digunakan!

4.3. Deploy Proyek React ke Vercel: Secepat Kilat!

Proses deploy proyek React-mu ke Vercel itu smooth banget, apalagi kalau proyekmu sudah ada di GitHub.

4.3.1. Pastikan Proyekmu Ada di GitHub:

Sama seperti saat deploy ke Netlify, pastikan proyek React my-react-deploy-app yang tadi kita buat sudah di-push ke repository GitHub-mu. Jika belum, kembali ke Bab sebelumnya dan ikuti langkah-langkah untuk meng-upload proyek ke GitHub.

4.3.2. Impor Proyek dari Git di Vercel:

  • Di dashboard Vercel, klik tombol "Add New..." di sudut kanan atas, lalu pilih "Project".
  • Kamu akan melihat daftar repository dari akun Git-mu. Cari dan pilih repository proyek React-mu (my-react-deploy-app) yaitu klik “Import”
  • Vercel akan otomatis mendeteksi bahwa proyekmu adalah aplikasi React yang dibuat dengan Vite. Kamu akan melihat pengaturan seperti ini:
    • Framework Preset: Biasanya akan terdeteksi sebagai "Vite" (atau Create React App, tergantung setup awalmu). Pastikan sudah benar.
    • Root Directory: . (Titik, artinya root proyekmu)
    • Build Command: npm run build (atau yarn build jika kamu menggunakan Yarn)
    • Output Directory: dist (Ini adalah folder tempat file hasil build Vite disimpan)
  • Kalau kamu perlu menambahkan Environment Variables (misalnya API Keys), kamu bisa menambahkannya di bagian "Environment Variables" di bawah pengaturan build.
  • Setelah yakin semua pengaturannya benar, klik tombol "Deploy".

Hasilnya

4.3.3. Selesai!

Vercel akan mulai proses build dan deploy. Kamu akan melihat log deployment secara real-time. Begitu selesai, kamu akan melihat halaman sukses dengan preview proyekmu dan URL unik (contoh: https://my-react-deploy-app-xxxxx.vercel.app). Ada juga tombol untuk mengunjungi live situsmu. Selamat, proyek React-mu sudah live di Vercel! Setiap kali kamu push perubahan ke main branch di GitHub, Vercel akan otomatis me-re-deploy versi terbaru.

4.4. Fitur Keren Vercel yang Wajib Kamu Tahu (Preview Deployment, Serverless Functions)

Setelah proyekmu live, ada beberapa fitur Vercel yang bisa kamu manfaatkan untuk meningkatkan workflow developmentmu:

  • Preview Deployment:

Ini adalah salah satu fitur paling digemari. Setiap kali kamu membuat Pull Request (PR) di GitHub, Vercel akan otomatis membuat deploy preview untuk PR tersebut. Kamu bisa membagikan link preview ini ke rekan tim atau stakeholder untuk mendapatkan feedback sebelum kamu me-merge PR-nya ke main branch. Ini sangat efektif untuk mencegah bug masuk ke production. Kamu bisa melihat semua preview di dashboard proyek Vercel-mu.

  • Serverless Functions:

Ingin menambahkan backend logic kecil tanpa harus deploy server terpisah? Vercel mendukung Serverless Functions (Lambda Functions). Kamu bisa membuat folder api di root proyekmu, lalu tambahkan file JavaScript/TypeScript di dalamnya.

Contoh: api/hello.js

export default function handler(request, response) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
    message: 'Hello from Vercel Serverless Function!',
  });
}

Kamu bisa mengaksesnya di https://namasitusmu.vercel.app/api/hello. Ini sangat berguna untuk form submissions, mengambil data dari database, atau integrasi API pihak ketiga tanpa perlu manage server.

  • Environment Variables:

Sama seperti Netlify, kamu bisa mengatur environment variables untuk API Keys atau data sensitif lainnya.

  1. Di dashboard Vercel, pilih proyekmu.
  2. Pergi ke "Settings" > "Environment Variables".
  3. Tambahkan variabel baru. Penting: untuk proyek React yang di-build dengan Vite, variabel ini harus dimulai dengan VITE_ (misalnya VITE_SOME_KEY) agar bisa diakses di kode frontend (import.meta.env.VITE_SOME_KEY).
  • Custom Domains:

Tentu saja, kamu juga bisa menghubungkan domain pribadimu ke Vercel.

  1. Di dashboard proyekmu, pergi ke "Settings" > "Domains".
  2. Tambahkan domain kamu dan ikuti instruksi yang diberikan oleh Vercel untuk mengarahkan DNS records di penyedia domainmu. Vercel akan otomatis mengurus sertifikat SSL/HTTPS-nya.

4.5. Optimasi Proyek React di Vercel

  • Gunakan Framework yang Dioptimalkan Vercel: Jika memungkinkan dan sesuai kebutuhan proyekmu, pertimbangkan untuk menggunakan Next.js (framework React buatan Vercel) karena akan mendapatkan optimasi paling maksimal dari Vercel.
  • Perhatikan Ukuran Bundle: Pastikan ukuran bundle aplikasi React-mu sekecil mungkin agar loading cepat. Gunakan tools seperti source-map-explorer untuk menganalisis ukuran bundle.
  • Manfaatkan Serverless Functions dengan Bijak: Untuk logika backend yang ringan, Serverless Functions sangat powerful. Tapi, untuk backend yang kompleks, mungkin lebih baik menggunakan full-fledged backend service.
  • Monitore Analytics: Pantau performa aplikasi kamu di Vercel Analytics (terutama Web Vitals) untuk mengidentifikasi area yang perlu dioptimasi.

Bagaimana? Sekarang kamu sudah tahu cara deploy proyek React ke Netlify dan Vercel, dua platform hosting modern yang sangat powerful. Keduanya menawarkan pengalaman deploy yang luar biasa. Yuk platform terakhir yaitu GitHub Pages.

5. GitHub Pages: Solusi Gratis untuk Proyek Sederhana

Kita sudah menaklukkan Netlify dan Vercel. Sekarang, mari kita bahas pilihan ketiga yang nggak kalah menarik, terutama kalau kamu butuh solusi super gratis dan sederhana: GitHub Pages. Ini adalah pilihan yang sangat populer untuk hosting proyek personal, portofolio, atau aplikasi statis yang ringan.

5.1. Pahami GitHub Pages: Kapan Cocok Digunakan?

GitHub Pages adalah layanan hosting statis gratis yang disediakan langsung oleh GitHub. Jadi, kalau kode proyekmu sudah ada di GitHub, menggunakannya akan jadi sangat mudah.

Kapan GitHub Pages Cocok untukmu?

  • Proyek Statis dan Portofolio: Ini adalah kekuatan utama GitHub Pages. Sangat ideal untuk website pribadi, blog, dokumentasi proyek, atau aplikasi frontend sederhana yang tidak memerlukan backend server.
  • Aplikasi React Murni (Client-Side Rendering): Proyek React kita ini (yang hanya berjalan di browser) sangat cocok. GitHub Pages hanya akan menyajikan file HTML, CSS, dan JavaScript yang sudah di-build.
  • Budget Minim (alias Gratis!): Kalau kamu mencari solusi hosting yang 100% gratis tanpa biaya tersembunyi, GitHub Pages adalah juaranya.
  • Integrasi Penuh dengan GitHub: Karena ini adalah produk GitHub, integrasinya sangat mulus. Kamu tidak perlu connect ke layanan pihak ketiga lagi; semuanya ada di ekosistem GitHub.
  • Proyek Open Source: Banyak proyek open source menggunakan GitHub Pages untuk dokumentasi atau demo mereka.

Kapan GitHub Pages Kurang Cocok?

  • Aplikasi yang Butuh Server-Side Logic/Backend: GitHub Pages tidak mendukung backend (PHP, Node.js, Python, dsb.). Kalau proyekmu butuh interaksi database atau logika server yang kompleks, kamu perlu layanan lain seperti Vercel (dengan Serverless Functions) atau Netlify Functions.
  • Aplikasi dengan Traffic Sangat Tinggi: Meskipun bisa menangani trafik lumayan, untuk aplikasi skala besar dengan jutaan pengunjung, kamu mungkin butuh solusi hosting yang lebih robust.
  • Maksimal 1GB Ukuran Repo: Ada batasan ukuran repository 1GB untuk GitHub Pages. Cukup besar untuk kebanyakan proyek frontend, tapi perlu diingat.

Singkatnya, GitHub Pages itu seperti "taman bermain" gratis yang sempurna untuk meluncurkan proyek frontend statis dengan cepat.

5.2. Memastikan Kamu Punya Akun GitHub (Penting Banget!)

Ini bagian yang super penting, karena GitHub Pages secara harfiah adalah bagian dari GitHub. Kamu harus sudah punya akun GitHub dan proyek React kita harus sudah di-push ke sana.

  • Sudah Punya Akun GitHub?

Kalau kamu sudah mengikuti langkah di Bab 2 untuk meng-upload proyek my-react-deploy-app ke GitHub, berarti kamu sudah siap! Akun GitHub-mu adalah kuncinya di sini.

  • Kalau Belum Punya:

Jika kamu belum punya akun GitHub (atau belum meng-upload proyekmu):

  1. Kunjungi github.com.
  2. Klik "Sign up" dan ikuti proses pendaftaran.
  3. Setelah itu, buat repository baru untuk proyek my-react-deploy-app milikmu, lalu push kode proyekmu ke repository tersebut. (Kamu bisa mengacu lagi ke langkah "Pastikan Proyekmu Ada di GitHub" di Bab 2 kalau lupa caranya).

5.3. Mempersiapkan Proyek React untuk GitHub Pages (Beberapa Penyesuaian Kecil)

Ada beberapa penyesuaian kecil yang perlu kita lakukan pada proyek React yang dibuat dengan Vite agar bisa berjalan mulus di GitHub Pages. Ini terkait dengan bagaimana path resource (CSS, JS, gambar) di-referensikan.

5.3.1. Instal package gh-pages:

Kita akan menggunakan package gh-pages untuk mempermudah proses deploy ke GitHub Pages. Buka Terminal/Command Prompt di folder proyek React-mu (my-react-deploy-app) dan instal:

npm install gh-pages --save-dev

Atau kalau pakai Yarn:

yarn add gh-pages --dev
  • *-save-dev* menandakan ini adalah dependency untuk development, bukan production.

Hasilnya

5.3.2. Tambahkan homepage ke package.json:

Buka file package.json di root proyekmu. Tambahkan properti homepage di bagian paling atas (sebelum name atau version). Nilainya adalah URL GitHub Pages proyekmu.

Format URL GitHub Pages adalah: https://[namapengguna].github.io/[namarepo]/

Contoh: Jika username GitHub-mu adalah gemini-dev dan nama repository-mu adalah my-react-deploy-app, maka URL-nya adalah https://gemini-dev.github.io/my-react-deploy-app/

Jadi, tambahkan baris ini ke package.json kamu:

{
  "homepage": "https://[namapengguna].github.io/[namarepo]/",
  "name": "my-react-deploy-app",
  "private": true,
  "version": "0.0.0",
  // ...kode lainnya
}

Jangan lupa ganti [namapengguna] dan [namarepo] dengan milikmu ya!

Hasilnya

5.3.3. Sesuaikan vite.config.js:

Karena GitHub Pages menyajikan situsmu dari sub-path (/namarepo/), kita perlu memberi tahu Vite untuk menyertakan base path ini saat me-build aplikasi.

Buka file vite.config.js di root proyekmu. Tambahkan properti base di dalam defineConfig({}):

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

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  base: '/my-react-deploy-app/', // <-- Tambahkan baris ini!
})

Penting: Ganti /my-react-deploy-app/ dengan nama repository-mu yang sebenarnya, dan pastikan ada garis miring (/) di awal dan akhir.

5.3.4. Tambahkan Script deploy ke package.json:

Kita akan tambahkan script khusus di package.json untuk menjalankan proses build dan deploy ke GitHub Pages dengan satu perintah.

Di dalam objek "scripts", tambahkan baris ini:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  "predeploy": "npm run build", // <-- Tambahkan ini
  "deploy": "gh-pages -d dist"   // <-- Dan ini
},
  • "predeploy": Ini adalah script yang akan otomatis dijalankan oleh npm sebelum script "deploy". Kita menggunakannya untuk memastikan proyek kita sudah di-build (npm run build) sebelum di-deploy.
  • "deploy": Ini adalah perintah utama yang akan menggunakan package gh-pages untuk mengambil semua file dari folder dist (hasil build) dan meng-uploadnya ke branch gh-pages di repository GitHub-mu.

5.3.5. Commit Perubahan:

Jangan lupa simpan semua perubahan di file package.json dan vite.config.js. Lalu, commit perubahan ini dan push ke GitHub:

git add .
git commit -m "Configure for GitHub Pages deployment"
git push origin master

Hasil

5.4. Deploy Proyek React ke GitHub Pages: Langkah Demi Langkah

Sekarang setelah persiapan selesai, proses deploy-nya jadi sangat mudah!

5.4.1. Jalankan Perintah Deploy:

Di Terminal/Command Prompt (pastikan kamu ada di folder proyek my-react-deploy-app), jalankan perintah ini:

npm run deploy

Atau kalau pakai Yarn:

yarn deploy

Hasilnya kalau berhasil

5.4.2. Proses Deploy:

  • Perintah ini akan pertama-tama menjalankan npm run build (karena ada predeploy script). Ini akan membuat folder dist dengan semua file yang dioptimasi.
  • Setelah build selesai, package gh-pages akan mulai bekerja. Ia akan membuat branch baru bernama gh-pages di repository GitHub-mu (jika belum ada), menyalin semua file dari folder dist ke branch itu, dan mendorongnya ke GitHub.
  • Kamu akan melihat pesan seperti Published jika prosesnya berhasil.

5.4.3. Aktifkan GitHub Pages di Pengaturan Repository:

Ubah dulu menjadi public

GitHub Pages secara default mungkin belum aktif untuk branch gh-pages. Kamu perlu mengaktifkannya secara manual:

  • Buka repository proyekmu di GitHub (misalnya github.com/namapengguna/my-react-deploy-app).
  • Klik tab "Settings".
  • Di sidebar kiri, klik "Pages".
  • Di bagian "Branch", pilih branch gh-pages dari dropdown menu.
  • Klik tombol "Save".

hasilnya

5.4.4. Kunjungi Situsmu!

Setelah kamu menyimpan pengaturan, GitHub akan mulai me-deploy situsmu dari branch gh-pages. Biasanya tidak butuh waktu lama. GitHub akan menampilkan URL situsmu di halaman "Pages" itu juga, biasanya dalam format https://[namapengguna].github.io/[namarepo]/.

Buka URL itu di browser-mu, dan voilà! Aplikasi React my-react-deploy-app milikmu sekarang live di GitHub Pages! Selamat!

Hasilnya

5.5. Mengatasi Isu Umum di GitHub Pages

Kadang ada beberapa masalah kecil yang mungkin muncul saat deploy ke GitHub Pages:

  1. Halaman Kosong atau Error 404:
    • Penyebab: Paling sering karena properti homepage di package.json atau base di vite.config.js tidak sesuai dengan URL GitHub Pages-mu (terutama bagian /namarepo/). Pastikan format https://[namapengguna].github.io/[namarepo]/ dan /namarepo/ sudah benar dan ada tanda / di akhir.
    • Solusi: Periksa kembali kedua file tersebut dengan teliti. Setelah diperbaiki, commit perubahan dan jalankan npm run deploy lagi.
    • Penyebab: Kadang karena GitHub Pages belum sepenuhnya me-refresh cachenya.
    • Solusi: Tunggu beberapa menit, coba refresh browser dengan Ctrl+F5 (Windows) atau Cmd+Shift+R (macOS) untuk hard refresh.
  2. Resource (CSS/JS/Gambar) Tidak Ditemukan:
    • Penyebab: Sama seperti di atas, ini sering kali karena masalah path relatif. base: '/namarepo/' di vite.config.js seharusnya sudah mengatasi ini.
    • Solusi: Pastikan kamu telah menambahkan base: '/namarepo/' di vite.config.js dan properti homepage di package.json sudah benar.
  3. Tidak Ada Perubahan Setelah Deploy:
    • Penyebab: Kamu mungkin lupa meng-commit dan push perubahan terbaru ke main branch GitHub sebelum menjalankan npm run deploy. gh-pages akan menarik dari local build yang terakhir.
    • Solusi: Pastikan semua perubahan kode sudah di-commit dan di-push ke main branch di GitHub sebelum menjalankan npm run deploy.
  4. Error "gh-pages not found":
    • Penyebab: Package gh-pages belum terinstal atau tidak terinstal sebagai dev dependency.
    • Solusi: Pastikan kamu sudah menjalankan npm install gh-pages --save-dev atau yarn add gh-pages --dev.

Selamat! Kamu sekarang sudah berhasil me-deploy aplikasi React-mu ke GitHub Pages. Ini adalah solusi yang sangat hemat biaya dan efektif untuk banyak jenis proyek frontend sederhana.

6. Penutup: Proyekmu Siap Menyapa Dunia!

Selamat! Kamu sudah sampai di akhir petualangan deploy ini, dan yang lebih penting, kamu sudah punya ilmu untuk meluncurkan proyek React-mu ke dunia maya! Dari sini, proyek React-mu tidak lagi sekadar kode di laptopmu, melainkan sebuah aplikasi web yang bisa diakses dan dinikmati siapa saja.

6.1. Kita sudah belajar banyak hal:

  • Mempersiapkan Lingkungan: Kita mulai dari dasar, memastikan Node.js dan package manager sudah siap di komputermu, lalu dengan cepat membuat proyek React dummy menggunakan Vite yang modern dan cepat.
  • Netlify: Sang Juara Kemudahan: Kamu sudah melihat betapa mudahnya deploy aplikasi React ke Netlify. Dengan integrasi GitHub yang mulus dan fitur otomatisasi build yang canggih, Netlify memungkinkanmu meluncurkan proyek dengan beberapa klik saja, lengkap dengan SSL gratis dan preview deployment.
  • Vercel: Performa Tinggi & Fitur Lengkap: Kita juga menjelajahi Vercel, platform yang sangat dioptimalkan untuk performa dan pengalaman developer terbaik, khususnya untuk React dan Next.js. Fitur Serverless Functionsnya membuka banyak kemungkinan baru untuk aplikasi frontendmu.
  • GitHub Pages: Gratis dan Efisien: Terakhir, kita menyentuh GitHub Pages, solusi hosting statis gratis yang sempurna untuk proyek pribadi atau portofolio sederhana, yang terintegrasi langsung dengan repository GitHub-mu.

Masing-masing platform punya kelebihan dan kekurangannya sendiri, dan pilihan terbaik tergantung pada kebutuhan spesifik proyekmu. Intinya, tidak ada lagi alasan untuk takut me-deploy aplikasimu. Semua tool ini dirancang untuk mempermudah hidup developer sepertimu.

Jadi, tunggu apa lagi? Ambil proyek React-mu yang lain, atau mulai ide proyek baru, dan deploylah dengan percaya diri! Dunia maya menunggumu. Selamat berkarya dan teruslah berinovasi!

Studi Kasus & Sumber Belajar Terpercaya ( BuildWithAngga )

Bila kamu mau belajar lebih dalam dan lebih lanjut lagi aku saranin mengikuti kelas dari BuildWithAngga. BuildWithAngga punya pendekatan pembelajaran yang cukup beda dibanding platform belajar coding lainnya, terutama buat pemula dan orang yang suka belajar visual. Berikut beberapa hal yang bikin mereka menonjol:

⭐ Belajar dari Real Project, Bukan Teori Doang

Di BuildWithAngga, kamu gak cuma belajar sintaks, tapi langsung bikin project nyata kayak:

  • Website portfolio modern
  • Aplikasi booking seperti Tokopedia Travel
  • Landing page profesional
  • UI design pakai Figma

➡️ Jadi kamu langsung lihat hasilnya, bukan cuma hafalin kode.

⭐ Visual Interaktif & UI Keren

Mereka bener-bener fokus ke desain antarmuka yang kece:

  • Kelas banyak yang berfokus pada Frontend (HTML, CSS, Tailwind, React)
  • Desainnya modern dan sesuai tren industri
  • Belajar coding sekaligus belajar taste desain

Cocok banget buat kamu yang pengin kerja sebagai UI/UX Developer.

⭐ Materi Up-to-date & Fokus ke Industri

BuildWithAngga ngikutin tren teknologi terbaru:

  • Tailwind CSS, Next.js, Laravel 10
  • Vercel deployment, GitHub versioning
  • Animasi interaktif, Responsive Web Design

➡️ Gak belajar hal yang "jadul" dan kurang relevan.

⭐ Penjelasan Simpel, Bahasa Indonesia

Semua materi pakai bahasa Indonesia dengan gaya yang santai, receh tapi dalam, cocok banget buat kamu yang bosen dengan pembelajaran kaku dan textbook.

➡️ Gak bikin stres dan lebih mudah dipahami, terutama buat pemula.

⭐ Mentoring & Sertifikat Karier

  • Bisa dapet sertifikat resmi
  • Ada career mentoring buat bantu kamu masuk dunia kerja
  • Kelas premium biasanya dilengkapi dengan review dari mentor

➡️ Jadi bukan sekadar belajar, tapi juga disiapkan untuk kerja.

Kalau kamu suka gaya belajar yang langsung "terjun ke lapangan", visual menarik, dan gampang dipahami, BuildWithAngga jelas beda dan cocok untuk kamu yang mau serius masuk dunia kreatif & digital.