Installation

This guide will help you set up and start using the backoffice system built with Phoenix LiveView.

Step 1: Add the Dependency to Your Project

Open your Phoenix project and locate the mix.exs file. This file contains project configuration including dependencies.

Add the package to the deps function in your mix.exs file. You should specify the package name and the desired version. Here is an example of adding the moon-backoffice package:

defp deps do
  [
    {:phoenix, "~> 1.5.7"},
    {:phoenix_live_view, "~> 0.15.0"},
    {:phoenix_html, "~> 2.14"},
    # Add moon_live dependency here
    {:moon_live, "~> 2.2.0", organization: "coingaming"},
    # Add moon_backoffice dependency here
    {:moon_backoffice, "~> 0.12.2", organization: "coingaming"}
  ]
end

Step 2: Fetch and Compile the Dependency

After adding the dependency, open a terminal, navigate to your project directory, and run the following command:

mix deps.get

This command fetches the new dependencies you added and compiles them.

You'll need to ensure you have access to necessary Elixir packages from Hex.pm and have access to coingaming organization there.

Troubleshooting

Error: telemetry_metrics ~> 0.6 is required

Because your app depends on hexpm:coingaming/moon_backoffice ~> 0.9.0
which depends on telemetry_metrics ~> 0.6, telemetry_metrics ~> 0.6 is required.

So, because your app depends on telemetry_metrics ~> 1.0, version solving failed

Update telemetry_metrics dependency version to 0.6.

mix.exs

defp deps do
  [
    ...
    # Update telemetry_metrics dependency version here
     {:telemetry_metrics, "~> 0.6"},
  ]
end

Step 3: Adding Tailwind preset

Add the preset into assets/tailwind.config.js file

assets/tailwind.config.js

const moonPreset = require('../deps/moon_live/assets/ds-moon-preset')

module.exports = {
  content: [
    // ... your existing content ...
    './js/**/*.js',
    // ... and add presets ...
    '../deps/moon_backoffice/**/*.*ex',
    '../deps/moon_live/**/*.*ex',
    '../deps/moon_live/**/*.js',
  ],
  presets: [moonPreset],
}

See the Tailwind configuration guide for advanced usage

Step 4: Add static plug

Add a static plug to endpoint.ex file to serve static moon icons.

endpoint.ex

plug Plug.Static,
    at: "/moon_assets/",
    from: :moon_assets,
    gzip: true

Step 5: Adding theme

To customize the styling of your application, you should modify the assets/css/app.css file. This file contains the main CSS for your project.

assets/css/app.css

/* This file is for your main application CSS */
@import '../../deps/moon_live/assets/themes/moon.css';

Step 6: Applying the Theme

To apply a theme to your application, you need to modify the root.html.heex

root.html.heex

/* This file is for your main application CSS */
<html lang="en" class="theme-moon-light">
  ...
</html>

Additional resources

Here are a few links that might be handy as you venture further:

Was this page helpful?