live_admin - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #rust #deep-learning #docker #java #awesome #cli #kubernetes #vue #awesome-list #mcp

live_admin

(★ 298)

Low-config admin UI for Phoenix apps, built on LiveView

File Explorer

Download Latest Version (.zip)

- - bug_report.md
- - ci.yml
  - stale.yml
- FUNDING.yml
- - alerts.css
  - app.css
  - base.css
  - buttons.css
  - cards.css
  - default_overrides.css
  - detail.css
  - embeds.css
  - errors.css
  - forms.css
  - layout.css
  - modals.css
  - sidebar.css
  - switch.css
  - tables.css
  - tabs.css
  - utilities.css
- - app.js
- esbuild.js
- package-lock.json
- package.json
- postcss.config.js
- config.exs
- - structure.sql
- create_user_form.ex
- extra.ex
- gettext.ex
- page_controller.ex
- populator.ex
- post.ex
- posts_admin_home.ex
- readme_generator.ex
- renderer.ex
- repo.ex
- user.ex
- user_admin.ex
- - app.css
  - default_overrides.css
- - app.js
- - components.ex
  - error_helpers.ex
  - gettext.ex
  - pub_sub.ex
  - resource.ex
  - router.ex
  - session.ex
  - view.ex
- application.ex
- live_admin.ex
- - router_test.exs
- - resources.ex
- live_admin_test.exs
- test_helper.exs
.credo.exs
.dockerignore
.formatter.exs
.gitignore
dev.exs
docker-compose.yml
Dockerfile
LICENSE.md
mix.exs
mix.lock
README.md
README.md.eex

# Installation Guide

1. Get the code

git clone https://github.com/tfwright/live_admin

Downloads the entire project code from GitHub to your computer.

cd live_admin

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker compose up -d --build

Builds and starts all defined containers (server, database, etc.) at once, in the background.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

cd assets

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# LiveAdmin

[![hex package](https://img.shields.io/hexpm/v/live_admin.svg)](https://hex.pm/packages/live_admin)
[![CI status](https://github.com/tfwright/live_admin/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/tfwright/live_admin/actions/workflows/ci.yml)

An admin UI for Phoenix applications built on [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view) and [Ecto](https://github.com/elixir-ecto/ecto/).

Significant features:

* First class support for multi tenant applications via [Ecto's prefix option](https://hexdocs.pm/ecto/multi-tenancy-with-query-prefixes.html#per-query-and-per-struct-prefixes)
* Persistent user "sessions"
* Overridable views, styles, and API
* Custom actions at the resource and record level, with support for dynamic inputs
* Edit (nested) embedded schemas
* Notifications via [Phoenix.PubSub](https://github.com/phoenixframework/phoenix_pubsub)
* i18n via [Gettext](https://github.com/elixir-gettext/gettext)

See for yourself, try out the [demo app](#development)

## (Required) Installation

The overriding design goal of LiveAdmin is to require as little config as possible.
Its primary intended use case is an internal tool for managing application data.
It should be useable out of the box for this purpose, although it supports significant *optional* customization.
If you are already [running LiveView](https://hexdocs.pm/phoenix_live_view/installation.html) in your application, it should only take a few minutes to expose a UI for your resources.

1. Add to your app's `deps`:

```elixir
    {:live_admin, ">= 0.0.0"}
    ```

2. Configure module(s) to act as a LiveAdmin resource:

```elixir
    defmodule MyApp.Admin.Foo do
      use LiveAdmin.Resource, schema: MyApp.Foo
    end
    ```

*Note: if your module is an Ecto schema you can omit the `schema` option.*

3. In your Phoenix router, inside a scope configured to run LiveView (`:browser` if you followed the default installation), add your resources to a LiveAdmin instance:

```elixir
    import LiveAdmin.Router

...

scope "/" do
      pipe_through :browser

live_admin "/admin" do
        admin_resource "/foos", MyApp.Admin.Foo
        # more resources
      end
    end
    ```

4. Finally, tell LiveAdmin what Ecto repo to use to run queries in your `runtime.exs`:

```
    config :live_admin, ecto_repo: MyApp.Repo
    ```

That's it, now an admin UI for `MyApp.Foo` will be available at `/admin/foos`.

## (Optional) Configuration

You may want more control over how your resources appear in the UI, or which fields are editable.
If you want to customize the behavior of one or more resources, including how records
are rendered or changes are validated, or to add custom behaviors, there are a variety of configuration options
available. This includes component overrides if you would like to completely control
every aspect of a particular resource view, like the edit form.

* `actions` - functions that operate on a specific record
* `tasks` - functions that operate on a resource as a whole
* `query_with` - function used to fetch a batch of records
* `render_with` - function used to encode field values in views
* `create_with` - function used to insert a record
* `delete_with` - function used to delete a record
* `update_with` - function used to update a record
* `validate_with` - function used to validate a changeset
* `label_with` - function used to refer to records in views
* `title_with` - function used to encode resource module names in views
* `hidden_fields` - list of fields not to show anywhere in views
* `immutable_fields` - list of fields not to be editable in forms
* `components` - override portions of the UI
* `ecto_repo` - module used to execute queries

*For more information about how to use options, see documentation for `LiveAdmin.base_configs_schema/0`.*

---

Configuration in LiveAdmin can be set at 3 different levels. From more local to more global, they are:

### Resource

The second argument passed to `use LiveAdmin.Resource` will configure only that specific resource,
in any LiveView it is used.

Extra options:

* `schema` - use to set the schema for the resource (default: calling module)

### Scope

The second argument passed to `live_admin` will configure defaults for all resources in the group (wrapped in a [Live Session](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live_session/3)) that do not already specify the same configuration.

Extra options:

* `title` - title to display in nav (default: "LiveAdmin")

### Application

App config can be used to set a global default to apply to all resources unless overridden in their individual config, or the LiveAdmin instance.

When set at the application level, resource-level keys are read at **compile time** via `Application.compile_env/2` and must be configured in `config/config.exs` (or another compile-time config file). Setting any of them in `config/runtime.exs` will cause Elixir to raise on boot due to the compile/runtime mismatch.

Compile-time keys: `components`, `query_with`, `render_with`, `delete_with`, `create_with`, `update_with`, `validate_with`, `label_with`, `title_with`, `hidden_fields`, `immutable_fields`, `actions`, `tasks`

Runtime keys:

* `ecto_repo` - module used to execute queries (Required)
* `session_store` - a module implementing the `LiveAdmin.Session.Store` behavior, used to persist session data (default: LiveAdmin.Session.Agent)
* `css_overrides` - a binary or MFA identifying a function that returns CSS to be appended to app css
* `gettext_backend` - a module implementing the [Gettext API](https://hexdocs.pm/gettext/Gettext.html#module-gettext-api) that will be used for translations

## Features

### Annotated actions and tasks with extra arguments

In addition to the record or resource, respectively, functions configured to act as actions or tasks also receive the `LiveAdmin.Session` object.
This allows them to implement varying behavior based on user-specific state (like their id or the currently selected prefix).
However, they can also support an arbitrary number of extra arguments to support user *specified* values.
LiveAdmin will prompt the user when the action or task is selected and display any function docs.

```
def MyModule
  use LiveAdmin.Resource,
    actions: [{__MODULE__, :my_action, 4}],
    # ...

@doc """
  This text will be shown to the user when running the action
  """
  def my_action(record, session, extra, extra2) do
    # do something
  end
end
```

### Multi tenancy

To enable Multi tenant support, simply implement a `prefixes/0` function in your Ecto Repo module that returns a list of prefixes.
A dropdown will be added to the top nav bar that will allow you to switch between tenants.

### Notifications

LiveAdmin broadcasts notifications about certain events and responds with UI events.

Currently supported:

* Background job progress
* Announcements with success/error states

### i18n

LiveAdmin wraps all static strings in the UI with Gettext calls, but currently it does *not* provide any locales by default.
To enable i18n, implement a `locales/0` function returning a list of binary locale names on your Gettext Backend module.

Unfortunately it is not currently possible to use Gettext's utilities to automatically extract the pot files so you will need to do this manually.
To avoid conflicts with your own app's translations, it is recommended to use a separate Gettext backend for LiveAdmin.

## Development

This repo has been configured to run the application in [Docker](https://www.docker.com/) using [Compose](https://docs.docker.com/compose/).

The Phoenix app is running the `app` service, so all mix command should be run there. Examples:

* `docker compose run app mix test`

To run the [demo app](/dev.exs):

* `docker compose up`
* Navigate your preferred browser to localhost:4000

---

README generated with [docout](https://github.com/tfwright/docout)