Awesome
Meilisearch-UI
ENGLISH ο½ δΈζ
<a href="https://github.com/riccox/meilisearch-ui/actions"></a> <a href="https://github.com/riccox/meilisearch-ui/releases"></a> <a href="https://github.com/riccox/meilisearch-ui/issues"></a> <a href="https://hub.docker.com/r/riccoxie/meilisearch-ui/tags" target="_blank"></a> <a href="https://hub.docker.com/r/riccoxie/meilisearch-ui" target="_blank"></a> <a href="https://github.com/riccox/meilisearch-ui/blob/main/LICENSE"></a>
<a href="https://www.producthunt.com/posts/meilisearch-ui?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-meilisearch-ui" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=373175&theme=light" alt="Meilisearch-UI - Pretty, simple and fast meilisearch admin dashboard | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
An open-source, pretty, simple and fast meilisearch admin dashboard UI for managing your meilisearch instances
[!IMPORTANT] The main branch may be unstable or unavailable during development. Please use release instead of main branch to obtain a stable version app
Features
π Indexes CRUD
π Search documents
πͺ Documents management
π οΈοΈ Index settings
β Multiple instances management
π Data is stored inside your browser
π¦ Docker image support
π± Singleton mode support (easy to integrate with your own apps)
π I18n support (en, zh)
Quick start
[!WARNING] This app have not achieved responsive design totally, so mind that only use this app on desktop to gain better experience.
CORS settings
β Remember update CORS settings in your instance server for this ui domain before using.
Because this app use meilisearch official JS client to call your meilisearch instance, you need to manually configure CORS settings in your web server to make sure ui panel can access your instance server with api calls.
Add your ui panel deployment domain to your instance server cors list.
ex:
# ... other configurations
add_header Access-Control-Allow-Origin "your.meilisearch-ui.domain.com";
# ... other configurations
Learn how to configure CORS settings in your web server
Online use
There is a live demo π meilisearch-ui, deploy on Vercel.
Docker
docker pull riccoxie/meilisearch-ui:latest
docker run -d --restart=always --name="meilisearch-ui" -p <your-port>:24900 riccoxie/meilisearch-ui:latest
Deploy on Vercel
You can deploy this app to the cloud with Vercel
Just one click the button below to deploy this app automatically
Configures
Base Path
See this issue.
You can configure the base path of this app by setting the BASE_PATH
environment variable.
For example, if you want to deploy this app to the /meilisearch-ui
path, you can set the BASE_PATH
environment variable to /meilisearch-ui
.
docker run -d --restart=always --name="meilisearch-ui" -p <your-port>:24900 -e BASE_PATH="/meilisearch-ui" riccoxie/meilisearch-ui:latest
Singleton mode
See this issue.
If you want to use this app with only one meilisearch instance, you can enable the singleton mode by below steps.
Clone this repo
git clone git@github.com:riccox/meilisearch-ui.git --depth=1
Go into root dir of repo
cd meilisearch-ui
install dependencies
pnpm install
create .env.local
file at root dir of repo, input following config codes below
VITE_SINGLETON_MODE=true
VITE_SINGLETON_HOST=your-meilisearch-host
VITE_SINGLETON_API_KEY=your-api-key
[!CAUTION] Security Risk
See this issue.
.env.local
file is local only and you should add it in your.gitignore
to prevent them from being recorded by git.At the same time, any variables exposed in this way will eventually appear in the client package, so you should try to avoid using this method. When using singleton mode packaging, you need to carefully judge the network environment in which you deploy the application, and it is recommended to deploy in a trusted internal network environment.
VITE_SINGLETON_MODE
tell this app to enable singleton mode.VITE_SINGLETON_HOST
is the meilisearch host url.VITE_SINGLETON_API_KEY
is the meilisearch master key.
Next, build the singleton app.
pnpm build
Once the build is complete, you will find the dist
directory in the root directory, which is a packaged SPA application directory that can be deployed to any server.
Then you will directly jump to the instance page when you open this app.
Development
[!NOTE] Install pnpm first.
git clone git@github.com:riccox/meilisearch-ui.git
cd meilisearch-ui
pnpm install
pnpm dev
Built with β₯
- Meilisearch
- Tanstack
- React v18
- Arco design
- Semi UI
- Mantine UI
- Next UI
- Radix UI
- Tabler Icon
- Lucide Icon
- Monaco Editor for react
- TypeScript
- Vite
- Zustand
- TailwindCSS
- React Error Boundary
- Prettier
- Fuse.js
- Echarts
- Lodash.js
- Immer
- Ahooks
- Framer motion
- react-json-view
- Dayjs
- I18Next
- UnoCSS
- qs
- Sonner
- Vaul
- Zod