live_admin - GitLite

KO | EN

gitlite — search

#python #llm #golang #android #machine-learning #deep-learning #nodejs #java #awesome #cli #kubernetes #pytorch #security #mcp

live_admin

(★ 298)

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

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd live_admin

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

docker compose up -d --build

정의된 모든 컨테이너(서버, DB 등)를 한 번에 빌드하고 백그라운드에서 실행합니다.

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd assets

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// 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)