You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Welcome! Backpex is a highly customizable administration panel for Phoenix LiveView applications. Quickly create beautiful CRUD views for your existing data using configurable *LiveResources*. Backpex integrates seamlessly with your existing Phoenix application and provides a simple way to manage your resources. It is highly customizable and can be extended with your own layouts, views, field types, filters and more.
@@ -15,28 +27,28 @@ Welcome! Backpex is a highly customizable administration panel for Phoenix LiveV
15
27
<ahref="https://backpex.live/"><strong>Visit our Live Demo →</strong></a>
16
28
</div>
17
29
18
-
## Key Features
30
+
## 🚀 Key Features
19
31
20
-
-**LiveResources**: Quickly create LiveResource modules for your database tables with fully customizable CRUD views. Bring your own layout or use our components.
21
-
-**Search and Filters**: Define searchable fields on your resources and add custom filters. Get instant results with the power of Phoenix LiveView.
22
-
-**Resource Actions**: Add your globally available custom actions (like user invitation or exports) with additional form fields to your LiveResources.
23
-
-**Authorization**: Handle authorization for all your CRUD and custom actions via simple pattern matching. Optionally integrate your own authorization library.
24
-
-**Field Types**: Many field types (e.g. Text, Number, Date, Upload) are supported out of the box. Easily create your own field type modules with custom logic.
25
-
-**Associations**: Handle HasOne, BelongsTo and HasMany(Through) associations with minimal configuration. Customize available options and rendered columns.
26
-
-**Metrics**: Easily add value metrics (like sums or averages) to your resources for a quick glance at your date. More metric types are in the making.
32
+
-📊 **LiveResources**: Quickly create LiveResource modules for your database tables with fully customizable CRUD views. Bring your own layout or use our components.
33
+
-🔍 **Search and Filters**: Define searchable fields and add custom filters for instant, LiveView-powered results.
34
+
-⚡ **Resource Actions**: Implement global custom actions like user invitations or exports, with support for additional form fields.
35
+
-🔒 **Authorization**: Handle CRUD and custom action authorization via simple pattern matching, with optional integration for external authorization libraries.
36
+
-🧩 **Field Types**: Out-of-the-box support for Text, Number, Date, Upload, and more. Easily extend with your own custom field type modules.
37
+
-🔗 **Associations**: Effortlessly handle HasOne, BelongsTo, and HasMany(Through) associations with minimal configuration. Customize available options and rendered columns.
38
+
-📈 **Metrics**: Add value metrics such as sums or averagesfor quick data insights, with more metric types on the horizon.
27
39
28
-
## Installation & Documentation
40
+
## 🛠️ Installation & Documentation
29
41
30
-
See our comprehensive [installation guide](guides/get_started/installation.md) for more information on how to install and configure Backpex in your Phoenix application.
42
+
See our comprehensive [installation guide](https://hexdocs.pm/backpex/installation.html) for more information on how to install and configure Backpex in your Phoenix application.
31
43
32
44
We also provide a detailed [documentation](https://hexdocs.pm/backpex) with guides on how to use Backpex and how to customize it to your needs.
33
45
34
-
## Learn More
46
+
## 🤔 Learn More
35
47
36
-
-[What is Backpex?](guides/about/what-is-backpex.md)
37
-
-[Why we built Backpex?](guides/about/why-we-built-backpex.md)
38
-
-[Contribute to Backpex](guides/about/contribute-to-backpex.md)
48
+
-[What is Backpex?](https://hexdocs.pm/backpex/what-is-backpex.html)
49
+
-[Why we built Backpex?](https://hexdocs.pm/backpex/what-is-backpex.html)
50
+
-[Contribute to Backpex](https://hexdocs.pm/backpex/contribute-to-backpex.html)
39
51
40
-
## License
52
+
## 📜 License
41
53
42
-
Backpex source code is licensed under the [MIT License](https://github.com/naymspace/backpex/blob/main/LICENSE.md).
54
+
Backpex is open-source software, licensed under the [MIT License](https://github.com/naymspace/backpex/blob/main/LICENSE.md).
Copy file name to clipboardexpand all lines: guides/get_started/installation.md
+56-1
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,62 @@
2
2
3
3
The following guide will help you to install Backpex in your Phoenix application. We will guide you through the installation process and show you how to create a simple resource.
4
4
5
-
Make sure you meet the [prerequisites](prerequisites.md) before you start the installation.
5
+
## Prerequisites
6
+
7
+
Backpex integrates seamlessly with your existing Phoenix LiveView application, but there are a few prerequisites you need to meet before you can start using it.
8
+
9
+
### Phoenix LiveView
10
+
11
+
Backpex is built on top of Phoenix LiveView, so you need to have Phoenix LiveView installed in your application. If you generate a new Phoenix application using the latest version of the `mix phx.new` generator, Phoenix LiveView is included by default.
12
+
13
+
### Alpine.js
14
+
15
+
Backpex uses [Alpine.js](https://alpinejs.dev/) for some interactivity. Make sure you have Alpine.js installed in your application.
16
+
17
+
You can install Alpine.js by installing it via npm:
18
+
19
+
```bash
20
+
cd assets && npm install alpinejs
21
+
```
22
+
23
+
Then, import Alpine.js in your `app.js` file, start it and adjust your LiveView configuration:
24
+
25
+
```javascript
26
+
importAlpinefrom"alpinejs";
27
+
28
+
window.Alpine= Alpine;
29
+
Alpine.start();
30
+
31
+
constliveSocket=newLiveSocket('/live', Socket, {
32
+
// add this
33
+
dom: {
34
+
onBeforeElUpdated (from, to) {
35
+
if (from._x_dataStack) {
36
+
window.Alpine.clone(from, to)
37
+
}
38
+
},
39
+
},
40
+
params: { _csrf_token: csrfToken },
41
+
})
42
+
```
43
+
44
+
### Tailwind CSS
45
+
46
+
Backpex uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed in your application. You can install Tailwind CSS by following the [official installation guide](https://tailwindcss.com/docs/installation). If you generate a new Phoenix application using the latest version of the `mix phx.new` generator, Tailwind CSS is included by default.
47
+
48
+
### daisyUI
49
+
50
+
Backpex is styled using daisyUI. Make sure you have daisyUI installed in your application. You can install daisyUI by following the [official installation guide](https://daisyui.com/docs/install/).
51
+
52
+
### Ecto
53
+
54
+
Backpex currently depends on Ecto as the database layer. Make sure you have a running Ecto repository in your application.
55
+
56
+
> #### Warning {: .warning}
57
+
>
58
+
> Backpex requires an `id` field in your database schema. We tested Backpex with UUID (binary_id) and integer (bigserial) primary keys.
59
+
60
+
If you meet all these prerequisites, you are ready to install and configure Backpex in your Phoenix application. See our [installation guide](guides/get_started/installation.md) for more information on how to install and configure Backpex.
0 commit comments