From 95956fccd86f47b1105cf91f3dd3c7b8a48437c0 Mon Sep 17 00:00:00 2001 From: Nathan SOULIER Date: Thu, 20 Mar 2025 10:15:10 +0100 Subject: [PATCH] First commit --- .env.example | 4 ++ .gitignore | 30 ++++++++++++ .npmrc | 1 + .vscode/extensions.json | 3 ++ LICENSE | 9 ++++ README.md | 73 ++++++++++++++++++++++++++++ env.d.ts | 14 ++++++ index.html | 13 +++++ package.json | 33 +++++++++++++ public/favicon.ico | Bin 0 -> 4286 bytes src/App.vue | 3 ++ src/keycloak/index.ts | 20 ++++++++ src/main.ts | 7 +++ src/router/index.ts | 15 ++++++ src/services/index.ts | 72 +++++++++++++++++++++++++++ src/views/Home.vue | 105 ++++++++++++++++++++++++++++++++++++++++ tsconfig.app.json | 12 +++++ tsconfig.json | 11 +++++ tsconfig.node.json | 19 ++++++++ vite.config.ts | 18 +++++++ 20 files changed, 462 insertions(+) create mode 100644 .env.example create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 .vscode/extensions.json create mode 100644 LICENSE create mode 100644 README.md create mode 100644 env.d.ts create mode 100644 index.html create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 src/App.vue create mode 100644 src/keycloak/index.ts create mode 100644 src/main.ts create mode 100644 src/router/index.ts create mode 100644 src/services/index.ts create mode 100644 src/views/Home.vue create mode 100644 tsconfig.app.json create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..b67d1be --- /dev/null +++ b/.env.example @@ -0,0 +1,4 @@ +VITE_KEYCLOAK_URL="https://auth.reflex-platform.com/auth" +VITE_KEYCLOAK_REALM="reflex-platform" +VITE_KEYCLOAK_CLIENT_ID="your_client_id" +VITE_RP_GRPC_CORE_HOST="https://grpc.core.reflex-platform.com:443" \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8ee54e8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..c3ca6f3 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +@reflex-platform:registry=https://git.reflex-platform.com/api/packages/reflex-platform/npm/ \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..a7cea0b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9354643 --- /dev/null +++ b/LICENSE @@ -0,0 +1,9 @@ +MIT License + +Copyright (c) 2024 reflex-platform + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..73ccfb1 --- /dev/null +++ b/README.md @@ -0,0 +1,73 @@ +# Example App: Integrating with Reflex Platform + +## Purpose + +This repository contains an example Vue application demonstrating how to integrate with the Reflex Platform, a powerful tool developed by Hardis Group. This example app showcases how to leverage the Reflex Platform's APIs to build custom integrations and extend the capabilities of your warehouse management system using modern web technologies. It makes use of the [Reflex Platform NPM SDK](https://git.reflex-platform.com/reflex-platform/npm-core-sdk) to demonstrate how to fetch data, and perform key operations within the Reflex Platform ecosystem. + +Whether you're a developer looking to understand how to interact with Reflex Platform's services or a business seeking to evaluate the integration potential, this example app provides a hands-on starting point. + +## Features + +- Demonstrates basic integration with Reflex Platform APIs +- Illustrates authentication flows and API request patterns +- Built with Vue 3 and Vite for modern web development +- Serves as a template for building more complex integrations + +## Getting Started + +To get started with this example Vue application, follow the steps below: + +### 1. Clone the Repository + +First, clone this repository to your local machine: + +```bash +git clone https://git.reflex-platform.com/reflex-platform/vue-rp-example.git +cd vue-rp-example +``` + +### 2. Obtain a Reflex Platform Client ID + +This example app requires a Reflex Platform client ID for authentication purposes. To obtain this, you need to get in contact with a Hardis representative. The representative will provide you with a unique `VITE_KEYCLOAK_CLIENT_ID` that you'll use to authenticate API requests. + +### 3. Configure the Application + +Once you have your `VITE_KEYCLOAK_CLIENT_ID`, you'll need to replace the placeholder value in the application with your actual client ID. + +1. Create a .env file in the project root (use `.env.example` as a template) +2. Locate the line that defines `VITE_KEYCLOAK_CLIENT_ID`: + +```dart +VITE_KEYCLOAK_CLIENT_ID='your_client_id_here'; +``` + +3. Replace `'your_client_id_here'` with the client ID you received from Hardis. + +### 3. Run the Application + +With the configuration in place, you can now run the Vue application. Use the following commands: + +1. Ensure you have all the necessary dependencies installed: + +```bash +npm install +``` + +2. Run the application on your preferred device or emulator + +```bash +npm run dev +``` + +### 4. Explore and Extend + +Once the application is running, explore the provided features and examine the code to understand how the integration with Reflex Platform works. You can use this example as a foundation to build more complex and tailored integrations for your specific use case. + +## Requirements + +* Node.js 18+ +* npm 9+ +* Modern web browser (Chrome, Firefox, Edge) + +## License +Distributed under the MIT [License](LICENSE). See `LICENSE` for more information. \ No newline at end of file diff --git a/env.d.ts b/env.d.ts new file mode 100644 index 0000000..b849389 --- /dev/null +++ b/env.d.ts @@ -0,0 +1,14 @@ +/// + + +interface ImportMetaEnv { + readonly RP_GRPC_CORE_HOST: string + readonly KEYCLOAK_URL: string + readonly KEYCLOAK_REALM: string + readonly KEYCLOAL_CLIENT_ID: string + } + + interface ImportMeta { + readonly env: ImportMetaEnv + } + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2e51d66 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + RP Example Vite App + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..d011947 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "vue-rp-example", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build" + }, + "dependencies": { + "@protobuf-ts/grpcweb-transport": "^2.9.5", + "@protobuf-ts/runtime": "^2.9.5", + "@reflex-platform/npm-core-sdk": "^1.10.0", + "@reflex-platform/npm-viz-sdk": "^1.10.0", + "keycloak-js": "^26.1.4", + "vue": "^3.5.13", + "vue-router": "^4.5.0" + }, + "devDependencies": { + "@tsconfig/node22": "^22.0.0", + "@types/node": "^22.13.9", + "@vitejs/plugin-vue": "^5.2.1", + "@vue/tsconfig": "^0.7.0", + "npm-run-all2": "^7.0.2", + "typescript": "~5.8.0", + "vite": "^6.2.1", + "vite-plugin-vue-devtools": "^7.7.2", + "vue-tsc": "^2.2.8" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 GIT binary patch literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S literal 0 HcmV?d00001 diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..2785996 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,3 @@ + diff --git a/src/keycloak/index.ts b/src/keycloak/index.ts new file mode 100644 index 0000000..a0af2e0 --- /dev/null +++ b/src/keycloak/index.ts @@ -0,0 +1,20 @@ +import Keycloak, {type KeycloakInitOptions} from 'keycloak-js'; + +export const keycloak = new Keycloak({ + url: import.meta.env.VITE_KEYCLOAK_URL, + realm: import.meta.env.VITE_KEYCLOAK_REALM, + clientId :import.meta.env.VITE_KEYCLOAK_CLIENT_ID, +}); + +export async function initKeycloak() { + try { + const options: KeycloakInitOptions = { + checkLoginIframe: false, + scope: 'openid profile email groups', + onLoad: 'login-required' + }; + await keycloak.init(options); + } catch (error) { + console.error('Failed to initialize adapter:', error); + } +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..ebb5286 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,7 @@ +import { createApp } from 'vue' +import App from './App.vue' +import { initKeycloak, keycloak } from './keycloak'; +import router from './router' + +await initKeycloak() +createApp(App).use(router).mount('#app') \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..81002da --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,15 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/Home.vue' + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + name: 'home', + component: HomeView, + }, + ], +}) + +export default router diff --git a/src/services/index.ts b/src/services/index.ts new file mode 100644 index 0000000..374d99c --- /dev/null +++ b/src/services/index.ts @@ -0,0 +1,72 @@ +import { keycloak } from '@/keycloak'; +import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport' +import { type RpcOptions, type RpcTransport, type RpcInterceptor, mergeRpcOptions, UnaryCall } from "@protobuf-ts/runtime-rpc"; +import { ProjectServiceClient } from '@reflex-platform/npm-core-sdk'; +import { MotdServiceClient } from '@reflex-platform/npm-viz-sdk'; + +const APISettings = { + get token() { + if (!keycloak.token) { + // Logic to refresh token + keycloak.updateToken(30).then(() => { + return keycloak.token; + }).catch(() => { + console.error("Failed to refresh token"); + return ""; + }); + } + return keycloak.token; + } +}; + +// Interceptor example +const exampleInterceptor : RpcInterceptor = { + interceptUnary(next, method, input, options: RpcOptions): UnaryCall { + console.log("I'm intercepting before!") + const unaryCall = next(method, input, options); + console.log("I'm intercepting after !") + return unaryCall + } +} + +const coreTransportInstance = new GrpcWebFetchTransport({ + baseUrl: import.meta.env.VITE_RP_GRPC_CORE_HOST, + interceptors: [exampleInterceptor] +}); + +const vizTransportInstance = new GrpcWebFetchTransport({ + baseUrl: import.meta.env.VITE_RP_GRPC_VIZ_HOST, + interceptors: [exampleInterceptor] +}); + +const createDefaultRpcTransport = (transportInstance: RpcTransport): RpcTransport => { + const callOpts: Partial = { + meta: { + authorization: `Bearer ${APISettings.token}` + }, + }; + return { + mergeOptions: options => transportInstance.mergeOptions(options), + unary: (method, input, options) => { + return transportInstance.unary(method, input, mergeRpcOptions(callOpts, options)); + }, + serverStreaming: (method, input, options) => { + return transportInstance.serverStreaming(method, input, mergeRpcOptions(callOpts, options)); + }, + clientStreaming: (method, options) => { + return transportInstance.clientStreaming(method, mergeRpcOptions(callOpts, options)); + }, + duplex: (method, options) => { + return transportInstance.duplex(method, mergeRpcOptions(callOpts, options)); + }, + }; +}; + +// CORE +export const ProjectService = () : ProjectServiceClient => {return new ProjectServiceClient(createDefaultRpcTransport(coreTransportInstance))}; +// export const OrganisationService = () : OrganisationServiceClient => { return new OrganisationServiceClient(createDefaultRpcTransport(coreTransportInstance))}; +// ... + +// VIZ +export const MotdService = () : MotdServiceClient => { return new MotdServiceClient(createDefaultRpcTransport(vizTransportInstance))}; +// Add other services as needed diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..645be0d --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..913b8f2 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..a83dfc9 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node22/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*", + "eslint.config.*" + ], + "compilerOptions": { + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..4217010 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,18 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueDevTools from 'vite-plugin-vue-devtools' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + vueDevTools(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, + }, +})