# 📄 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

```bash
/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">`

```html
<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

```html
<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

```bash
/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"`:

```html
<!-- ⚠️ 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:

```html
<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:**

```ts
// 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**.