Note: This is a HOWTO, not a question. I hope this is an appropriate place to share this, so it can be found by others who might run into problems getting Phoenix to work fully on OpenBSD.
Recent versions of Phoenix are tightly integrated with both TailwindCSS and esbuild, and mix phx.new installs binary distributions of both.
Unfortunately that doesn’t work out of the box on OpenBSD, and needs a few extra steps to be carried out right after initializing a project.
Tailwind
The automatically installed Linux binary obviously will never work on OpenBSD. Therefore we will need to manually install tailwind:
First install NodeJS:
$ doas pkg_add node
then Tailwind and the Forms plugin:
$ npm install -D tailwindcss
$ npm install -D @tailwindcss/forms
It’s possible that this creates a version mismatch between the version of tailwind installed by npm and the version from the default configuration. If that’s the case, just adjust the version in config/config.exs:
...
# Configure tailwind (the version is required)
config :tailwind,
version: "<your version here>",
...
now all that’s left is to replace the binary _build/tailwind_linux_x64:
$ > _build/tailwind_linux_x64
with a small shell script
#!/bin/sh
npx tailwindcss "$@"
At this point we’re done. All the Tailwind integrations will now work on OpenBSD in the same way as on Linux.
esbuild
Those working with 11th gen or later Intel CPUs will notice that the esbuild binaries released by the esbuild team will crash on OpenBSD.
(see Install fails on OpenBSD · Issue #3523 · evanw/esbuild · GitHub for details)
Fortunately that’s also easy to fix by building esbuild with OpenBSDs patched go compiler and copying the resulting binary over _build/esbuild_openbsd_x64.
