create-tririga-react-ts-vite-app 1.0.8 → 1.1.0

package/index.js

@@ -96,6 +96,8 @@ async function configureApp() {
   const envPath = path.join(projectDir, '.env');
   if (fs.existsSync(envExamplePath)) {
     let envContent = fs.readFileSync(envExamplePath, 'utf8');
+    envContent = envContent.replace(/VITE_TRIRIGA_PROXY_TARGET=.*/g, `VITE_TRIRIGA_PROXY_TARGET=${triUrl}`);
+    envContent = envContent.replace(/VITE_MODEL_AND_VIEW=.*/g, `VITE_MODEL_AND_VIEW=${modelAndView}`);
     envContent = envContent.replace(/TRI_URL=.*/g, `TRI_URL=${triUrl}`);
     envContent = envContent.replace(/TRI_USER=.*/g, `TRI_USER=${triUser}`);
     envContent = envContent.replace(/TRI_PASSWORD=.*/g, `TRI_PASSWORD=${triPassword}`);
@@ -108,22 +110,31 @@ async function configureApp() {
   const tririgaServicePath = path.join(projectDir, 'src', 'services', 'tririgaService.ts');
   if (fs.existsSync(tririgaServicePath)) {
     let tsContent = fs.readFileSync(tririgaServicePath, 'utf8');
+    // Update production config values
     tsContent = tsContent.replace(/modelAndView:\s*"[^"]*"/, `modelAndView: "${modelAndView}"`);
     tsContent = tsContent.replace(/appExposedName:\s*"[^"]*"/, `appExposedName: "${appExposedName}"`);
+    // Update dev config fallback values
+    tsContent = tsContent.replace(/\|\| 'appName'/g, `|| '${appExposedName}'`);
+    tsContent = tsContent.replace(/\/app\/appName\//g, `/app/${appExposedName}/`);
     fs.writeFileSync(tririgaServicePath, tsContent);
   }
 
-  // 7. Update vite.config.ts base path
+  // 7. Update vite.config.ts base path and proxy target
   const viteConfigPath = path.join(projectDir, 'vite.config.ts');
   if (fs.existsSync(viteConfigPath)) {
     let viteContent = fs.readFileSync(viteConfigPath, 'utf8');
-    // Regex matches the whole base line and replaces it, handling single or double quotes
+    // Update base path
     viteContent = viteContent.replace(/base:\s*['"]\/app\/[^/]+\/['"],/, `base: '/app/${appExposedName}/',`);
+    // Update default proxy target
+    viteContent = viteContent.replace(
+      /const tririgaTarget = process\.env\.VITE_TRIRIGA_PROXY_TARGET \|\| '[^']*'/,
+      `const tririgaTarget = process.env.VITE_TRIRIGA_PROXY_TARGET || '${triUrl}'`
+    );
     fs.writeFileSync(viteConfigPath, viteContent);
   }
 
   console.log(`\nSuccess! Created and configured ${projectName}.`);
-  console.log(`\nTo get started:\n  cd ${projectName}\n  npm install -g pnpm\n  pnpm install\n  pnpm run build:deploy\n`);
+  console.log(`\nTo get started:\n  cd ${projectName}\n  npm install -g pnpm\n  pnpm install\n  pnpm run dev          # Local dev server with TRIRIGA API proxy\n  pnpm run build:deploy  # Build and deploy to TRIRIGA\n`);
 }
 
 configureApp();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tririga-react-ts-vite-app",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Scaffold a TRIRIGA React app with Vite and TypeScript",
   "main": "index.js",
   "bin": {

package/template/.env.example

@@ -1,13 +1,15 @@
 # Local Development Config
-VITE_TRIRIGA_URL=http://localhost:8001
+# Leave VITE_TRIRIGA_URL empty — Vite proxy handles API forwarding to TRIRIGA
+VITE_TRIRIGA_URL=
 VITE_INSTANCE_ID=-1
-VITE_CONTEXT_PATH=/app
-VITE_MODEL_AND_VIEW=devView
-VITE_BASE_PATH=/app/devView
-VITE_EXPOSED_NAME=devView
+VITE_CONTEXT_PATH=
+VITE_MODEL_AND_VIEW=appName
 VITE_SSO=false
 VITE_AUTO_LOGIN=true
 
+# Vite proxy target — the TRIRIGA server URL for local dev API proxying
+VITE_TRIRIGA_PROXY_TARGET=https://your-tririga-server.com
+
 # Deployment Config (used by tri-deploy)
 TRI_URL=https://your-tririga-server.com
 TRI_USER=your-username

package/template/index.html

@@ -5,6 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tririga React App</title>
+    <script>
+      // Apply theme early to prevent Flash of Unstyled Content (FOUC)
+      if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/template/src/services/tririgaService.ts

@@ -8,11 +8,11 @@ export async function initTriAppConfig(): Promise<TriAppConfig> {
   if (import.meta.env.DEV) {
     const config: TriAppConfig = {
       instanceId: import.meta.env.VITE_INSTANCE_ID || '-1',
-      tririgaUrl: import.meta.env.VITE_TRIRIGA_URL || 'http://localhost:8001',
-      contextPath: import.meta.env.VITE_CONTEXT_PATH || '/dev',
-      modelAndView: import.meta.env.VITE_MODEL_AND_VIEW || 'unknown',
-      appPath: import.meta.env.VITE_BASE_PATH,
-      appExposedName: import.meta.env.VITE_EXPOSED_NAME,
+      tririgaUrl: import.meta.env.VITE_TRIRIGA_URL || window.location.origin,
+      contextPath: import.meta.env.VITE_CONTEXT_PATH ?? '',
+      modelAndView: import.meta.env.VITE_MODEL_AND_VIEW || 'appName',
+      appPath: import.meta.env.VITE_BASE_PATH || '/app/appName/',
+      appExposedName: import.meta.env.VITE_EXPOSED_NAME || 'appName',
       sso: String(import.meta.env.VITE_SSO).toLowerCase() === 'true',
     };
     setTriAppConfig(config);

package/template/vite.config.ts

@@ -3,14 +3,27 @@ import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 
+// TRIRIGA paths that need to be proxied during local development
+const tririgaTarget = process.env.VITE_TRIRIGA_PROXY_TARGET || 'https://your-tririga-server.com';
+const tririgaProxyPaths = ['/p/', '/api/', '/getCompanyFile.jsp', '/html/en/default/'];
+const tririgaProxyConfig = Object.fromEntries(
+  tririgaProxyPaths.map((p) => [
+    p,
+    { target: tririgaTarget, changeOrigin: true, secure: false },
+  ])
+);
+
 // https://vite.dev/config/
 export default defineConfig({
-   // Base path must match the TRIRIGA view name /app/<appName>/
-  base: '/app/appName/', 
+  // Base path must match the TRIRIGA view name /app/<appName>/
+  base: '/app/appName/',
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  server: {
+    proxy: tririgaProxyConfig,
+  },
 })