Phoenix (1.5) project Guide

What follows is an extremely concise list of steps I’m keeping around for reference when setting up a new Elixir / Phoenix project with Tailwind, Alpine, and user auth.

NOTE: Pretending the name of the app is “love_notes”

Generate it

mix phx.new love\_notes --live

Use UUIDs

in config/config.exs

config :love_notes, :generators, migration: true, binary_id: true, sample_binary_id: "11111111-1111-1111-1111-111111111111"

Setup Tailwind

from https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix

Install

cd assets npm install tailwindcss @tailwindcss/forms postcss autoprefixer postcss-loader@4.2 --save-dev

Postcss

In assets/postcss.config.js

module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }

Webpack

In your config:

use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader',// <-- add this 'sass-loader' ]

Tailwind Config

cd assets npx tailwindcss init

Modify the config to add purge directories, set up the jit, enable dark mode, and add the tailwind UI plugin:

module.exports = { purge: [ '../lib/**/*.ex', '../lib/**/*.leex', '../lib/**/*.eex', './js/**/*.js' ], mode: 'jit', darkMode: 'media', theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/forms') ], }

Modify script in package.json

"deploy": "NODE_ENV=production webpack --mode production"

Include the CSS in the main file

in assets/css/app.scss

@tailwind base; @tailwind components; @tailwind utilities;

If you want to use component classes

You can do it like this.

@layer components { .btn-indigo { @apply bg-indigo-700 text-white font-bold py-2 px-4 rounded; } }

Adding Alpine JS

npm i alpinejs

In app.js :

import 'alpinejs' // other stuff let liveSocket = new LiveSocket("/live", Socket, { dom: { // <- Add this 'dom' section onBeforeElUpdated(from, to){ if(from.__x){ window.Alpine.clone(from.__x, to) } } }, params: {_csrf_token: csrfToken} })

Adding Auth

Inside of mix.exs

{:jason, "~> 1.0"}, {:plug_cowboy, "~> 2.0"}, # Add the following line ???????? {:phx_gen_auth, "~> 0.6", only: [:dev], runtime: false} ]

Get deps and run the generator:

mix deps.get mix phx.gen.auth Accounts User users mix deps.get # Do this again so that the deps added by the generator get fetched.