Flo0807

Flo0807

Backpex - a highly customizable admin panel for Phoenix LiveView applications

Hello everyone!

I am excited to share our heart project Backpex with you.

After building several Phoenix applications, we realized that we were repeating ourselves when it came to building administration panels. We were writing the same CRUD views, search and filter functionality over and over again. We wanted a tool that would allow us to quickly scaffold these views and focus on building the core functionality of our applications.

The tool we wanted had to be able to serve as a simple backend administration panel in one project, while being the core of the application in another.

We looked at existing solutions, but found that none of them offered the flexibility and customization we were looking for, especially in terms of live updates and LiveView features. We decided to develop Backpex to solve this problem and provide a highly customizable administration panel for Phoenix LiveView applications. Backpex should not only be a simple administration interface for developers, but also a good-looking UI for end users.

Even though Backpex already offers a lot of features, there is still a lot to do. We also have many ideas for future work. That’s why we are very open for contributions and appreciate any help. We have just released a public roadmap and created some issues that are open for contributions on GitHub (see “good-first-issue” label).

We really want to hear what you would like to see next and what is missing. We’d love to hear your feedback!

Hex Package: backpex | Hex

Live Demo: https://backpex.live/

Most Liked

zachdaniel

zachdaniel

Creator of Ash

they didn’t break anything. It’s free, and literally every revision is available on GH. So the thing they already gave you(for free) you still have(for free). They simply released more stuff(for free) that you don’t like when compared to the old stuff(that was free)

There is a conveniently placed “fork” button if you wish to invest the effort in maintaining a version of backpex using tw3.

With all that in mind, there is no “excuse” needed :slight_smile:

arrowsmith

arrowsmith

Okay so if anyone else is wondering how to do this, here’s what I did:

  1. copy assets/tailwind.config.js to a new file assets/tailwind.backpex.config.js.
  2. Update the new config file like so:
  content: [
    "./js/**/*.js",
    "../lib/*_web.ex",
    "../lib/*_web/**/*.*ex",
+   "../deps/backpex/**/*.*ex"
  ],
  …
  plugins: [
+   require('daisyui')
    …
  1. Add a new tailwind command in config/config.exs that compiles backpex-related CSS (including DaisyUI) to backpex.css:
 config :tailwind,
   version: "3.4.0",
   default: [
     args: ~w(
       --config=tailwind.config.js
       --input=css/app.css
       --output=../priv/static/assets/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
-  ]
+  ],
+  backpex: [
+    args: ~w(
+      --config=tailwind.backpex.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/backpex.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
  1. Add a new watcher in config/dev.exs:
 config :my_app, MyAppWeb.Endpoint,
   …
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+    tailwind_backpex: {Tailwind, :install_and_run, [:backpex, ~w(--watch)]}
   ]

Then add this line in your backpex layout so it loads the new CSS:

<link phx-track-static rel="stylesheet" href={~p"/assets/backpex.css"} />

Hope that helps someone.

Flo0807

Flo0807

Backpex v0.8 release - Starting to support Ash

We’ve just released a new version of Backpex. We have asked for feedback many times in the past, and by far the most requested feature was Ash support.

So this release lays the foundation to support multiple data sources (e.g. Ash).

With v0.8 we introduce an adapter module that sits between the UI and the data. We tried to move all current Ecto specific code into an Ecto adapter and have already started to implement an Ash adapter.

We added a new helpdesk section to our demo application that lists tickets that are retrieved from an Ash resource.

There is still some Ecto code that we need to move to the Ecto adapter. Moreover, the adapter pattern / API in Backpex is in an early alpha stage and is likely to change in the future.

In addition, the ash adapter is limited to listing and displaying items. You can’t edit items, use filters or delete items. Therefore, we recommend that you do not use the Ash adapter in production code. If you use the Ecto adapter, everything works as before.

However, we wanted to release these WIP changes as early as possible to get feedback from you and let you experiment with them. What are you looking for besides editing, filtering and deleting?

This release has some breaking changes, so make sure to read the upgrade guide. The guide also contains more information about the adapter pattern.

Release Notes: Release 0.8.0 · naymspace/backpex · GitHub

Upgrade Guide: Upgrading to v0.8 — Backpex v0.17.1

Flo0807

Flo0807

Backpex v0.11 release - removal of Alpine.js dependency

We’ve just released Backpex v0.11. This release focuses on the developer experience by removing Alpine.js as a dependency and making the installation process much easier.

So you can finally remove Alpine.js from your application if you only installed it because of Backpex :tada:

Note that you’ll now have to add our custom hooks (see the upgrade guide for more information).

Key Highlights:

  • Replace Alpine.js with JS hooks
  • Add external upload support for the upload field
  • Add after_main position to render_resource_slot/3

Make sure to read the full release notes for all changes and new features that have been added.

We’ve also continued development on the adapter pattern and fixed some bugs.

As always, thanks to all external contributors :glowing_star:

Release Notes: Release 0.11.0 · naymspace/backpex · GitHub
Upgrade Guide: Upgrading to v0.11 — Backpex v0.17.1

eileennoonan

eileennoonan

Hi @lawik, thanks for the kind words!

Up to now, yes, I haven’t been able to fully use Ash policies because the current_user aka actor isn’t present everywhere queries are being made.

I know that the Backpex folks added the assigns in more places with the 0.14 release, but I haven’t been able to dig deeply into that yet.

Some backstory on this integration - I started it so that I could use it in my own application for my web accessibility startup called Insi. Since then, I have been extremely busy with other aspects of this startup, and haven’t had the bandwidth to push ash_backpex any further than what met Insi’s immediate needs.

However, I’m going to. We can get away with limited authz for the moment because we’re only using it as an internal admin for now. The whole thing is walled off. But we will eventually want a more full-featured customer-facing admin as well as all the other Backpex bells and whistles.

My dream is to get it all hooked up with Igniter and be able to present a demo of creating a full featured AshBackpex app in like 15 minutes via the command line.

I guess I’m writing all this extra stuff to say I’m worried people think I have abandoned this - I have not! We have an #ash_backpex channel in the Ash Discord and Zach Daniel and other Ash maintainers have already been a big help!

Where Next?

Popular in Announcing Top

dimamik
Vault is a lightweight Elixir library for immutable data storage within a process subtree. Due to Elixir’s actor model nature, it’s comm...
New
mikehostetler
I’m falling in love with the Req Plugin pattern. It has limits, but when it works - it’s good. I ported over my Tesla based Fly Machines...
New
jarlah
Testcontainers Testcontainers is an Elixir library that supports ExUnit tests, providing lightweight, throwaway instances of common datab...
New
mikehostetler
LLM DB - LLM Model Metadata Package This package was extracted out of the ReqLLM project. LLM DB is a model metadata catalog with fast, ...
New
jallum
Turbopuffer - Elixir client for vector and full-text search I’m excited to share Turbopuffer, a new Elixir client library for the Turbop...
New
bentanweihao
Here’s a preview: Here’s the link to download: GenServer cheatsheet Tell me what you think!
New
munksgaard
flakify is an igniter installer that allows you to quickly get a Nix flake-based development shell up and running for your Elixir/Phoenix...
New
leandrocp
MDEx is a fast and extensible Markdown parser and formatter. Fast Leverage Rust to parse, manipulate and render documents using: comra...
New
Asd
Hi, I am happy to release the Repatch library for mocking and patching implementation in tests and anywhere else. It brings new possibili...
New
taro
I took lessons from the last discussion and cobbled together an example as a proof-of-concept. Mar demonstrates a Flask-like web dev int...
New

Other popular topics Top

Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
polypush135
As many of you may have realized by now (sorry for all the posts here) I’ve been working on a db problem where I’m trying to aggregate a ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New

We're in Beta

About us Mission Statement