1de563203d
WHY: Novi UUID verification is async — on first iframe load the API call may not complete before the access gate renders, leaving the user stuck on Access Denied with no way to retry without manually reloading the host page. The Reload/Retry button calls location.reload() to re-trigger verification. Only shown in iframe mode where the timing race is the known failure path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
One Sky IT's Aether App - SvelteKit v2 with Svelte v5
This uses SvelteKit version 2.x with Svelte version 5.x, DexieJS 4.x, TailwindCSS 4.1, and Skeleton.
Modules
Core (/core/)
Admin-only views for foundational Aether objects. Minimal UI — primarily used for data management.
- Accounts (
/core/accounts/,/core/accounts/[account_id]/) - Activity Logs (
/core/activity_logs/) - Addresses (
/core/addresses/,/core/addresses/[address_id]/) - Contacts (
/core/contacts/,/core/contacts/[contact_id]/) - Lookups (
/core/lookups/) — Countries, subdivisions, time zones - People (
/core/people/,/core/people/[person_id]/) - Sites (
/core/sites/,/core/sites/[site_id]/) - Users (
/core/users/,/core/users/[user_id]/)
Events (/events/)
The primary client-facing module for conference and event management.
Event List (/events/)
Event Detail (/events/[event_id]/)
Each event has four sub-modules, each in its own SvelteKit route group:
Presentation Management (/(pres_mgmt)/)
Manages the full conference program.
/events/[event_id]/pres_mgmt/— Dashboard/events/[event_id]/locations/— Location list/events/[event_id]/location/[event_location_id]/— Location detail/events/[event_id]/presenter/[presenter_id]/— Presenter detail/events/[event_id]/session/[session_id]/— Session detail/events/[event_id]/reports/— Presenter, session, and file reports
Launcher (/(launcher)/)
Kiosk display system; runs on-site to show session schedules and presenter info.
/events/[event_id]/launcher/— Launcher home/events/[event_id]/launcher/[event_location_id]/— Location-specific display
Badges (/(badges)/)
Badge printing and management for event attendees.
/events/[event_id]/badges/— Badge list/events/[event_id]/badges/[badge_id]/— Badge detail/events/[event_id]/badges/[badge_id]/print— Print a single badge/events/[event_id]/badges/[badge_id]/review— Review before printing/events/[event_id]/badges/print_list/— Bulk print queue/events/[event_id]/badges/stats/— Badge statistics/events/[event_id]/templates/— Badge template management
Leads (/(leads)/)
Exhibitor lead capture via QR scan or manual entry.
/events/[event_id]/leads/— Exhibit list/events/[event_id]/leads/exhibit/[exhibit_id]/— Exhibit detail and lead capture/events/[event_id]/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/— Lead detail
Event Settings (/settings/)
/events/[event_id]/settings/— Event configuration (basic info, pres mgmt, badges, abstracts)
Journals (/journals/)
The "frontier" module — most fully-featured and used as the canonical implementation reference.
/journals/— Journal list/journals/[journal_id]/— Journal detail and entry list/journals/[journal_id]/entry/[journal_entry_id]/— Journal entry detail and editor
IDAA (/idaa/)
Custom module for the IDAA client. Built on core Aether objects (Events, Posts, Archives).
/idaa/— IDAA home / dashboard
Archives (/idaa/archives/)
/idaa/archives/— Archive list with media player/idaa/archives/[archive_id]/— Archive detail and content list
Bulletin Board (/idaa/bb/)
Built on the Posts and Post Comments objects.
/idaa/bb/— Post list/idaa/bb/[post_id]/— Post detail and comments
Recovery Meetings (/idaa/recovery_meetings/)
Built on the Events object.
/idaa/recovery_meetings/— Meeting list with search/filter/idaa/recovery_meetings/[event_id]/— Meeting detail
Video Conferences (/idaa/video_conferences/)
/idaa/video_conferences/— Video conference list (Jitsi integration)/idaa/jitsi_reports/— Jitsi usage reports
Hosted Files (/hosted_files/)
/hosted_files/— File list and upload management/hosted_files/video_util/— Video processing utility
Testing (/testing/)
Developer sandbox pages — not for production use.
/testing/ae_obj_field_editor/— V3 field editor playground/testing/data_store/— Data store V3 playground/testing/editor_test/— CodeMirror / TipTap editor tests/testing/hosted_files/— File upload tests
How to build and deploy SvelteKit:
The deployment is now fully integrated into the unified Aether Docker Environment (aether_container_env). The application is built directly from source inside a clean Docker container, ensuring consistent environment handling across staging and production.
Deployment Commands
Run these commands from the root of the aether_app_sveltekit project:
1. Deploy to Staging (Dev Workstation)
This triggers an autonomous build inside the Docker container using your .env.staging file and restarts the service.
npm run deploy:staging
2. Deploy to Production
This builds the image using production flags (using .env.prod) and restarts the production container.
npm run deploy:prod
Technical Details
- Unified Orchestration: All services (API, UI, Redis) are managed via
~/OSIT_dev/aether_container_env/docker-compose.yml. - Dockerfile: Uses a multi-stage build. Stage 1 (builder) installs dependencies and builds the app using the
BUILD_MODEargument passed from Docker Compose. Stage 2 (runtime) creates the final lightweight image. - Environment Handling:
PUBLIC_variables are baked into the image during the build step.- Private runtime variables are passed via the orchestration's
.envfile.
- Networking: The frontend communicates with the backend via the high-speed internal Docker network (
http://ae_api:5005).
Developing (Local HMR)
For the best developer experience with Hot Module Replacement (HMR), start a local development server on your host machine:
npm run dev
The local dev server will communicate with the FastAPI backend running in Docker (typically via dev-api.oneskyit.com). This gives you the speed of local Svelte development with the power of the full Aether stack.
Rebuild the node_modules directory and manually install extra Svelte packages
Run the npm update to fix the node_modules directory and package.json
npm list
npm outdated
npm update
npm outdated
npm list
Other installs?: Are both still needed? I know at least one of these is. 2024-07-23
npm install --save-dev svelte-highlight
npm install --save-dev typescript-svelte-plugin
Set up and run
Packages and dependencies
npm install --save-dev svelte-highlight typescript-svelte-plugin
npm install flowbite flowbite-svelte tailwind-merge @popperjs/core
I am slowly switching from Font-Awesome to Lucide
Tiptap Editor
- Eventually use Edra? https://edra.tsuzat.com/
- Best Rich Text Editor, made for Svelte Developers with Tiptap
- ShadEditor is "evolving" to be Edra.
- ShadCN is still stuck on Tailwind 3. Waiting to upgrade to Tailwind 4.x. Tailwind 4.x was released in late January 2025. ShadCN is still being worked on as of late March 2025.
- https://github.com/huntabyte/shadcn-svelte/issues/1643
Need to install ShadCN and Lucide for the Tiptap editor.
npm install shadcn-svelte
npm install lucide-svelte
npm install mode-watcher
Now we initialize the ShadCN and ShadEditor packages. Follow the command line instructions.
npx shadcn-svelte@next init
npx shadcn-svelte@next add dropdown-menu button tooltip input popover separator
npx shadeditor init
More packages related to the Tiptap editor???
npm install @tiptap/extension-link @tiptap/extension-bullet-list @tiptap/extension-history @tiptap/extension-typography @tiptap/extension-underline
Environment file
The application uses standard SvelteKit .env files for build-time configuration (specifically for PUBLIC_ prefixed variables).
.env.staging: Used bynpm run deploy:staging..env.prod: Used bynpm run deploy:prod..env.local: Used during local development (npm run dev).
Note: Runtime variables (like private API keys or DB credentials) are managed in the deployment directory's .env file and passed to the containers via Docker Compose.
Developing
Start a local development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Deployment (Production/Staging)
To create a production or staging version and deploy it to the local containers:
# For Staging/Dev
npm run deploy:staging
# For Production
npm run deploy:prod
These commands use the multi-stage Dockerfile to build the app in a clean environment and automatically restart the corresponding Docker containers.