176 lines
4.7 KiB
Markdown
176 lines
4.7 KiB
Markdown
# 🚀 Quick Start Guide
|
|
|
|
## What Was Built
|
|
|
|
A **complete Vue 3 + Vite + Tailwind rewrite** of your Neode UI that:
|
|
|
|
✅ **Recreates ALL your UI work:**
|
|
- Glassmorphism design system
|
|
- Alien-style splash screen with typing animations
|
|
- Login page with glass cards
|
|
- Onboarding flow (intro + options)
|
|
- Dashboard with glass sidebar
|
|
- Apps list with service cards
|
|
- Connection status handling
|
|
|
|
✅ **Fixes routing issues:**
|
|
- Clean Vue Router (no more disappearing components!)
|
|
- Predictable navigation
|
|
- Proper auth guards
|
|
|
|
✅ **Connects to your backend:**
|
|
- RPC client (same endpoints as Angular)
|
|
- WebSocket for real-time updates
|
|
- Pinia store (replaces PatchDB pattern)
|
|
|
|
## Start Developing
|
|
|
|
```bash
|
|
cd /Users/tx1138/Code/Neode/neode-ui
|
|
npm run dev
|
|
```
|
|
|
|
Visit: **http://localhost:8100**
|
|
|
|
## Test the App
|
|
|
|
Since you're in mock mode, you can test:
|
|
|
|
1. **Splash Screen** - Should show the alien intro on first visit
|
|
2. **Skip Button** - Click to skip the intro
|
|
3. **Onboarding** - After splash, you'll see the onboarding flow
|
|
4. **Login** - Glass card with password input
|
|
5. **Dashboard** - Glass sidebar with navigation
|
|
6. **Apps** - List view with glass cards
|
|
|
|
## Connect to Real Backend
|
|
|
|
When you're ready to connect to the actual backend:
|
|
|
|
1. **Update proxy in `vite.config.ts`** if backend isn't on port 5959
|
|
2. **Remove mock logic** - The RPC client is ready to go!
|
|
3. **Test login** - Use your actual password
|
|
|
|
## File Structure
|
|
|
|
```
|
|
neode-ui/
|
|
├── src/
|
|
│ ├── api/
|
|
│ │ ├── rpc-client.ts # RPC methods (login, packages, etc.)
|
|
│ │ └── websocket.ts # WebSocket connection & patches
|
|
│ ├── stores/
|
|
│ │ └── app.ts # Pinia store (global state)
|
|
│ ├── views/
|
|
│ │ ├── Login.vue # Login page
|
|
│ │ ├── OnboardingIntro.vue # Onboarding welcome
|
|
│ │ ├── OnboardingOptions.vue # Setup options
|
|
│ │ ├── Dashboard.vue # Main layout with sidebar
|
|
│ │ ├── Home.vue # Dashboard home
|
|
│ │ ├── Apps.vue # Apps list
|
|
│ │ └── ... # Other pages
|
|
│ ├── components/
|
|
│ │ └── SplashScreen.vue # Alien intro animation
|
|
│ ├── router/
|
|
│ │ └── index.ts # Routes & auth guard
|
|
│ ├── types/
|
|
│ │ └── api.ts # TypeScript types
|
|
│ └── style.css # Tailwind + glassmorphism
|
|
├── public/assets/img/ # Your images & logo
|
|
└── vite.config.ts # Vite config with proxy
|
|
```
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Start dev server (hot reload)
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
|
|
# Type check
|
|
npm run type-check
|
|
```
|
|
|
|
## Key Differences from Angular
|
|
|
|
| Angular | Vue 3 |
|
|
|---------|-------|
|
|
| Modules + Services | Composables + Stores |
|
|
| RxJS Observables | Reactive refs/computed |
|
|
| Ionic Components | Native HTML + Tailwind |
|
|
| Complex routing | Simple Vue Router |
|
|
| PatchDB service | Pinia store |
|
|
| Slow CLI | Fast Vite |
|
|
|
|
## Next Steps
|
|
|
|
1. **Test the UI** - Run `npm run dev` and explore
|
|
2. **Compare routing** - Notice how stable the navigation is
|
|
3. **Check glassmorphism** - Your design is intact!
|
|
4. **Connect backend** - Update vite.config.ts proxy if needed
|
|
5. **Iterate** - Add features without Angular complexity
|
|
|
|
## Why This Is Better
|
|
|
|
### Routing Fixed ✅
|
|
- No more disappearing components
|
|
- Clean navigation with Vue Router
|
|
- Predictable route guards
|
|
|
|
### Faster Development ⚡
|
|
- Vite HMR is instant (vs Angular's slow recompile)
|
|
- Simpler component structure
|
|
- Less boilerplate
|
|
|
|
### Easier to Maintain 🛠️
|
|
- Smaller bundle size
|
|
- Modern patterns (Composition API)
|
|
- Better TypeScript integration
|
|
|
|
### Same Features 🎨
|
|
- All your glassmorphism styling
|
|
- Splash screen with animations
|
|
- Login, onboarding, apps list
|
|
- WebSocket state sync
|
|
|
|
## Troubleshooting
|
|
|
|
**Server won't start?**
|
|
```bash
|
|
# Kill any process on port 8100
|
|
lsof -ti:8100 | xargs kill -9
|
|
npm run dev
|
|
```
|
|
|
|
**Assets missing?**
|
|
```bash
|
|
# Copy from Angular project
|
|
cp -r ../web/projects/shared/assets/img/* public/assets/img/
|
|
```
|
|
|
|
**Backend connection fails?**
|
|
- Check backend is running
|
|
- Update proxy in `vite.config.ts`
|
|
- Check browser console for CORS errors
|
|
|
|
**TypeScript errors?**
|
|
- Check `src/types/api.ts` matches your backend
|
|
- Run `npm run type-check`
|
|
|
|
## Success! 🎉
|
|
|
|
You now have a **modern, stable, fast** UI that's easier to work with than Angular. The routing issues are gone, development is faster, and you can iterate quickly.
|
|
|
|
**Ready to test?**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Then open http://localhost:8100 and see your beautiful glass UI in action!
|
|
|