Installation

Set up Fluxon in your project.

Prerequisites

Before installing Fluxon, ensure you have the following prerequisites:

Phoenix

v1.7 or later

LiveView

v0.20 or later

Tailwind CSS

v3.4 or later

Setting up your project

  1. Add the Hex Repository

    Fluxon is available as a Hex package. Follow these steps to integrate it into your Phoenix project:

    1. Obtain the FLUXON_KEY_FINGERPRINT and FLUXON_LICENSE_KEY from your account dashboard.

    2. Add the repository using the following command:

      sh terminal
      mix hex.repo add fluxon https://repo.fluxonui.com \
        --fetch-public-key $FLUXON_KEY_FINGERPRINT \
        --auth-key $FLUXON_LICENSE_KEY
      
  2. Install Fluxon

    Once the repository is added, add Fluxon to your project dependencies:

    ex mix.exs
    {:fluxon, "~> 1.0.0", repo: :fluxon}
    

    Run mix deps.get to install the package.

  3. Configure Your Project

    Several files need to be updated to fully integrate Fluxon into your project:

    1. Update the lib/[app_name]_web.ex file to include the Fluxon module.

      ex [app_name]_web.ex
      defp html_helpers do
        quote do
          import Phoenix.HTML
      
          use Fluxon
      
          # ...
        end
      end
      
    2. Modify the assets/package.json file to include the Fluxon JS package. If the file doesn't exist, create it.

      {} package.json
      {
        "dependencies": {
          "fluxon": "file:../deps/fluxon"
        }
      }
      
    3. Update assets/tailwind.config.js to allow TailwindCSS to process the Fluxon component classes.

      js tailwind.config.js
      module.exports = {
        content: [
          '../deps/fluxon/**/*.*ex',
          "./js/**/*.js",
          // ...
        ],
        // ...
      }
      
    4. Update the assets/js/app.js file to include the Fluxon hooks and the onBeforeElUpdated function.

      js app.js
      import { Hooks as FluxonHooks, DOM as FluxonDOM } from 'fluxon';
      
      let liveSocket = new LiveSocket("/live", Socket, {
        hooks: {...Hooks, ...FluxonHooks},
        dom: {
          onBeforeElUpdated(from, to) {
            FluxonDOM.onBeforeElUpdated(from, to);
          },
        },
      });