How to use Parcel with Phoenix framework 1.3

I like Parcel bundler which is zero configuration web app bundler tool.

I’ll show you how to use Parcel bundler on Phoenix framework 1.3.

Create a phoenix project

mix phx.new your_project
cd your_project

It installs brunch. But it’s easier to let it install brunch. Because there will be package.json and directories.

Update assets/package.json

Then let’s configure package.json. It’s under assets directory. You can replace it to like this.

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "parcel build js/app.js --out-dir ../priv/static/assets",
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.9.7"
  }
}

Then yarn.

Actually, I’m not sure if I need to set scripts here. Because there is a setting section in config/dev.exs.

Update config/dev.exs

In config/dev.exs, you will find Endpoint config.

Update watchers like this. This will be ran when you run phoenix.

config :your_project, YourProject.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [node: ["node_modules/parcel-bundler/bin/cli.js",
                    "watch", "js/app.js",
                    "--out-dir", "../priv/static/assets",
                    cd: Path.expand("../assets", __DIR__)]]

Update lib/your_project_web/endpoint.ex

In lib/your_project_web/endpoint.ex, you will find Plug.Static config.

Add assets directory. Then phx.server serves files under priv/static/assets directory.

plug Plug.Static,
  at: "/", from: :vegan, gzip: false,
  only: ~w(assets favicon.ico robots.txt)

Start phoenix server

iex -S mix phx.server

Then you will see a compiled JavaScript file at priv/static/js which you configured in dev.exs.

Contents