📄 Panduan index.html dalam Vite: Apa yang Boleh, Tidak Boleh, dan Rekomendasinya

Vite adalah build tool modern yang menggabungkan simplicity HTML + kekuatan ESM + performa super cepat. Salah satu bagian penting dari proyek Vite adalah file index.html.

Tapi, apakah kamu tahu bahwa index.html di Vite bukan file HTML biasa?

🧠 Apa Itu `index.html` di Vite?

Berbeda dari proyek frontend tradisional, Vite memproses index.html secara spesial:

Sebagai entry point utama aplikasi.
Mendukung template injection seperti %-style atau env variables.
Bisa menyertakan <script type="module"> yang menjadi entry ESM.

✅ Apa yang Boleh Dilakukan pada `index.html`

Berikut hal-hal yang boleh dan didukung secara resmi:

1. ✅ Ditempatkan di Root Project

/project-root/
├── index.html    ✅ default dan direkomendasikan
├── vite.config.ts
├── src/
│   └── main.ts

Vite akan otomatis mendeteksi dan menjalankan file ini saat vite dev.

2. ✅ Menggunakan `<script type="module" src="/main.ts">`

<script type="module" src="/main.ts"></script>

Vite akan membaca file ini dan menggunakannya sebagai entry point module bundling.

3. ✅ Inject `env` dan `base` secara otomatis

<script type="module">
  console.log(import.meta.env.BASE_URL)
</script>

4. ✅ Multi-page support (jika dikonfigurasi di `vite.config.ts`)

Kamu bisa punya banyak file HTML seperti about.html, dashboard.html, dll — asalkan ditentukan di rollupOptions.input.

❌ Apa yang Tidak Boleh / Tidak Disarankan

1. ❌ Meletakkan `index.html` di Dalam `src/` Tanpa Konfigurasi

/project-root/
├── src/
│   ├── index.html ❌ tidak akan dikenali tanpa config

Tanpa konfigurasi root dan rollupOptions, Vite tidak akan tahu ini adalah entry.

2. ❌ Menggunakan Syntax HTML yang Tidak Valid atau Conflict dengan ESM

Misalnya, script biasa tanpa type="module":

<!-- ⚠️ Ini tidak akan digunakan sebagai ESM entry -->
<script src="/main.js"></script>

3. ❌ Menambahkan Script Build Tools Langsung di HTML

Vite tidak mengizinkan eksekusi script non-browser (Node.js tools) langsung dari HTML seperti:

<script src="node_modules/..."> <!-- ❌ Tidak jalan -->

⚙️ Jika Harus Pindahkan ke `src/`?

Kamu boleh saja pindahkan index.html ke dalam src/, asal kamu tahu konsekuensinya dan mengubah config Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: resolve(__dirname, 'src/index.html'),
    },
  },
})

Tapi ini tidak disarankan untuk pemula, karena akan merusak konvensi default dan menambah kompleksitas tidak perlu.

🧭 Rekomendasi Terbaik

Tujuan Kamu	Rekomendasi
Setup biasa (SPA / React / Vue)	✅ Simpan `index.html` di root project
Butuh struktur bersih	✅ Simpan `main.ts` & asset di `src/`, HTML tetap di root
Butuh banyak halaman (MPA)	✅ Gunakan `rollupOptions.input` untuk HTML lainnya
Pakai Bun + Vite	✅ Tidak ada masalah, tetap ikuti struktur Vite
Pindah HTML ke `src/`	🚫 Hindari kecuali kamu sudah paham konfigurasi penuh

📌 Kesimpulan

index.html adalah file spesial di Vite yang menjadi entry utama aplikasi.
Harus diletakkan di root project agar dideteksi otomatis.
Tidak perlu plugin tambahan untuk menggunakannya.
Boleh dipindahkan ke src/, tapi harus mengatur vite.config.ts secara eksplisit.
Untuk pengalaman terbaik: ikuti konvensi default Vite.

📄 Panduan index.html dalam Vite: Apa yang Boleh, Tidak Boleh, dan Rekomendasinya

Comments

More from this blog

Hermes vs OpenClaw (2026): Mana yang Lebih Baik untuk Developer?

Memahami Protokol Penting untuk Developer Web Modern dan Cloud Infrastructure

Mengapa Banyak Mahasiswa IT Lulus Tetapi Sulit Mendapat Pekerjaan?

OpenNext: Cara Menjalankan Next.js di Mana Saja Tanpa Terkunci Vercel

Jangan Langganan OpenCode Go Sebelum Ambil Bonus $5 Ini

🧠 Apa Itu `index.html` di Vite?

✅ Apa yang Boleh Dilakukan pada `index.html`

1. ✅ Ditempatkan di Root Project

2. ✅ Menggunakan `<script type="module" src="/main.ts">`

3. ✅ Inject `env` dan `base` secara otomatis

4. ✅ Multi-page support (jika dikonfigurasi di `vite.config.ts`)

❌ Apa yang Tidak Boleh / Tidak Disarankan

1. ❌ Meletakkan `index.html` di Dalam `src/` Tanpa Konfigurasi

2. ❌ Menggunakan Syntax HTML yang Tidak Valid atau Conflict dengan ESM

3. ❌ Menambahkan Script Build Tools Langsung di HTML

⚙️ Jika Harus Pindahkan ke `src/`?

🧭 Rekomendasi Terbaik

📌 Kesimpulan

Command Palette

Comments

More from this blog

🧠 Apa Itu index.html di Vite?

✅ Apa yang Boleh Dilakukan pada index.html

1. ✅ Ditempatkan di Root Project

2. ✅ Menggunakan <script type="module" src="/main.ts">

3. ✅ Inject env dan base secara otomatis

4. ✅ Multi-page support (jika dikonfigurasi di vite.config.ts)

❌ Apa yang Tidak Boleh / Tidak Disarankan

1. ❌ Meletakkan index.html di Dalam src/ Tanpa Konfigurasi

2. ❌ Menggunakan Syntax HTML yang Tidak Valid atau Conflict dengan ESM

3. ❌ Menambahkan Script Build Tools Langsung di HTML

⚙️ Jika Harus Pindahkan ke src/?

🧭 Rekomendasi Terbaik

📌 Kesimpulan

🧠 Apa Itu `index.html` di Vite?

✅ Apa yang Boleh Dilakukan pada `index.html`

2. ✅ Menggunakan `<script type="module" src="/main.ts">`

3. ✅ Inject `env` dan `base` secara otomatis

4. ✅ Multi-page support (jika dikonfigurasi di `vite.config.ts`)

1. ❌ Meletakkan `index.html` di Dalam `src/` Tanpa Konfigurasi

⚙️ Jika Harus Pindahkan ke `src/`?