dtoro
b3c2c6711f
- Implemented a help system for different node types (config, render, variable, function) with detailed usage instructions. - Created a node registry to manage node types, including registration, retrieval, and validation of connections between nodes. - Defined central node and edge types for the application to streamline state management. - Added Nunjucks autocomplete functionality to enhance user experience in template editing. - Developed a syntax highlighting parser for PlantUML and Nunjucks within the CodeMirror editor. - Registered built-in node types at application startup, including their default configurations and help entries. - Introduced a theme context provider to manage light/dark mode preferences across the application. - Created utility functions for class name management using clsx and tailwind-merge. - Set up Tailwind CSS for styling with custom themes and responsive design. - Configured Vite for development with proxy settings for backend API calls and Kroki diagram service.
100 lines
3.0 KiB
Markdown
100 lines
3.0 KiB
Markdown
# Zui
|
||
|
||
Node-based editor (React Flow) for configs, variables, and rendering (PlantUML, Markdown, etc.). Optional Node.js backend API for demos or future features (e.g. todos CRUD).
|
||
|
||
## Project layout
|
||
|
||
```
|
||
my-app/
|
||
├── frontend/ # React app (Vite, TypeScript)
|
||
│ ├── Dockerfile # Multi-stage for prod (build → Nginx)
|
||
│ ├── Dockerfile.dev # Dev with hot reload
|
||
│ ├── src/
|
||
│ ├── public/
|
||
│ ├── nginx.conf
|
||
│ └── package.json
|
||
├── backend/ # Node.js/Express API
|
||
│ ├── Dockerfile
|
||
│ ├── src/
|
||
│ │ └── index.js
|
||
│ └── package.json
|
||
├── docker-compose.yml
|
||
├── .dockerignore
|
||
└── .gitignore
|
||
```
|
||
|
||
Ignored by git: `node_modules`, `dist`, `.env`, `.env.*` (see [.gitignore](.gitignore)). Local Docker overrides: `docker-compose.override.yml` (optional, not committed).
|
||
|
||
---
|
||
|
||
## Run locally (dev)
|
||
|
||
**Frontend only:**
|
||
|
||
```bash
|
||
cd frontend && npm install && npm run dev
|
||
# → http://localhost:3000
|
||
```
|
||
|
||
**Frontend + backend** (so the app can show “Backend API: N todos”):
|
||
|
||
```bash
|
||
# Terminal 1 – backend
|
||
cd backend && npm install && npm run dev
|
||
# → http://localhost:8080
|
||
|
||
# Terminal 2 – frontend
|
||
cd frontend && npm install && npm run dev
|
||
# → http://localhost:3000 (Vite proxies /api/todos to backend)
|
||
```
|
||
|
||
---
|
||
|
||
## Run with Docker
|
||
|
||
```bash
|
||
docker compose up --build
|
||
```
|
||
|
||
- **Frontend**: http://localhost:3000 (Nginx; `/api/*` proxied to backend).
|
||
- **Backend**: http://localhost:8080 (Express).
|
||
|
||
Environment variables (backend service):
|
||
|
||
| Variable | Default | Description |
|
||
|-------------|----------------------------|-------------|
|
||
| `PORT` | `8080` | Backend listen port. |
|
||
| `CORS_ORIGIN` | `http://localhost:3000` | Allowed origin for CORS. |
|
||
|
||
For self-hosting (e.g. Tailscale/HTTPS): set `CORS_ORIGIN` to your frontend URL; put Caddy or Nginx in front for TLS if needed.
|
||
|
||
**Dev with Docker (frontend hot reload):** use `frontend/Dockerfile.dev` and mount `./frontend` as a volume, or run `cd frontend && npm run dev` locally.
|
||
|
||
---
|
||
|
||
## Scripts
|
||
|
||
| Command | Description |
|
||
|--------|-------------|
|
||
| `cd frontend && npm run dev` | Vite dev server. |
|
||
| `cd frontend && npm run build` | Build frontend for production. |
|
||
| `cd frontend && npm run preview` | Preview production build. |
|
||
| `cd backend && npm run dev` | Backend with `--watch`. |
|
||
| `cd backend && npm start` | Backend production run. |
|
||
| `docker compose up --build` | Run frontend + backend in Docker. |
|
||
|
||
---
|
||
|
||
## Backend API (no DB)
|
||
|
||
| Method | Path | Description |
|
||
|--------|------|-------------|
|
||
| GET | `/api/todos` | List all todos. |
|
||
| GET | `/api/todos/:id` | Get one todo. |
|
||
| POST | `/api/todos` | Create (`{ "title": "...", "completed": false }`). |
|
||
| PUT | `/api/todos/:id` | Update. |
|
||
| DELETE | `/api/todos/:id` | Delete. |
|
||
| GET | `/health` | Health check (e.g. for Docker). |
|
||
|
||
Data is in-memory (resets on restart). Add a JSON file or DB later if needed.
|