Legacy Migration
Angular to Next.js Migration Behind Nginx Routing for HelloMainland
Discover how PearlThoughts executed a progressive Angular to React migration, improving performance, scalability, and maintainability without disrupting business operations.
Project Overview
PearlThoughts helped HelloMainland progressively migrate their franchise media platform from Angular 13.1.2 to Next.js 14.1, running both frameworks concurrently on a single domain via Nginx routing. By maintaining separate databases, implementing JWT-based unified authentication, and introducing an API gateway, the team delivered a seamless dual-framework deployment in three months with zero downtime, preserving the user experience while enabling each application to evolve independently.
Nginx Routing: Two Frameworks, One Domain
The core of the progressive migration strategy was Nginx acting as a transparent reverse proxy. URL path rules directed traffic to either the Angular or Next.js application based on the route, users never saw the seam between frameworks. New features and pages were built in React while the existing Angular application continued serving established routes untouched.
Unified Authentication Across Frameworks
The most technically sensitive challenge was keeping users logged in as they navigated between the Angular and React sections of the same site. A shared JWT-based session service was built to issue and validate tokens independently of which framework was rendering the current page, ensuring authentication state was preserved transparently without forcing re-logins.
API Gateway, Database Isolation & UI Consistency
An API gateway centralized all backend requests, adding rate limiting, request logging, and a single enforcement point for security policies. Separate databases for each application maintained data integrity and allowed each framework's backend to evolve independently. A shared design system ensured buttons, typography, colors, and layouts remained visually consistent across both frontends, so the migration was invisible to end users throughout the entire three-month process.
Client Objectives
The engagement was guided by clear objectives that defined success for business leadership and delivery teams.
Concurrent Operation
Enable Angular and React applications to run concurrently on a single domain without compromising individual performance.
Database Isolation
Maintain separate databases for each application to ensure data integrity, security, and independent evolution.
Unified User Experience
Deliver a cohesive user experience with unified authentication and consistent UI/UX across both frontend technologies.
The challenge
Complex constraints hindering growth
Cross-Origin Resource Sharing
Running two separate frontend frameworks on a single domain introduced CORS issues that blocked secure communication between the Angular and React applications.
State Management Across Frameworks
Maintaining separate state management systems (RxJS for Angular, Redux for React) without data leakage between applications required careful isolation.
Unified Session Management
Users needed seamless authentication across both frameworks, requiring a unified session service that worked transparently regardless of which app served the page.
UI Consistency
Ensuring a cohesive user experience across Angular and React applications demanded shared design systems and cross-application testing.
The solution
Progressive Migration Strategy
Running Angular and React side-by-side via Nginx routing on a single domain
Nginx Configuration
Configured Nginx to route traffic to the appropriate application based on URL path, directing sub-routes to either the Angular or React app seamlessly.
- Nginx
- Routing
- Reverse Proxy
React Application Setup
Developed and deployed the Next.js 14.1 React application for the new sub-URL, with internal routing handled by React Router.
- Next.js 14.1
- React Router
- Deployment
Database Integration
Configured separate backend databases for each application with properly isolated API endpoints to maintain data segregation.
- Database Isolation
- API Configuration
- Backend
API Gateway & Security
Introduced an API gateway to centralize API requests, adding rate limiting, logging, and JWT-based unified authentication across both frameworks.
- API Gateway
- JWT Auth
- Security
UI Consistency & Testing
Shared a common design system and conducted cross-application testing to ensure a seamless user experience across both frontends.
- Design System
- Cross-App Testing
- UX
Technologies Implemented
- Angular 13.1.2
- Next.js 14.1
- Nginx
- JWT Authentication
- Redux
- 2
- Frameworks on Single Domain
- 3 mo
- Migration Duration
- 0
- Downtime During Migration
- 100%
- Unified Authentication Coverage
Business impact
Migration Impact
Seamless dual-framework deployment with zero disruption
Cost Efficiency
- Zero downtime
- During migration rollout
- Independent scaling
- Per-application resource allocation
Operational Gains
- Separate databases
- Data integrity preserved
- Unified auth
- Seamless JWT-based sessions
Business Outcomes
- Consistent UX
- Across both frameworks
- Future-ready
- Independent frontend evolution
How we drive results
Turning Strategy into Measurable Business Impact
Our case studies reflect a consistent delivery model focused on outcomes, helping organizations modernize technology, reduce risk, and accelerate growth through practical, scalable solutions.
Outcome-Driven Strategy
Every engagement starts with clear business objectives, success metrics, and a roadmap aligned to real operational and financial outcomes.
Proven Execution Model
We apply proven frameworks, agile delivery, and industry best practices to execute complex initiatives with speed, quality, and predictability.
Secure & Scalable Delivery
Our solutions are built with security, compliance, and scalability at the core, ensuring long-term resilience and sustainable growth.
Ready to Transform Your Legacy Frontend?
Migrate from Angular to React progressively without downtime or disruption to your users.
Start Your Migration