123 lines
2.3 KiB
Markdown
123 lines
2.3 KiB
Markdown
# Attune Web UI - Quick Start Guide
|
|
|
|
Get the Attune Web UI running in 5 minutes.
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 18+ installed
|
|
- Attune API service running (see main README)
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# 1. Install dependencies
|
|
cd web
|
|
npm install
|
|
|
|
# 2. Start development server
|
|
npm run dev
|
|
```
|
|
|
|
The UI will be available at **http://localhost:3000**
|
|
|
|
## First Login
|
|
|
|
The web UI connects to the API service at `http://localhost:8080` by default.
|
|
|
|
1. Open http://localhost:3000
|
|
2. You'll be redirected to the login page
|
|
3. Enter credentials from your Attune installation
|
|
4. After login, you'll see the dashboard
|
|
|
|
### Default Test Credentials
|
|
|
|
If using the development database with seed data:
|
|
- **Username**: `admin`
|
|
- **Password**: (depends on your setup)
|
|
|
|
## Configuration
|
|
|
|
The web UI is configured via environment variables:
|
|
|
|
```env
|
|
VITE_API_BASE_URL=http://localhost:8080 # API service URL
|
|
VITE_WS_URL=ws://localhost:8081 # WebSocket URL (future)
|
|
```
|
|
|
|
To customize, create `.env.development.local`:
|
|
|
|
```bash
|
|
cp .env.development .env.development.local
|
|
# Edit values as needed
|
|
```
|
|
|
|
## Common Tasks
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Output will be in `dist/` directory.
|
|
|
|
### Preview Production Build
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
### Generate API Client
|
|
|
|
When the API changes, regenerate the client:
|
|
|
|
```bash
|
|
npm run generate:api
|
|
```
|
|
|
|
This requires the API service to be running.
|
|
|
|
## Troubleshooting
|
|
|
|
### "Connection refused" errors
|
|
|
|
Ensure the API service is running:
|
|
|
|
```bash
|
|
cd ..
|
|
make dev # or your preferred method to start services
|
|
```
|
|
|
|
### Login fails
|
|
|
|
Check that:
|
|
1. API service is running on port 8080
|
|
2. Database is migrated
|
|
3. User exists in the database
|
|
|
|
### Build errors
|
|
|
|
Clear cache and rebuild:
|
|
|
|
```bash
|
|
rm -rf node_modules/.tmp
|
|
npm run build
|
|
```
|
|
|
|
## Development
|
|
|
|
- **Hot Reload**: Changes to files automatically reload
|
|
- **TypeScript**: Full type checking during development
|
|
- **Linting**: Run `npm run lint` to check code
|
|
|
|
## Next Steps
|
|
|
|
- Read the full [README.md](./README.md) for detailed documentation
|
|
- Review [Web UI Architecture](../docs/web-ui-architecture.md)
|
|
- Check [TODO](../work-summary/TODO.md) for planned features
|
|
|
|
## Need Help?
|
|
|
|
- Check logs in browser DevTools Console
|
|
- Review API responses in Network tab
|
|
- See [Troubleshooting](./README.md#troubleshooting) in README |