Phoenix Elixir Tailwind Alpine Liveview


Youtube Link

  1. Install Elixir using package-manager yay -S elixir a. Check: elixir -v

  2. Setup hex archive manager mix local.hex && mix local.rebar a. Check: mix hex

  3. Install Phoenix mix archive.install hex phx_new

  4. Create new project mix <project_name>

  5. Setup tailwind

    1. $ cd assets && npm init -y
    2. assets $ npm i -D tailwindcss autoprefixer postcss postcss-import
    3. assets $ npx tailwindcss init -p
    4. Add postcss-import: {} to postcss.config.js at the top
    5. Add mode: 'jit' and content: ["../lib/*_web/**.*ex", "./js/**/*.js"] to tailwindcss.config.js
    6. Remove phoenix.css import and add three tailwind imports in app.css
    7. Remove app.css import in app.js
    8. In dev.exs, add watcher for tailwind:
      npx: [
        cd: Path.expand("../assets", __DIR__)
  6. Setup alpine

    1. assets $ npm i alpinejs
    2. in app.js:
    import Alpine from "alpinejs";
    window.Alpine = Alpine;
  7. In mix.exs aliases

    1. add "cmd --cd assets npm install" to setup tail
    2. add "cmd --cd assets npm run deploy" to assets.deploy head
  8. In assets/package.json, add script: "deploy": "NODE_ENV=production tailwindcss --postcss --minify -i css/app.css -o ../priv/static/assets/app.css"





Phoenix is a web development framework written in Elixir which implements the server-side Model View Controller (MVC) pattern.



Base setup includes:

Regarding Ecto:

  1. Setup DB - config/config.exs (and other imports if auto-gen) and lib//repo.ex. An example for "test" sqlite3 setup:
# config/config.exs
config :test,
  ecto_repos: [Test.Repo]

config :test, Test.Repo,
  database: Path.expand("../test_dev.db", Path.dirname(__ENV__.file)),
# test/repo.ex
defmodule Test.Repo do
  use Ecto.Repo,
    otp_app: :test,
    adapter: Ecto.Adapters.SQLite3

  1. Setup Schema and Migrations

Schema is what maps data from db to elixir format, and contains changesets.

Migrations are used to create/alter tables such that they approach the state specified by schemas.

Regarding Assets:

Phoenix uses esbuild to pack css and js from assets/ dir and served from priv/static dir. Static assets are not copied over automatically!

Regarding Templates:

Be careful with variables in rendered html. If rendering from inside functions, make sure to use @variable instead of assign.variable