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

ityonemo
Currently just starting out on a new mini-project - getting zig NIFs to run in elixir. https://github.com/ityonemo/zigler The idea here...
New
BartOtten
This powerful library works together with Phoenix Router to provide the ultimate routing solution. It simplifies route manipulation, givi...
New
restlessronin
The repo is at GitHub - cyberchitta/openai_ex: Community maintained Elixir library for OpenAI API. Docs are at OpenaiEx User Guide — ope...
New
New
lud
Hello! I’ve been working on the Oaskit library for a while now, and just released a first version. Since I’ve built JSV I wanted to be ...
New
lostbean
Hello Elixir community! :wave: I’m excited to announce the first release of ReqCassette, a VCR-style record-and-replay library specifica...
New
mindreframer
ElixirProto: Protobuf-Inspired Serialization for Elixir Events I wanted to have an Elixir-native serialization for events, that also supp...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
leandrocp
MDEx is a fast and extensible Markdown parser and formatter. Fast Leverage Rust to parse, manipulate and render documents using: comra...
New
mattmower
I’m pleased to announce that we’ve released DemoGen v0.1.7, a library for creating repeatable demo scenarios in your Ecto-based SaaS appl...
New

Other popular topics Top

joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
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
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New

We're in Beta

About us Mission Statement