Fly.io Deploy Elixir Phoenix LiveView ~> 1.6 with Bulma and Tailwind CSS

Phoenix
1

This project is scaffold bulma and tailwind boilerplate code to project Elixir Phoenix ~> 1.6 that now uses esbuild.

Thanks to fly.io

Running

To start your Phoenix server:

  • Install dependencies with mix deps.get
  • Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Testing

Production

Ready to run in production? Please check our deployment guides.

NOW => How this project was made :smiley:

  • Creating mix phx.new phx_scaffold_bulma_tailwind --live --no-ecto
  • Install and configure dart_css.
  • Install and configure bulma.
  • Install and configure tailwind
  • Configure mix.exs
  • Configure dev.exs

Follow complete steps:

1. Creating Phoenix 1.6 LiveView project

mix phx.new phx_scaffold_bulma_tailwind --live --no-ecto

2. Install dart_css

Follow instructions here.

3. Install bulma

npm i -D --prefix assets bulma

Import bulma.sass file into css/app.scss with:

@import "../node_modules/bulma/bulma.sass";

4. Install tailwindcss

npm i -D --prefix assets tailwindcss autoprefixer postcss postcss-loader

Create file assets/tailwind.config.js with:

module.exports = {
  content: [
    "../lib/**/*.html.eex",
    "../lib/**/*.html.leex",
    "../lib/**/*.html.heex",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create file assets/postcss.config.js with:

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

Create file assets/css/tailwind.css with:

/* This file is for your main application CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import css/tailwind.css into assets/css/app.scss after css styles:

Here is last line of the file

@import "./tailwind.css";

Configure mix.exs into function aliases with:

  #     $ mix setup
  #
  # See the documentation for `Mix` for more info on aliases.
  defp aliases do
    [
      setup: ["deps.get"],
      "assets.deploy": [
         "cmd npm --prefix assets install",
        "tailwindcss --postcss --minify --input=css/tailwind.css --output=../priv/static/assets/tailwind.css",
        "esbuild default --minify",
        "sass default --no-source-map --style=compressed",
        "phx.digest"
      ]
    ]
  end

Configure dev.exs into watchers with npx instructions:

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with esbuild to bundle .js and .css sources.
config :fvideen_platform, FvideenPlatformWeb.Endpoint,
  # Binding to loopback ipv4 address prevents access from other machines.
  # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
  http: [ip: {127, 0, 0, 1}, port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "q8icUmJfcHI8LF9Ajh+WKBaIXlxER5k7Hdwu845pJO45MBjL8eg5bJ8o9cJyverv",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    npx: [
      "tailwindcss",
      "--input=css/tailwind.css",
      "--output=../priv/static/assets/tailwind.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ],
    esbuild: {
      Esbuild, 
      :install_and_run, 
      [:default, ~w(--sourcemap=inline --watch)]
    },
    sass: {
      DartSass,
      :install_and_run,
      [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]}
  ]
1 Like
2

Thank you very much for this write up Paulo! I look forward to trying it out.

1 Like