DEV Community

Murphy Randle
Murphy Randle

Posted on • Originally published at mrmurphy.dev on

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

#uncategorized

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Postcss

In assets/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode

Webpack

In your config:

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

Tailwind Config 

cd assets
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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')
  ],
}
Enter fullscreen mode Exit fullscreen mode

Modify script in package.json 

"deploy": "NODE_ENV=production webpack --mode production"
Enter fullscreen mode Exit fullscreen mode

Include the CSS in the main file

in assets/css/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

Adding Alpine JS 

npm i alpinejs
Enter fullscreen mode Exit fullscreen mode

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}
})
Enter fullscreen mode Exit fullscreen mode

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}
    ]
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
fceruti profile image
fceruti •

Thanks for sharing! Super helpful 🙃