FQSoft - Frontend Modern Tanpa Ribet: Vite + Alpine.js + TailwindCSS

Membangun antarmuka web yang modern sering kali diasosiasikan dengan framework besar seperti Vue atau React. Meski powerful, keduanya bisa terasa berlebihan untuk proyek yang sederhana atau bersifat modular. Di tengah kebutuhan akan kecepatan, kesederhanaan, dan fleksibilitas, kombinasi Vite, Alpine.js, dan TailwindCSS muncul sebagai solusi yang ringan namun tetap bertenaga. Artikel ini akan mengajak Anda menjelajahi bagaimana tiga teknologi ini dapat bekerja sama membentuk fondasi frontend yang efisien, mudah di-debug, dan menyenangkan untuk dikembangkan — tanpa harus terjebak dalam kompleksitas framework besar.

Langkah 1 : Create Project JS dengan Vite

jika menggunakan npm ini peirntahnya. untuk updatenya kunjungi website resmi vite

npm create vite@latest

npm create vite@latest

setelah selesai vite akan membuat file src\main.js saya biasanya menggunakan file ini sebagai "starting point" dimana seluruh lib JS yang digunakan secara global saya import di file ini termasuk deklasrasi start alpinejs juga disini. ini contohnya :

import Alpine from 'alpinejs'

//Tempat variabel lain

// Start Alpine secara global
window.Alpine = Alpine
Alpine.start()

import Alpine from 'alpinejs'

//Tempat variabel lain

// Start Alpine secara global
window.Alpine = Alpine
Alpine.start()

untuk deklarasi variabel lain tempatkan setelah import dan sebelum alpinejs. karena jika setelah alpinejs variabel menjadi tidak dikenali

Langkah 2 : Install TailwindCSS di Vite

kunjung web resminya tailwindCSS tentang cara install yang benar termasuk konfigurasinya di vite sebab konfigurasi di vite antara versi 4 dan sebelumnya berbeda (versi 4 adalah versi terbaru saat artikel ini dibuat)

saya pernah cara install dan konfigurasi dengan arahan chatGPT dan hasilnya mereka memberikan arahan versi 3 padahal di prompt saya tulis versi 4. Ini pelajaran besar "jangan terlalu percaya dengan AI" jadi tetap kritis

Langkah 3 : Install Alpinejs

npm install alpinejs

npm install alpinejs

lalu import alpinejs di src\main.js

import Alpine from 'alpinejs'

// Start Alpine secara global
window.Alpine = Alpine
Alpine.start()

import Alpine from 'alpinejs'

// Start Alpine secara global
window.Alpine = Alpine
Alpine.start()

Langkah 4 : Load src\main.js di index.html

Letakkan di header

<!DOCTYPE html>
<html lang="id">
<head>
  <script type="module" src="http://fqsoft.my.id/blog//src/main.js"></script>
</head>
<body></body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
  <script type="module" src="/src/main.js"></script>
</head>
<body></body>
</html>

jika ada halaman html lain selain index.html maka pastikan file src\main.js diimport lagi. tapi jika jumlah page html ada banyak maka lebih baik pakai template

tambahkan x-cloak di header dan di body. karena jika tanpa ini maka biasanya tanpilan akan muncul berantakan diawal karena alpinejs masih belum start() secara sempurna

<!DOCTYPE html>
<html lang="id">
<head>
  <script type="module" src="http://fqsoft.my.id/blog//src/main.js"></script>
  <style> [x-cloak] { display: none !important; } </style>
</head>
<body>
  <div x-cloak ></div>
</body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
  <script type="module" src="/src/main.js"></script>
  <style> [x-cloak] { display: none !important; } </style>
</head>
<body>
  <div x-cloak ></div>
</body>
</html>

div yang beratribut x-cloak tidak akan muncul sampai alpinejs start() dengan sempurna

Langkah 5 : Install Lib JS pelengkap

ada beberapa js yang bisa mempercantik frontend :

animate.css = Untuk memberikan simpel animasi
fortawesome/fontawesome-free = untuk menampilkan icon

//Install animate css
npm install animate.css --save

//Install fontawesome
npm install @fortawesome/fontawesome-free

//Install animate css
npm install animate.css --save

//Install fontawesome
npm install @fortawesome/fontawesome-free

lalu import kedua lib diatas di src\main.js dan pastikan letakkan di blok import biasanya diatas. agar tetap rapi

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'animate.css';

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'animate.css';

Langkah 6 : Menjalankan server HMR

npm run dev

npm run dev

Langkah 7 : Build untuk di Publish

npm run build

npm run build

proses ini akan membuat folder dist yang bersisi file hasil compile vite. dan hanya satu file html yang dicompile yaitu index.html

bagiamana jika ada file html lain selain index.html agar bisa ikut dicompile ? maka disini perlu konfigurasi tambahan untuk merigister file html yang lain di vite.config.js seperti dibawah ini

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        page_satu: resolve(__dirname, 'page-satu.html'),
        page_dua: resolve(__dirname, 'page-dua.html')
      }
    }
  },
  base: './'
})

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        page_satu: resolve(__dirname, 'page-satu.html'),
        page_dua: resolve(__dirname, 'page-dua.html')
      }
    }
  },
  base: './'
})

ingat javascript tidak bisa langsung jalan di browser tapi harus diakses dengan browser via server. kecuali project javascript dibundling dengan electronjs maka bisa dijalankan laiknya aplikasi desktop

Blog FQSoft

Frontend Modern Tanpa Ribet: Vite + Alpine.js + TailwindCSS