# Phase 1 Step 2: Development Environment Verification **Date**: 2026-08-02 (Week 1, Days 3-5) **Duration**: 3 days **Success Criteria**: All 5 verification tests PASS ✅ --- ## Verification Checklist ### Step 1: npm install ✅ ```powershell # Install all dependencies (takes ~5-10 minutes on first run) npm install # Expected output: # added NNN packages, and audited NNNN packages in XXs # ✅ 0 vulnerabilities detected (or audit warnings only) ``` **Verification**: ```powershell npm list | head -20 # Should show tree of installed packages # Key packages must be present: # ├── vue@3.4.0 # ├── vue-router@4.3.0 # ├── pinia@2.1.0 # ├── axios@1.7.0 # ├── @tabler/core@1.0.0 # ├── @storybook/vue3@8.0.0 # └── vitest@1.0.0 ``` --- ### Step 2: npm run dev (Vite Dev Server) ✅ ```powershell # Terminal 1: Start development server npm run dev # Expected output: # ➜ Local: http://localhost:5173/ # ➜ Press q to quit ``` **Verification**: ```powershell # Terminal 2: Test HTTP response curl -s http://localhost:5173/ | head -5 # Should return HTML with: # # # # # Or use browser: http://localhost:5173/ # Page should show: # - Title: "OMS·WMS·ERP Platform" # - Navbar with "Orders", "Inventory", "Products" links # - Dashboard card with "Phase 1: Dev Environment Setup" # - No console errors (F12 > Console) ``` **Exit**: Press `q` in Terminal 1 --- ### Step 3: npm run storybook (Storybook Server) ✅ ```powershell # Terminal 1: Start Storybook npm run storybook # Expected output: # 📚 Storybook started # ➜ Local: http://localhost:6006/ ``` **Verification**: ```powershell # Terminal 2: Test Storybook API curl -s http://localhost:6006/ | grep -o "Storybook" | head -1 # Should output: Storybook # Or use browser: http://localhost:6006/ # Page should show: # - Storybook UI with sidebar # - "Primitives" section with "Button" component # - 7 story items: # - Primary # - Secondary # - Danger # - Small # - Large # - Disabled # - Loading # - Controls panel to modify props # - Accessibility tab (axe audit) ``` **Exit**: Press `q` in Terminal 1 --- ### Step 4: npm run lint (ESLint + Format Check) ✅ ```powershell # Run ESLint with auto-fix npm run lint # Expected output: # ✓ Linting and formatting complete # or # 0 errors and 0 warnings ``` **Verification**: No errors should be reported **If errors occur**: ```powershell # Check specific file npx eslint src/components/primitives/Button/ButtonBase.vue --fix # Check all files with detailed output npm run lint -- --debug # Common fixes: # - Remove unused imports # - Fix missing semicolons # - Correct spacing/indentation # - Fix TypeScript type errors (no `any`) ``` --- ### Step 5: npm run type-check (TypeScript Verification) ✅ ```powershell # Run TypeScript compiler in check mode (no emit) npm run type-check # Expected output: # ✓ No TypeScript errors # or # 0 errors ``` **Verification**: 0 TypeScript errors reported **If errors occur**: ```powershell # Show detailed error messages npx vue-tsc --noEmit --pretty # Common issues: # - Missing type definitions # - Incorrect prop types # - Unused variables ``` --- ### Step 6: npm run test:unit (Unit Tests) ✅ ```powershell # Run Vitest for unit tests npm run test:unit # Expected output: # ✓ src/components/primitives/Button/ButtonBase.spec.ts (8) # ✓ Tests passed # Coverage: XXX% statements, XXX% branches, XXX% functions, XXX% lines ``` **Verification**: All 8 tests for ButtonBase should PASS **Sample test output**: ``` ✓ src/components/primitives/Button/ButtonBase.spec.ts (8) ✓ renders button with text ✓ applies variant class ✓ applies size class ✓ emits click event ✓ disables button when disabled prop is true ✓ disables button when loading prop is true ✓ shows spinner when loading ✓ sets aria-label when provided Test Files 1 passed (1) Tests 8 passed (8) Duration XXXms ``` **If tests fail**: ```powershell # Run with verbose output npm run test:unit -- --reporter=verbose # Debug specific test npm run test:unit -- ButtonBase.spec.ts # Watch mode for development npm run test:unit -- --watch ``` --- ### Step 7: npm run build (Production Build) ✅ ```powershell # Build for production npm run build # Expected output: # ✓ 123 modules transformed # dist/index.html 1.00 kB │ gzip: 0.50 kB # dist/assets/... XXX.00 kB │ gzip: XXX.00 kB # ✓ built in XXXms ``` **Verification**: ```powershell # Check dist folder ls -lh dist/ # Should create: # - index.html (~1KB) # - assets/main-*.js (~150-200KB gzipped) # - assets/main-*.css (~20-50KB gzipped) # - assets/tabler-*.js (~200KB gzipped) # - assets/vendor-*.js (~100KB gzipped) # Verify bundle size du -sh dist/ # Should be <500MB total # Test production build locally npx vite preview # Should serve dist/ on http://localhost:4173/ ``` **If build fails**: ```powershell # Clear cache rm -r node_modules/.vite npm run build -- --force # Check for large dependencies npm ls --depth=0 # Analyze bundle npm install -D rollup-plugin-visualizer # (add to vite.config.ts) npm run build -- --analyze ``` --- ### Step 8: npm run build-storybook (Storybook Build) ✅ ```powershell # Build Storybook for static hosting npm run build-storybook # Expected output: # ✓ build # ✓ manager bundle built # ✓ preview bundle built # info => Copying static files # info => Storybook static files available ``` **Verification**: ```powershell # Check storybook-static folder ls -lh storybook-static/ # Should create: # - index.html # - assets/ (CSS + JS) # - iframe.html # - etc. # Test locally npx http-server storybook-static -p 8080 # Open http://localhost:8080/ # All stories should render correctly ``` --- ## Full Verification Flow (Time: ~30-40 minutes) ```powershell # 1. Install (5-10 min) - one time only npm install # 2. Dev server (5 min) # Terminal 1 npm run dev # Terminal 2 curl http://localhost:5173/ # Should return HTML # Ctrl+C to stop # 3. Storybook (5 min) # Terminal 1 npm run storybook # Terminal 2 curl http://localhost:6006/ # Should return HTML # Ctrl+C to stop # 4. Lint (2 min) npm run lint # Should pass with 0 errors # 5. Type-check (2 min) npm run type-check # Should pass with 0 errors # 6. Unit tests (3 min) npm run test:unit # Should pass 8/8 tests # 7. Build (5 min) npm run build # Should create dist/ <500MB # 8. Storybook build (3 min) npm run build-storybook # Should create storybook-static/ # Total: ~30-40 minutes ``` --- ## Success Criteria: Phase 1 Step 2 Complete ✅ All 8 tests must PASS: - ✅ **npm install**: All dependencies installed, 0 vulnerabilities (or audit warnings only) - ✅ **npm run dev**: Dev server starts on http://localhost:5173/ with live reload - ✅ **npm run storybook**: Storybook starts on http://localhost:6006/ with all stories rendering - ✅ **npm run lint**: ESLint passes with 0 errors, all files auto-formatted - ✅ **npm run type-check**: TypeScript strict mode passes with 0 errors - ✅ **npm run test:unit**: All 8 ButtonBase unit tests PASS - ✅ **npm run build**: Production build succeeds, dist/ <500MB gzipped - ✅ **npm run build-storybook**: Storybook static build succeeds --- ## Next: Phase 1 Step 3 Once all verifications PASS: 1. **Add remaining 25 Primitive components** (Week 1-2) - Input, Select, Table, Card, Badge, Modal, Checkbox, Radio, etc. - 180 Storybook stories - Unit tests (70%+ coverage) 2. **Setup pre-commit hooks** (Week 1) - husky + lint-staged - Auto-lint on git commit 3. **Deploy Storybook** (Week 2) - GitHub Pages or Chromatic - Automatic on every push 4. **CI/CD Pipeline** (Week 2) - GitHub Actions: lint → test → build - Automated on every PR/push --- ## Troubleshooting | Issue | Solution | |-------|----------| | **npm install fails** | `npm cache clean --force` then retry | | **Port 5173 already in use** | `npm run dev -- --port 5174` | | **Port 6006 already in use** | `npm run storybook -- -p 6007` | | **ESLint errors** | `npm run lint -- --fix` | | **TypeScript errors** | `npm run type-check` to see detailed errors | | **Tests timeout** | `npm run test:unit -- --timeout=20000` | | **Build exceeds 500MB** | Check `npm ls --depth=0` for large dependencies | | **Storybook won't start** | Clear `.storybook/.cache/`: `rm -rf .storybook/.cache` | --- **Status**: 🚀 Phase 1 Step 2 Verification Ready **Owner**: Frontend Team Lead **Target Date**: 2026-08-05 (all verifications passing)