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

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 43487 311
New
martinthenth
Hello everybody :wave: Recently, some of my colleagues talked about database ids and uuids and their problems, and I remembered the pain...
New
josevalim
EDIT: since Ecto 3.0 final version is out, this post was amended to use the final versions in the instructions below. Hi everyone, We a...
New
restlessronin
The repo is at GitHub - cyberchitta/openai_ex: Community maintained Elixir library for OpenAI API · GitHub. Docs are at OpenaiEx User Gu...
152 10342 134
New
brainlid
LangChain is short for Language Chain. An LLM, or Large Language Model, is the “Language” part. This library makes it easier for Elixir a...
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
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
achempion
Hi, I would like to tell about my initiative to further maintain and develop Waffle project which is the fork of Arc library. The progre...
New
fuelen
Hey folks! Want to present a toolkit for writing command-line user interfaces. It provides a convenient interface for colorizing text...
New
woylie
Flop is an Elixir library that applies filtering, ordering and pagination parameters to your Ecto queries. offset-based pagination with...
New

Other popular topics Top

Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
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
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
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 records...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement