🚀 Setting up Vite and ESBuild in Rails Project

📦 1. Install Vite

yarn add [email protected]

⚙️ 2. Fetch Config Files

curl -o "vite.config.js" "<https://raw.githubusercontent.com/bigbinary/wheel/main/vite.config.js>"
curl -o "esbuild.config.js" "<https://raw.githubusercontent.com/bigbinary/wheel/main/esbuild.config.js>"

🛠️ 3. Path setup

mkdir -p config/build
touch config/build/config.js

Paste this in config.js:

import { createRequire } from "module";
import path from "path";
import { absolutePath } from "./constants.js";

const require = createRequire(import.meta.url);

const alias = {
  images: path.resolve(process.cwd(), "app/assets/images"),
  crypto: require.resolve("crypto-browserify"),
  path: require.resolve("path-browserify"),
  buffer: require.resolve("buffer"),
  stream: require.resolve("stream-browserify"),
  assets: absolutePath("../assets"),
};

export { alias };

Download the constants file

curl -o "config/build/constants.js" "<https://raw.githubusercontent.com/bigbinary/wheel/main/config/build/constants.js>"

🔀 4. Move application.js

mkdir -p ./app/javascript/packs/
mv ./app/javascript/application.js ./app/javascript/packs/application.js

📝 5. Update package.json Scripts

Replace scripts block in package.json:

"scripts": {
  "build": "node esbuild.config.js",
  "dev": "vite"
}