Skip to content

Latest commit

 

History

History
56 lines (37 loc) · 2.2 KB

prerequisites.md

File metadata and controls

56 lines (37 loc) · 2.2 KB

Prerequisites

Backpex integrates seamlessly with your existing Phoenix LiveView application, but there are a few prerequisites you need to meet before you can start using it.

Phoenix LiveView

Backpex is built on top of Phoenix LiveView, so you need to have Phoenix LiveView installed in your application. If you generate a new Phoenix application using the latest version of the mix phx.new generator, Phoenix LiveView is included by default.

Alpine.js

Backpex uses Alpine.js for some interactivity. Make sure you have Alpine.js installed in your application.

You can install Alpine.js by installing it via npm:

cd assets && npm install alpinejs

Then, import Alpine.js in your app.js file, start it and adjust your LiveView configuration:

import Alpine from "alpinejs";

window.Alpine = Alpine;
Alpine.start();

const liveSocket = new LiveSocket('/live', Socket, {
  // add this
  dom: {
    onBeforeElUpdated (from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    },
  },
  params: { _csrf_token: csrfToken },
})

Tailwind CSS

Backpex uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed in your application. You can install Tailwind CSS by following the official installation guide. If you generate a new Phoenix application using the latest version of the mix phx.new generator, Tailwind CSS is included by default.

daisyUI

Backpex is styled using daisyUI. Make sure you have daisyUI installed in your application. You can install daisyUI by following the official installation guide.

Ecto

Backpex currently depends on Ecto as the database layer. Make sure you have a running Ecto repository in your application.

Warning {: .warning}

Backpex requires an id field in your database schema. We tested Backpex with UUID (binary_id) and integer (bigserial) primary keys.

If you meet all these prerequisites, you are ready to install and configure Backpex in your Phoenix application. See our installation guide for more information on how to install and configure Backpex.