Apa Itu Vite? Panduan Sederhana untuk App Builder

Vite (dibaca "veet", artinya "cepat" dalam bahasa Prancis) adalah alat build untuk situs dan aplikasi web. Saat Anda sedang membangun, ia menjalankan development server yang menampilkan perubahan di browser hampir seketika. Saat Anda siap meluncurkan, ia mengemas kode menjadi file kecil yang sudah dioptimalkan dan bisa disajikan oleh host web mana pun. Alat ini gratis, open source, dan menjadi alat default di balik banyak proyek React, Vue, dan Svelte.

Mengapa Vite penting saat membangun dengan AI

Anda mungkin tidak pernah mengetik perintah Vite, tetapi jika aplikasi Anda dibangun dengan AI app builder, kemungkinan besar Vite yang menjalankannya. Mythex memulai proyek baru dengan Vite + React + TypeScript + Tailwind kecuali Anda meminta yang lain (cara teknologinya dipilih).

Memahami apa yang dilakukan Vite membantu Anda:

• Memahami Preview. Preview live yang diperbarui saat AI mengedit file biasanya adalah development server Vite.
• Memahami deployment. Aplikasi Vite menjadi folder berisi file statis — HTML, JavaScript, CSS, dan gambar — yang murah dan sederhana untuk dihosting.
• Membaca pesan error. Ketika preview menampilkan overlay error merah atau halaman kosong, sering kali itu Vite yang melaporkan bahwa sebuah file gagal dikompilasi.
• Mengetahui batasannya. Vite membangun bagian frontend. Jika aplikasi Anda memerlukan backend — database, API key rahasia, pembayaran — itu berjalan di tempat lain. Lihat frontend vs backend.

Analogi sehari-hari

Bayangkan dapur restoran.

• Saat persiapan layanan (development), koki mencicipi dan menyesuaikan setiap hidangan selama proses. Ubah bumbunya, cicipi lagi sejenak kemudian. Itulah development server Vite: Anda mengubah sebuah file, halaman langsung diperbarui, sering kali tanpa kehilangan apa yang sudah Anda ketik di formulir.
• Untuk pesanan katering (produksi), semuanya dimasak, dibagi porsi, dikemas, dan diberi label agar mudah dibawa dan bisa disajikan di mana saja. Itulah vite build: kode Anda digabung, diperkecil, dan diberi sidik nama file agar siap untuk host mana pun.

Resep yang sama, dua cara penanganan yang sangat berbeda — dan Vite melakukan keduanya.

Apa yang sebenarnya dilakukan Vite

Aplikasi web modern terdiri dari banyak file: komponen, style, gambar, dan library pihak ketiga. Browser tidak bisa memakai semua itu apa adanya. TypeScript harus menjadi JavaScript, JSX dari React harus diubah, dan class Tailwind harus diubah menjadi CSS.

Vite menangani ini dalam dua mode:

Alat lama menggabungkan seluruh aplikasi sebelum menampilkan apa pun, sehingga memulai dan memperbarui proyek besar bisa memakan waktu lama. Trik Vite adalah melewati langkah itu saat development dan membiarkan browser memuat file sesuai kebutuhan. Untuk produksi, Vite tetap menggabungkan — mulai Vite 8, dengan bundler bernama Rolldown — karena banyak file kecil lebih lambat bagi pengunjung dibanding beberapa file yang sudah dioptimalkan.

Contoh kerja: isi proyek Vite

Berikut kira-kira tampilan proyek Vite + React kecil:

my-app/
  index.html          ← satu-satunya halaman HTML tempat aplikasi dimulai
  package.json        ← daftar library dan script (dev, build)
  vite.config.ts      ← pengaturan dan plugin Vite
  src/
    main.tsx          ← menjalankan React dan memasangnya ke index.html
    App.tsx           ← komponen tingkat atas aplikasi Anda
    index.css         ← style, misalnya @import "tailwindcss";
  public/             ← file yang disalin apa adanya (favicon, robots.txt)

Dan script di package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Sekarang ikuti satu perubahan:

1. Anda meminta AI untuk "buat judulnya biru".
2. AI mengedit sebuah class di App.tsx.
3. Vite menyadari file itu berubah, mengubah hanya file tersebut, lalu mendorong pembaruannya ke browser.
4. Judul berubah warna di preview, biasanya dalam waktu kurang dari satu detik.

Saat Anda mempublikasikan, vite build menghasilkan sesuatu seperti dist/index.html plus dist/assets/index-a1b2c3.js. Bagian nama file yang tampak acak itu berubah setiap kali isinya berubah, sehingga browser dan CDN bisa menyimpan cache file dalam waktu lama tanpa menyajikan kode yang sudah usang.

Variabel lingkungan di Vite

Vite hanya membuka variabel yang namanya diawali VITE_ untuk kode browser, misalnya VITE_PUBLIC_MAP_ID. Itu adalah langkah keamanan: apa pun di kode browser bisa dilihat pengunjung, sehingga API key rahasia tidak boleh memakai awalan itu dan harus tetap berada di backend. Lihat variabel lingkungan dan secret.

Istilah kunci

Kesalahpahaman umum

• "Vite adalah framework." Ini alat build. React, Vue, atau Svelte adalah framework-nya; Vite yang menjalankan dan mengemasnya.
• "Aplikasi Vite sudah mencakup backend." Aplikasi Vite standar hanya frontend. Database, login, dan API key rahasia memerlukan server atau API di sampingnya.
• "Dev server boleh dipasang online." Ia tidak dimaksudkan untuk trafik sungguhan. Selalu deploy output dari build produksi.
• "Apa pun di .env itu rahasia." Di aplikasi Vite, variabel VITE_ ditanamkan ke file yang diunduh setiap pengunjung.
• "Me-refresh halaman yang memberi 404 berarti aplikasi rusak." Di single-page app, host harus mengirim setiap rute kembali ke index.html. Itu pengaturan hosting — lihat cara memperbaiki error 404 setelah deploy.

Yang sebaiknya diminta ke AI builder Anda

• "Apakah aplikasi ini hanya Vite (frontend), atau juga punya backend? Di mana masing-masing bagian berjalan?"
• "Jalankan build produksi dan perbaiki semua error atau peringatan sebelum saya mempublikasikan."
• "Pastikan tidak ada API key rahasia di variabel VITE_ atau di mana pun dalam kode frontend."
• "Preview menampilkan halaman kosong — periksa error di konsol Vite dan browser, lalu perbaiki penyebabnya." Lihat cara memperbaiki halaman putih kosong.
• "Pastikan me-refresh URL halaman mana pun berfungsi setelah dipublikasikan, bukan hanya halaman beranda."

Vite di Mythex

Setiap proyek Mythex baru dimulai dengan Vite kecuali Anda meminta Next.js, HTML statis, atau backend yang berbeda. Preview live di sandbox pribadi Anda diperbarui saat agent mengedit file, dan Publish membangun aplikasi lalu men-deploy-nya — tidak ada hosting yang perlu Anda siapkan sendiri. Jika nanti Anda membutuhkan API atau database, minta di chat dan Mythex dapat menambahkan layanan backend di samping frontend Vite (aplikasi multi-layanan).

Pertanyaan