Skip to content

feat: migrate from Express/AngularJS to Next.js/React#12

Open
blues-man wants to merge 1 commit into
mainfrom
feat/migrate-to-nextjs
Open

feat: migrate from Express/AngularJS to Next.js/React#12
blues-man wants to merge 1 commit into
mainfrom
feat/migrate-to-nextjs

Conversation

@blues-man
Copy link
Copy Markdown
Contributor

Summary

  • Full framework migration from Node.js Express + AngularJS 1.x to Next.js 14 (App Router) + React 18 + TypeScript
  • Replaces all server-side Express code, AngularJS controllers/directives/services, Gulp build, and HTML templates
  • Preserves all existing functionality: product catalog, health probes, boom degradation, PatternFly styling

What changed

Before (removed) After (added)
server.js + bin/www (Express) Next.js built-in server
app/app.js (AngularJS module) src/app/layout.tsx (React)
app/controllers/controllers.js src/app/page.tsx + src/components/*.tsx
app/services/catalog.js ($http) src/lib/catalog.ts (fetch + async/await)
app/directives/header.js src/components/Header.tsx
views/partials/*.html (ng-repeat, ng-if) JSX/TSX components
gulpfile.js + config generation next.config.js + env vars
middleware/boom.js (Express) src/app/api/boom/route.ts + src/middleware.ts
kube-probe src/app/api/health/route.ts
Dockerfile (node:14) Multi-stage build (node:18-alpine, standalone)

Test plan

  • npm run build passes with zero type errors
  • npm run dev starts on port 8080
  • GET / renders PatternFly layout with header and product grid
  • GET /api/health returns {"status":"UP"}
  • GET /api/boom toggles degraded state
  • Verify Docker build: docker build -t coolstore-web .
  • Verify product listing with live API gateway

Closes #3, #4, #5, #6, #7, #8, #9, #10, #11

🤖 Generated with Claude Code

Replace the Node.js Express server + AngularJS 1.x SPA with a Next.js 14
App Router application using React 18 and TypeScript. This modernizes the
CoolStore web UI while preserving all existing functionality.

Key changes:
- Express server → Next.js built-in server with App Router
- AngularJS controllers/directives → React function components with hooks
- Gulp config generation → Next.js environment variables
- AngularJS $http service → native fetch with async/await
- HTML templates with ng-* → JSX/TSX components
- kube-probe middleware → /api/health route handler
- boom Express middleware → /api/boom route handler + Next.js middleware
- Static assets moved from app/imgs/ to public/imgs/
- Dockerfile updated for multi-stage Next.js standalone build
- PatternFly CSS styling preserved

Closes #3, #4, #5, #6, #7, #8, #9, #10, #11

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

STORY-001: Initialize Next.js project with TypeScript and App Router

1 participant