A modern Single-Page Application (SPA) engineered with Quasar Framework and Vue 3 designed to demonstrate how to seamlessly implement a sophisticated authentication system by leveraging SiX IDaaS & IAM.
Additionally, this web app provides reference implementations for telemetry dashboards, allowing users to monitor and interact with their hardware fleet directly by integrating the SiX IoT Platform under a unified identity context.
Tip
We highly recommend reviewing the Quick Start Documentation to understand token exchanges and authorization flows before diving into the SPA code.
Ensure your local workstation satisfies the following runtime dependencies before initializing the workspace:
- Node.js:
>= 12.22.1(Recommended: Active LTS version) - Package Manager:
npm >= 6.13.4ORyarn >= 1.21.1 - Global CLI: Quasar CLI (
npm install -g @quasar/cli) is optional but recommended for standalone terminal operations.
Clone the repository and install the project node modules:
# Using yarn
yarn install
# Using npm
npm installSpin up the local development server complete with hot-module reloading (HMR):
quasar devThe application will automatically launch in your default browser at http://localhost:8089.
To enforce strict style guides and clean formatting benchmarks across layout components:
# Run ESLint validation
yarn lint
# or: npm run lint
# Execute automated code formatting
yarn format
# or: npm run formatTo compile and optimize the application into raw, static assets for server distribution:
quasar buildThis outputs a highly optimized, production-ready distribution package directly to the dist/spa/ directory.
For deployment flexibility, a streamlined, multi-stage layout is supported. A minimal Dockerfile is provided under deploy/docker-files/Dockerfile to instantly serve the compiled production build inside a lightweight Nginx container.
To compile, containerize, and run the application locally via Docker, execute the following pipelines:
# 1. Compile the production SPA assets
quasar build
# 2. Build the local immutable container image
docker build -f ./deploy/docker-files/Dockerfile -t six-sample/iot-sample-webapp .
# 3. Spin up the containerized instance (serving traffic natively on port 8080)
docker run -it --rm -d -p 8080:80 --name six-iot-sample six-sample/iot-sample-webappNote
For customized reverse proxy setups, routing rules, or TLS terminal configurations, review the supplemental guide found in deploy/DEPLOY-SIX-IOT-Sample-Webapp.md.
The codebase maintains a standard, self-documenting directory schema:
├── src/ # Application codebase (components, pages, layouts, state stores, router)
│ ├── auth/ # Custom OIDC / Identity authentication wrappers and lifecycle events
│ └── components/ # Reusable UI structures, charts, and reactive MQTT telemetry hooks
├── public/ # Static assets, manifests, icons, and branding logos
├── deploy/ # Production Dockerfile environments and server deployment documentation
└── package.json # Build scripts, project dependencies, and environment plugins
- State Management: State reactivity and real-time frontend user context variables are safely abstracted via Pinia stores.
- Protocol Handlers: Pre-configured OIDC authentication hooks are encapsulated within
src/auth/for authorization flows. Real-time, reactive hardware control states are initialized via lightweight MQTT abstraction wrappers located insrc/components/.
Contributions, issue reports, and optimization pull requests are welcome. This repository serves primarily as an integration playground and blueprint architecture.
- License: Distributed under the Apache-2.0 License. See the accompanying LICENSE file for deep-dive legal terminology.
For technical feedback, deployment support, or customized ecosystem integrations:
- Engineering Support: stephen.yu@six-inno.cn
- Enterprise Service: service@six-inno.cn