Restructure repository into workspace with separated backend and frontend #68
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Copy latest upstream/main src/ contents to src/backend/src/ - Rename vue/ to src/ui/ (previously src/frontend/) - Update Dockerfile to reference src/ui paths - Update build scripts for new structure - Maintain workspace structure for future Crux integration Signed-off-by: Jan Zachmann <[email protected]>
JanZachmann
force-pushed
the
refactor-repo-structure
branch
from
88dfcb4 to
9332652
Compare
JanZachmann
changed the title
JanZachmann
changed the title
ronny-standtke
approved these changes
Nov 25, 2025
Member
ronny-standtke
left a comment
ronny-standtke
left a comment
There was a problem hiding this comment.
Summary does not match actual changes, but changes lgtm.
JanZachmann
added a commit
that referenced
this pull request
Nov 28, 2025
## Summary This PR introduces the Crux Core/Shell architecture infrastructure to omnect-ui, providing the foundation for separating business logic (Core) from platform-specific UI code (Shell). The refactor builds on top of the workspace restructuring from #68. **Learn more about Crux:** - [Crux Documentation](https://redbadger.github.io/crux/) - [Crux GitHub Repository](https://github.com/redbadger/crux) - [Crux Architecture Guide](https://redbadger.github.io/crux/guide.html) ### Key Changes **Crux Core Architecture (`src/app/`)** - New Cargo package `omnect-ui-core` with platform-agnostic business logic framework - Domain-based module organization: `auth`, `device`, `websocket`, `ui` - Custom Centrifugo capability with Command API for WebSocket management - HTTP capability migrated to Command API pattern - WASM compilation target for web integration - See [src/app/README.md](../tree/refactor-frontend-to-use-crux/src/app/README.md) for architecture details **TypeScript Integration (`src/shared_types/`)** - TypeGen-based type generation from Rust to TypeScript - Automatic bincode serialization/deserialization bindings - Type-safe communication between Core and Shell **Frontend Shell (`src/ui/`)** - Vue 3 composable (`useCore.ts`) bridging WASM Core and UI - Effect handlers for HTTP requests and Centrifugo WebSocket - Migrated `DeviceInfo` component to use Core (`DeviceInfoCore.vue`) - Frontend assets embedded in backend binary via `static-files` crate **Backend Updates (`src/backend/`)** - Frontend assets embedded in binary (no separate static file serving) - Improved build script with WASM compilation stage - New `setup-password` utility binary for development - CLI tool for creating/updating password files during local development - Integrated with VS Code launch tasks for automated setup - Usage: `cargo run --bin setup-password --features=mock -- <password>` **Build & Deployment** - Consolidated build scripts with multi-architecture support - Docker workflow improvements with WASM build stage - Enhanced deployment script with registry push capabilities ## Architecture Notes The Crux pattern separates concerns into three layers: 1. **Core** (Rust, compiled to WASM): All business logic, state management, type definitions 2. **Shell** (Vue 3 TypeScript): UI rendering and effect execution (HTTP, WebSocket) 3. **Communication**: Events (Shell → Core), Effects (Core → Shell), ViewModel (Core → Shell) **Benefits:** - Platform-agnostic business logic testable without UI - Type-safe frontend with auto-generated TypeScript bindings - Clear separation of concerns between logic and presentation - Potential for future multi-platform support (native apps, CLI, etc.) **Event Flow:** 1. User action in Vue component 2. Component calls `sendEvent()` or convenience method (e.g., `login()`) 3. Event is serialized (bincode) and sent to WASM Core 4. Core processes event, updates Model, returns Effects 5. Shell processes Effects (HTTP request, render update, WebSocket subscription) 6. ViewModel is updated and Vue reactively re-renders ## Current Status ### What This PR Delivers ✅ **Complete Crux Core Infrastructure:** - Working WASM compilation pipeline with wasm-pack - TypeScript type generation from Rust types - HTTP and Centrifugo capabilities with Command API - Domain-based module organization (auth, device, websocket, ui) - Effect processing in Vue shell (HTTP, WebSocket, render) ✅ **Component Migration:** - `DeviceInfo` successfully migrated to Core architecture - Demonstrates full Core/Shell pattern with real functionality - `useCore()` composable for easy Core integration ✅ **Build Pipeline:** - Docker multi-stage build with WASM compilation - Frontend assets embedded in backend binary - Multi-architecture support (amd64, arm64) ✅ **Developer Experience:** - `setup-password` CLI utility for local development - VS Code tasks for automated pre-launch setup - Improved build scripts and documentation ### Future Work (Separate PRs)⚠️ **5 Vue components still use direct API calls** and need migration to use the Core. See detailed migration plan in [src/app/README.md](../tree/refactor-frontend-to-use-crux/src/app/README.md#vue-component-migration-future-prs). **Components to Migrate (5 remaining):** 1. `DeviceActions.vue` - Reboot and factory reset actions 2. `DeviceNetworks.vue` - Network list and status 3. `NetworkSettings.vue` - Network configuration 4. `UpdateFileUpload.vue` - Firmware update upload 5. `UserMenu.vue` - User authentication actions **Additional Tasks:** - Remove `useCentrifuge` composable once all components migrated - Comprehensive integration testing - Performance optimization and bundle size analysis This PR establishes the architectural foundation and demonstrates successful component migration. Remaining component migrations will proceed incrementally in follow-up PRs for easier review and testing. --------- Signed-off-by: Jan Zachmann <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
src/backend/vue/tosrc/ui/src/backend/static/todist/biome.json(frontend has its own)Purpose
This prepares the codebase for future Crux framework integration by establishing a clean workspace structure with properly separated concerns.