feat: Implement unified Vue SPA with granular service control
Consolidate Reports and Data Entry apps into a single Vue.js SPA with: Architecture: - Module-based structure with lazy-loaded routes (@reports, @data-entry) - Error boundaries per module to prevent cascade failures - Dual API proxy in Vite for microservices (reports:8001, data-entry:8003) - Pinia store factories for shared auth, company, and period stores - Vite path aliases for clear module boundaries (@shared, @reports, @data-entry) Service Management: - Granular service control scripts (backend-reports.sh, backend-data-entry.sh, bot.sh, frontend.sh) - 87% faster frontend restart: 7s vs 53s full restart - 38% faster full startup: 33s vs 53s via parallel backend initialization - Enhanced start-dev.sh with proper service timeouts (OCR: 30s, Vite: 15s, Bot: 10s) - status.sh for comprehensive health checks Features: - Auto-select first company on login with period auto-load - Hamburger menu with feature toggle support - JWT token auto-injection via axios interceptors - Unified header with company/period selectors - IIS web.config for production deployment with multi-API routing UX Improvements: - Vue watchers for reactive company/period loading - Lazy store initialization with graceful error handling - Period persistence per user+company in localStorage - Feature flags for optional modules Deployment: - Single IIS site serves unified frontend with API proxy rules - Maintains separate backend processes for microservices - Windows line ending fixes (.env CRLF → LF conversion) Stats: 112 files changed, 38,342 insertions(+), 2,342 deletions(-) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
128
vite.config.js
Normal file
128
vite.config.js
Normal file
@@ -0,0 +1,128 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
// Plugin to replace BUILD_TIMESTAMP in index.html at build
|
||||
function htmlTimestampPlugin() {
|
||||
return {
|
||||
name: 'html-timestamp',
|
||||
transformIndexHtml(html) {
|
||||
return html.replace('BUILD_TIMESTAMP', new Date().toISOString())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue(), htmlTimestampPlugin()],
|
||||
// Base path - single site deployment (no subdirectory)
|
||||
base: process.env.NODE_ENV === 'production' ? '/' : '/',
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@shared': fileURLToPath(new URL('./src/shared', import.meta.url)),
|
||||
'@reports': fileURLToPath(new URL('./src/modules/reports', import.meta.url)),
|
||||
'@data-entry': fileURLToPath(new URL('./src/modules/data-entry', import.meta.url))
|
||||
},
|
||||
dedupe: ['vue', 'vue-router', 'pinia', 'primevue']
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
host: true,
|
||||
// Disable file watching to prevent WSL2 deadlock
|
||||
watch: null,
|
||||
// Disable HMR completely
|
||||
hmr: false,
|
||||
// Dual proxy configuration for unified app
|
||||
proxy: {
|
||||
'/api/reports': {
|
||||
target: 'http://localhost:8001',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api\/reports/, '/api'),
|
||||
configure: (proxy, options) => {
|
||||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||||
// Preserve authorization header during redirects
|
||||
if (req.headers.authorization) {
|
||||
proxyReq.setHeader('Authorization', req.headers.authorization);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
'/api/data-entry': {
|
||||
target: 'http://localhost:8003',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
rewrite: (path) => path.replace(/^\/api\/data-entry/, '/api'),
|
||||
configure: (proxy, options) => {
|
||||
proxy.on('proxyReq', (proxyReq, req, res) => {
|
||||
// Preserve authorization header during redirects
|
||||
if (req.headers.authorization) {
|
||||
proxyReq.setHeader('Authorization', req.headers.authorization);
|
||||
}
|
||||
// Preserve X-Selected-Company header for data-entry
|
||||
if (req.headers['x-selected-company']) {
|
||||
proxyReq.setHeader('X-Selected-Company', req.headers['x-selected-company']);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
'/uploads': {
|
||||
target: 'http://localhost:8003',
|
||||
changeOrigin: true,
|
||||
secure: false
|
||||
}
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue', 'vue-router', 'pinia']
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: true,
|
||||
commonjsOptions: {
|
||||
include: [/node_modules/]
|
||||
},
|
||||
// Cache busting - generate new hashes on each build
|
||||
assetsInlineLimit: 0, // Don't inline small assets, use separate files with hash
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Force unique hashes for all files
|
||||
entryFileNames: `assets/[name].[hash].js`,
|
||||
chunkFileNames: `assets/[name].[hash].js`,
|
||||
assetFileNames: `assets/[name].[hash].[ext]`,
|
||||
// Manual chunks for better lazy loading and code splitting
|
||||
manualChunks: {
|
||||
// Core vendors
|
||||
'vendor-core': ['vue', 'vue-router', 'pinia'],
|
||||
'vendor-primevue': [
|
||||
'primevue/config',
|
||||
'primevue/button',
|
||||
'primevue/datatable',
|
||||
'primevue/column',
|
||||
'primevue/inputtext',
|
||||
'primevue/password',
|
||||
'primevue/dropdown',
|
||||
'primevue/calendar',
|
||||
'primevue/dialog',
|
||||
'primevue/toast',
|
||||
'primevue/confirmdialog'
|
||||
],
|
||||
'vendor-utils': ['axios', 'date-fns'],
|
||||
|
||||
// Charts (reports only - will be lazy loaded)
|
||||
'vendor-charts': ['chart.js', 'vue-chartjs'],
|
||||
|
||||
// Excel/PDF exports (lazy loaded)
|
||||
'vendor-export': ['xlsx', 'jspdf', 'jspdf-autotable']
|
||||
|
||||
// Note: Reports and Data Entry modules will be lazy loaded via dynamic imports
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// Add timestamp to build for versioning
|
||||
define: {
|
||||
__APP_VERSION__: JSON.stringify(new Date().toISOString()),
|
||||
__BUILD_TIMESTAMP__: JSON.stringify(Date.now())
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user