54 lines
1.5 KiB
Markdown
54 lines
1.5 KiB
Markdown
# Quickstart: Fix UI Styling, WebSocket Port Mismatch, and URL Validation
|
|
|
|
## Development Setup
|
|
|
|
1. **Frontend Styling**:
|
|
- Ensure Tailwind CSS is initialized: `cd frontend && npm install`
|
|
- Verify `frontend/src/app.css` contains:
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
```
|
|
- Import in `frontend/src/routes/+layout.svelte`:
|
|
```svelte
|
|
<script>
|
|
import '../app.css';
|
|
</script>
|
|
```
|
|
|
|
2. **WebSocket Configuration**:
|
|
- Create/Update `.env` in `frontend/`:
|
|
```env
|
|
PUBLIC_WS_URL=ws://localhost:8000
|
|
```
|
|
- Use in Svelte components:
|
|
```javascript
|
|
import { PUBLIC_WS_URL } from '$env/static/public';
|
|
const wsUrl = PUBLIC_WS_URL || `ws://${window.location.hostname}:8000`;
|
|
```
|
|
|
|
3. **Backend URL Validation**:
|
|
- Update `superset_tool/models.py` (or relevant model file):
|
|
```python
|
|
from pydantic import validator
|
|
|
|
class ServiceConnection(BaseModel):
|
|
base_url: str
|
|
|
|
@validator('base_url')
|
|
def normalize_url(cls, v):
|
|
if not v.endswith('/api/v1'):
|
|
return f"{v.rstrip('/')}/api/v1"
|
|
return v
|
|
```
|
|
|
|
## Verification Steps
|
|
|
|
1. Run backend: `cd backend && uvicorn src.app:app --reload`
|
|
2. Run frontend: `cd frontend && npm run dev`
|
|
3. Open browser and verify:
|
|
- UI is styled (Tailwind classes working).
|
|
- Logs appear in real-time (WebSocket connected).
|
|
- External service connection accepts base URLs.
|