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
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 ![]()
arrowsmith
Okay so if anyone else is wondering how to do this, here’s what I did:
- copy
assets/tailwind.config.jsto a new fileassets/tailwind.backpex.config.js. - Update the new config file like so:
content: [
"./js/**/*.js",
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex",
+ "../deps/backpex/**/*.*ex"
],
…
plugins: [
+ require('daisyui')
…
- Add a new tailwind command in
config/config.exsthat compiles backpex-related CSS (including DaisyUI) tobackpex.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__)
+ ]
- 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
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
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









