Phoenix 1.6 Easy PETAL Stack with DaisyUI

Simple PETAL Setup

Bill Tihen
Last updated on Mon, Apr 11, 2022 Code

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

Phoenix Phoenix 1.6.x Elixir TailwindCSS TailwindCSS 3.x AlpineJS AlpineJS 3.x LiveView PETAL PETAL Stack ASDF CSS DaisyUI
Bill Tihen
Bill Tihen
Developer, Data Enthusiast, Educator and Nature’s Friend

very curious – known to explore knownledge and nature