Phoenix 1.6 Easy PETAL Stack with DaisyUI

Simple PETAL Setup

I have been enjoying the tools associated with Elixir and exploring the frontend. LiveView helps make that more intuitive and when that isn’t enough, AlpineJS is a lightweight JS tool with a similar syntax as Vue.

Install asdf - and required software

On a Mac I used Homebrew:

brew install asdf
echo -e '\n. $(brew --prefix asdf)/asdf.sh' >> ~/.bash_profile
echo -e '\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash' >> ~/.bash_profile
source ~/.bash_profile  # (or open a new terminal)

Now you can install asdf software packages:

asdf plugin-add erlang
asdf plugin-add elixir
asdf plugin-add Postgres

Now you need to install the desired versions (usually the newest) - currently:

asdf list all erlang
asdf install erlang 24.3.3
asdf global erlang 24.3.3


# note the elixir version otp must match the erlang version!
asdf list all elixir
asdf install elixir 1.13.4-otp-24
asdf global elixir 1.13.4-otp-24

# asdf install elixir 1.11.4-otp-24
# if you mismatch elixir with erlang you will get errors like:
# {"init terminating in do_boot",{undef,[{elixir,start_cli,[],[]},{init,start_em,1,[]},{init,do_boot,3,[]}]}}

asdf list all Postgres
asdf install Postgres 14.2 # Slow! (maybe just use homebrew's version)

Get the newest Elixir tools

mix local.rebar --force
mix local.hex --force

Get the newest Phoenix Hex Package

Once you have established you have the requirements - the download the newest version of Phoenix (go to: https://hexdocs.pm/phoenix/installation.html#phoenix to see the newest version) - at the time of this writing its 1.5.8 - be sure its installed using:

mix archive.install hex phx_new 1.6.6 --force

create a project with asdf settings

First we will create the folder / project location

mkdir petal

Now we will tell it which software to use :

touch petal/.tool-versions
cat <<EOF >>petal/.tool-versions
erlang 24.3.3
elixir 1.13.3-otp-24
EOF

Create a new Phoenix Project

https://carlyleec.medium.com/create-an-elixir-phoenix-app-with-asdf-e918649b4d58

Now you can simply do:

mix phx.new petal --live
cd petal
mix ecto.create

assuming all is good lets configure git:

git init
git add .
git commit -m "initial Phoneix install with LiveView"

credo

add credo to mix.exs (optional but often useful)

{:credo, "~> 1.6"}

configure credo

mix deps.get
mix credo gen.config

Tailwind & DaisyUI

Add to mix.exs

{:phx_gen_tailwind, "~> 0.1", only: :dev, runtime: false}

configure TailwindCSS

mix deps.get
mix phx.gen.tailwind

Test TailwindCSS

add to the top of: lib/slacker_gen_tail_web/templates/page/index.html.heex

<div class="text-green-500 text-5xl text-center">Large Centered Green TailwindCSS</div>

start phoenix mix -S phx.server

Add DaisyUI

https://daisyui.com/docs/install/ https://elixirforum.com/t/how-to-get-daisyui-and-phoenix-to-work/46612/8 (also explains what to do when using/deploying to Fly.io)!

first we need to initialize npm (otherwise DaisyUI won’t load / integrate with esbuild)

cd assets
npm init
# just using the defaults seems to work
npm install daisyui

Now configure Tailwind (assets/tailwind.config.js) to use daisyui

// assets/tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './js/**/*.js',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
  },
  variants: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Test DaisyUI

now lets add a DaisyUI Button to the default page lib/fare_web/templates/page/index.html.heex:

<button class="btn btn-primary">Button</button>

ideally when we start phoenix:

iex -S mix phx.server

we should now see in the log:

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

Rebuilding...

🌼 daisyUI components 2.13.6  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[29], utilities

now when we look at the landing page we should see a rounded blue button!

install & test Alpine JS

see the article on phoenix installer (easiest) or by hand to install aplinejs

See Adding fonts for more options

see the article on adding a custom font for font information

Tailwind & DaisyUI with Fly.io

https://github.com/phoenixframework/tailwind https://elixirforum.com/t/how-to-get-daisyui-and-phoenix-to-work/46612/8 https://elixirforum.com/t/tailwind-not-working-in-production-no-styles-just-plain-html/45192

Resources (1.6.x)

Older Resources

Bill Tihen
Bill Tihen
Developer, Data Enthusiast, Educator and Nature’s Friend

very curious – known to explore knownledge and nature