Modern Web Stack
Vite

Vite.js

Vite adalah sebuah development dan build tool yang dirancang untuk meningkatkan developer experience untuk membangun web dengan modern web stack. Vite memberikan experience yang super cepat dengan memanfaatkan dukungan native ES Module (ESM) pada browser modern.

Instalasi

Mulai membuat proyek dengan Vite. Jalankan perintah di bawah ini:

npm create vite@latest

Pada saat instalasi, kamu akan melihat petunjuk berikut ini:

  • Bakal ditanyain nama proyeknya apa? Misal, myvite, tekan Enter.
  • Selanjutnya, akan tampil untuk pilihan framework, untuk saat ini kita cukup pilih Vanilla, tekan Enter.
  • Setelah itu, akan tampil untuk pilihan varian JavaScript atau TypeScript. Untuk saat ini kita cukup pilih JavaScript, tekan Enter.

Jika sudah selesai, kita dapat masuk ke proyek myvite, install, dan menjalankannya. Contoh:

cd myvite
npm install
code .
npm run dev

Kamu juga dapat mem-build proyeknya dengan menjalankan perintah di bawah ini:

npm run build

Hasilnya, ketika kita melakukan build akan membuat sebuah direktori dist yang akan disimpan dalam direktori tersebut.

Untuk menyimpan file-file static assets, kamu bisa menyimpannya di direktori public, seperti file gambar, dll.

File Organization

Untuk menggunakan file yang lebih baik, disarankan untuk menggunakan src direktori. Kita dapat mengonfigurasinya pada file vite.config.js.

vite.config.js
import { defineConfig } from "vite";
 
export default defineConfig({
  root: "src",
  build: {
    outDir: "../dist/",
  },
});

Concurrently

Concurrently (opens in a new tab) fungsinya untuk menjalankan multiple command secara bersamaan.

Instalasi

Jalankan perintah di bawah ini untuk install library concurrently:

npm install -D concurrently

Cara Penggunaan

Buka file package.json kemudian ubah scripts menjadi seperti di bawah ini:

package.json
"scripts": {
    "tailwind:watch": "npx tailwindcss -i ./src/css/style.css -o ./src/css/global.css --watch",
    "tailwind:build": "npx tailwindcss -i ./src/css/style.css -o ./src/css/global.css",
    "dev": "concurrently \"npm run tailwind:watch\" \"vite\"",
    "build": "vite build",
    "preview": "vite preview"
},

Selanjutnya, kamu cukup menjalankan perintah seperti di bawah ini:

npm run dev

Maka akan berjalan 2 perintah secara bersamaan, perintah untuk tailwindcss dan vite.

Tailwind CSSGit