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/

https://github.com/naymspace/backpex

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.18.3

Where Next?

Popular in Announcing Top

tmbb
PhoenixWS - Websockets over Phoenix Channels Source code on Github here: GitHub - tmbb/phoenix_ws: Websockets implemented over Phoenix Ch...
New
mspanc
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
New
mtrudel
Bandit is an HTTP server for Plug and WebSock apps. Bandit is written entirely in Elixir and is built atop Thousand Island. It can serve...
New
Eiji
ExApi is a library that I’m developing now and hope release soon This library will allow to: list all apis list all api implementation...
New
wojtekmach
Hey everyone! Req is an HTTP client for Elixir that I’ve been working on for quite some time. There is already a lot of HTTP clients out...
New
Azolo
Hey everyone, I just released WebSockex which is a Elixir WebSocket client. WebSockex strives to work as a OTP special process, be RFC6...
New
Flo0807
Hello everyone! I am excited to share our heart project Backpex with you. After building several Phoenix applications, we realized that...
New
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
handnot2
Samly can be used to enable SAML 2.0 Single Sign On in a Plug/Phoenix application. This library uses Erlang esaml to provide plug enabl...
New
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement