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

Hey everyone, yesterday I have played around with Vite.js and it feels really nice for frontend dev in Phoenix. The setup is currently a bit involved, so I have documented the process here:

Please share your feedback if there are some questions / suggestions!

14 Likes

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
6 Likes

Just wondering why you decided to move from snowpack to vite? They both seem pretty similar… I got snowpack to work with a fresh Phoenix/LiveView project but have not experimented with vite yet.

This may not be a good answer but my reason was not related to features comparison. I ran into infinite build problem with snowpack + phoenix live reload, and I can’t fix it within an hour, so I decided “lets change build tool and get rid of both problem and solution seeking altogether”


Update my setup above (changed 1 line, everything stays the same), use chokidar directly (vite build uses it under the hood anyway) for better control what to watch.

+ "watch": "chokidar js css -c 'vite build --minify false --emptyOutDir false --clearScreen false --mode development'"
1 Like