A proof-of-concept integration of Vite.js (modern JS/assets bundler) with Phoenix + Liveview

Phoenix Forum Chat / Discussions
, , ,
2

Hi, I switched from Snowpack to Vite recently, and it works great on my production. I’d like to provide my setup here which is, I think, the easiest way.

--- a/assets/package.json
+++ b/assets/package.json
@@ -3,8 +3,8 @@
   "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch --minify false --emptyOutDir false --clearScreen false --mode development"
   },
   "devDependencies": {
+    "vite": "^2.2.4"
   }
 }

--- /dev/null
+++ b/assets/vite.config.js
@@ -0,0 +1,19 @@
+export default {
+  publicDir: "./static",
+  build: {
+    target: "es2018",
+    minify: true,
+    outDir: "../priv/static",
+    emptyOutDir: true,
+    rollupOptions: {
+      input: ["js/app.js", "css/app.css"],
+      output: {
+        entryFileNames: "js/[name].js",
+        chunkFileNames: "js/[name].js",
+        assetFileNames: "[ext]/[name][extname]"
+      }
+    },
+    assetsInlineLimit: 0
+  }
+}

--- a/config/dev.exs
+++ b/config/dev.exs
@@ -23,7 +23,7 @@ config :fset, FsetWeb.Endpoint,
   watchers: [
-    node: ["whatever", "ever", cd: Path.expand("../assets", __DIR__)]
+    yarn: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
   ]

--- a/Dockerfile
+++ b/Dockerfile
@@ -27,7 +27,7 @@ ENV NODE_ENV=production
 COPY lib lib
 COPY priv priv
 COPY assets assets
+RUN yarn --cwd ./assets run build
 RUN mix phx.digest
13 Likes