Murphy’s setup guide for a new Phoenix (1.5) project

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.

Comments

[fceruti]

Thanks for sharing! Super helpful 🙃