mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
Update README.md
This commit is contained in:
Stefan Pejcic
GitHub
parent
1cdb69cb56
commit
4fb4e8bfdb
249
README.md
249
README.md
@ -22,249 +22,42 @@
|
||||
<br />
|
||||
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
[](https://github.com/refinedev/awesome-refine)
|
||||
[](https://www.bestpractices.dev/projects/8101)
|
||||
[](https://www.npmjs.com/package/@refinedev/core)
|
||||
[](https://github.com/refinedev/refine/commits/master)
|
||||
[](CODE_OF_CONDUCT.md)
|
||||
|
||||
[](https://discord.gg/refine)
|
||||
[](https://twitter.com/refine_dev)
|
||||
|
||||
<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine-3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100% open source React framework to build web apps 3x faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
[](https://refine.dev)
|
||||
|
||||
|
||||
## What is Refine?
|
||||
## What is OpenPanel
|
||||
|
||||
**Refine** is a meta **React** framework that enables the rapid✨ development of a wide range of web applications.
|
||||
**OpenPanel** offers a distinct advantage over other hosting panels by providing each user with an isolated environment and tools to fully manage it. This ensures that you enjoy full control over your environment, simillar to a VPS experience. You can effortlessly install new PHP versions, modify server configurations, view domain logs, restart services, and perform numerous other advanced tasks.
|
||||
|
||||
From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
|
||||
This panel is the culmination of years of experience in the hosting industry, having spent decades working with various hosting panels we made sure to include all features that simply make sense.
|
||||
|
||||
Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
|
||||
When we designed OpenPanel, we prioritized features that are not only user-friendly for beginners but also advanced enough to alleviate maintenance tasks for system administrators and hosting support teams.
|
||||
|
||||
**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
|
||||
Some of the unique features worth mentioning are:
|
||||
|
||||
## What do you mean by "headless" ?
|
||||
- You can [install PHP versions](/docs/panel/advanced/server_settings#install-php-version) you need, [edit php.ini files](/docs/panel/advanced/server_settings#phpini-editor) and set desired limits.
|
||||
- Control [MySQL settings](/docs/panel/advanced/server_settings#mysql-settings), set limits, [enable remote mysql access](/docs/panel/databases/remote) and much more.
|
||||
- [Update system services](/docs/panel/advanced/server_settings#service-status) and even install new services that you need.
|
||||
- Manage WordPress websites easily with [WP Manager](/docs/panel/applications/wordpress).
|
||||
- Password-less login to [phpMyAdmin](/docs/panel/databases/phpmyadmin) and [Web Terminal](/docs/panel/advanced/terminal).
|
||||
- Built-in [REDIS](/docs/panel/caching/Redis) and [Memcached](/docs/panel/caching/Memcached) object caching.
|
||||
|
||||
Instead of being limited to a set of pre-styled components, **Refine** provides collections of helper `hooks`, `components`, `providers`, and more. Since business logic and the UI are completely decoupled, you can customize the UI without constraints.
|
||||
## OpenPanel vs OpenAdmin
|
||||
|
||||
It means that **Refine** just works _seamlessly_ with any _custom designs_ or _UI frameworks_. Thanks to it's headless architecture, you can use popular CSS frameworks like [TailwindCSS](https://tailwindcss.com/) or even create your own styles from scratch.
|
||||
|
||||
Refine also provides integrations with [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) to get you started quickly. These libraries are a set of components that are nicely integrated with the headless `@refinedev/core` package.
|
||||
The **OpenAdmin* offers an administrator-level interface where you can efficiently handle tasks such as creating and managing users, setting up hosting plans, configuring backups, and editing OpenPanel settings.
|
||||
The **OpenPanel** interface is the client-level panel where end-users can manage their enviroment, edit settings, install services, create websites and more.
|
||||
|
||||
### Headless in Routing
|
||||
[](https://openpanel.co/docs/admin/intro/)
|
||||
|
||||
For the routing, Refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.
|
||||
|
||||
This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
|
||||
## What do you mean by "open" ?
|
||||
|
||||
## ⚡ Try Refine
|
||||
Open for business!
|
||||
|
||||
Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser.
|
||||
## Support
|
||||
|
||||
You have the freedom to select your preferred libraries and frameworks, and the tool generates a ready-to-download boilerplate code. This feature not only lets you preview and tweak your project on the fly but also accelerates the overall development workflow.
|
||||
Our [Community](https://community.openpanel.co/) serves as our virtual Headquater, where the community helps each other.
|
||||
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<a href="https://refine.dev/#playground" target="_blank">
|
||||
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/create-refine-project.gif" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Use cases
|
||||
|
||||
**Refine** shines on _data-intensive⚡_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, it can also power _customer-facing_ applications like **storefronts**.
|
||||
|
||||
You can take a look at some live examples that can be built using **refine** from scratch:
|
||||
|
||||
- [Fully-functional CRM Application](https://example.crm.refine.dev/)
|
||||
- [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
|
||||
- [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
|
||||
- [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
|
||||
- [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
|
||||
- [Storefront](https://s.refine.dev/readme-ssr-storefront)
|
||||
|
||||
[👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
|
||||
|
||||
[👉 More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
|
||||
|
||||
## Key Features
|
||||
|
||||
⚙️ Zero-config, **one-minute setup** with a **single CLI command**
|
||||
|
||||
🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
|
||||
|
||||
🌐 **SSR support** with **Next.js** or **Remix**
|
||||
|
||||
🔍 Auto-generated **CRUD** UIs from **your API data structure**
|
||||
|
||||
⚛ Perfect **state management** & **mutations** with **React Query**
|
||||
|
||||
🔀 **Advanced routing** with any router library of your choice
|
||||
|
||||
🔐 Providers for seamless **authentication** and **access control** flows
|
||||
|
||||
⚡ Out-of-the-box support for **live / real-time applications**
|
||||
|
||||
📄 Easy **audit logs** & **document versioning**
|
||||
|
||||
💬 Support for any **i18n** framework
|
||||
|
||||
💪 Future-proof, **robust architecture**
|
||||
|
||||
⌛️ Built-in CLI with time-saving features
|
||||
|
||||
💻 Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
|
||||
|
||||
✅ Full **test coverage**
|
||||
|
||||
## Quick Start
|
||||
|
||||
There are two ways to create a Refine app: either by using the `create refine-app` CLI tool or the [browser-based app scaffolder](https://refine.dev/#playground).
|
||||
|
||||
To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command.
|
||||
|
||||
```
|
||||
npm create refine-app@latest -- -o refine-antd
|
||||
```
|
||||
|
||||
Once the setup is complete, navigate to the project folder and start your project with:
|
||||
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
|
||||
|
||||
<a href="http://localhost:5173"></a>
|
||||
|
||||
<br/>
|
||||
|
||||
> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
|
||||
>
|
||||
> ```
|
||||
> npm create refine-app@latest
|
||||
> ```
|
||||
|
||||
Let's consume a public `fake REST API` and add two resources (_blog_posts_ and _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
|
||||
|
||||
```tsx title="src/App.tsx"
|
||||
import { Refine } from "@refinedev/core";
|
||||
import {
|
||||
notificationProvider,
|
||||
ErrorComponent,
|
||||
ThemedLayout,
|
||||
} from "@refinedev/antd";
|
||||
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
|
||||
import dataProvider from "@refinedev/simple-rest";
|
||||
|
||||
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
|
||||
|
||||
import { AntdInferencer } from "@refinedev/inferencer/antd";
|
||||
|
||||
import "@refinedev/antd/dist/reset.css";
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Refine
|
||||
routerProvider={routerProvider}
|
||||
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
|
||||
notificationProvider={notificationProvider}
|
||||
resources={[
|
||||
{
|
||||
name: "blog_posts",
|
||||
list: "/blog-posts",
|
||||
show: "/blog-posts/show/:id",
|
||||
create: "/blog-posts/create",
|
||||
edit: "/blog-posts/edit/:id",
|
||||
meta: { canDelete: true },
|
||||
},
|
||||
{
|
||||
name: "categories",
|
||||
list: "/categories",
|
||||
show: "/categories/show/:id",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<ThemedLayout>
|
||||
<Outlet />
|
||||
</ThemedLayout>
|
||||
}
|
||||
>
|
||||
<Route index element={<NavigateToResource />} />
|
||||
<Route path="blog-posts">
|
||||
<Route index element={<AntdInferencer />} />
|
||||
<Route path="show/:id" element={<AntdInferencer />} />
|
||||
<Route path="create" element={<AntdInferencer />} />
|
||||
<Route path="edit/:id" element={<AntdInferencer />} />
|
||||
</Route>
|
||||
<Route path="categories">
|
||||
<Route index element={<AntdInferencer />} />
|
||||
<Route path="show/:id" element={<AntdInferencer />} />
|
||||
</Route>
|
||||
<Route path="*" element={<ErrorComponent />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Refine>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
🚀 The [**Refine Inferencer package**](https://refine.dev/docs/packages/documentation/inferencer/) automatically generates `list`, `show`, `create`, and `edit` pages by guessing configurations from API data. We've used it here for a quick, clear start, but you can also choose to code your pages from scratch instead of using the Inferencer feature.
|
||||
|
||||
Now, you should see the output as a table populated with `blog_posts` & `category` data:
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
You can get the auto-generated page codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing them with the Inferencer components.
|
||||
|
||||
## Next Steps
|
||||
|
||||
👉 Jump to [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) to continue your work and turn the example into a full-blown CRUD application.
|
||||
|
||||
👉 Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
|
||||
|
||||
👉 Read more on [Advanced Tutorials
|
||||
](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
|
||||
|
||||
👉 See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
|
||||
|
||||
👉 Play with interactive [examples](https://refine.dev/docs/examples/).
|
||||
|
||||
## Contribution
|
||||
|
||||
[👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
|
||||
|
||||
If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
|
||||
|
||||
## Contributors ♥️
|
||||
|
||||
<a href="https://github.com/refinedev/refine/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" />
|
||||
</a>
|
||||
|
||||
## License
|
||||
|
||||
Licensed under the MIT License, Copyright © 2021-present Refinedev
|
||||
**Learn, share** and **discuss** with other community members your questions.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user