Weekend with AlpineJS

Frontend Developer Forum Frontend Chat/Discussions
,
7

What AlpineJS? The weekend was spent with me cursing Webpack. Loudly when my kid was outside. While webpack had problems with Alpine 3 (not sure if it was me or not but installations should be idiot-proof in this day and age so even if I’m an idiot, I shouldn’t have suffered). Then I looked into webpack a little and found out, it’s not fun. So I decided to just remove it and get this thing called “Parcel”. And everything works. From now on, the first thing I do after starting a Phoenix project (that needs a front-end) is, replace Webpack with Parcel.

Quite simple really:

  1. The most satisfying thing! Remove Webpack, delete the webpack.config.js, rejoice.
  2. npm install --save-dev parcel parcel-plugin-stdin sass (Not node-sass).
  3. Make your “scripts” in package.json look like the following:
  "scripts": {
    "deploy": "cp -R static/* ../priv/static/ && parcel build js/app.js --dist-dir ../priv/static/dist --public-url /dist --no-cache",
    "watch": "cp -R static/* ../priv/static/ && parcel watch js/app.js --dist-dir ../priv/static/dist --public-url /dist"
  },

watch out though, depending on your Parcel version, it could be --out-dir or --dist-dir (In example above).

  1. Get a .sassrc and add {"includePaths": ["node_modules"]} if you’re using SASS
  2. Update endpoint.ex by adding a dist in Plug.Static-s only: list
  3. In dev.exs config for YourApp.Endpoint should have watchers: [npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]] as watcher!

So far it’s working nicely. I can totally run with Alpine 3, and also, no Webpack. If anything, I’d have the biggest learning of this weekend as getting introduced to Parcel.

2 Likes