Progressive Migration of Angular to React
         Our client wants to transition part of their website to use a new frontend technology while keeping existing parts in their current technology.
 
Specifically:
    • The main site and several sub-URLs are built using Angular.
    • A new sub-URL should be introduced using React, with a different backend database.
 
The Angular application existed as a comprehensive platform at www.example.com and www.example.com/page1, while the new React application was introduced at www.example.com/page2. Nginx was employed for server-side management to ensure seamless integration.
angular-app-and-react

Objectives:

  1. Concurrent Operation: Allow two applications to run concurrently on a single domain.
  2. Framework Integration: Integrate Angular and React applications without compromising individual performance.
  3. Database Isolation: Maintain separate databases for each application for data integrity and security.
  4. Unified User Experience: Offer a cohesive user experience despite the use of different frontend technologies.

Project Information

Client:

Hello Mainland

Location:

Philadelphia, United States

Project duration:

3 Months

Technologies used:

Angular 13.1.2, Next 14.1

Website:

https://1851franchise.com/

Architectural Overview

Existing Setup:

    • Frontend: Angular application served at www.example.com and its sub-route www.example.com/page1.
    • Backend: Angular app connected to its own database.

Proposed Setup:

    • Frontend: Angular application at www.example.com and www.example.com/page1; React application at www.example.com/page2.
    • Backend: Angular and React apps continue with their respective databases.
    • Server: Nginx to manage routing and serve both applications seamlessly.

Implementation Steps:

Nginx Configuration:

  •  Nginx was configured to direct traffic to the appropriate application based on the URL path.
  •  Nginx Configuration Snippet:

Code Snippet with Line Numbers 
    server {
listen 80;
server_name example.com;

location / {
proxy_pass http://localhost; # Angular
}

location /page1 {
proxy_pass http://localhost; # Angular
}

location /page2 {
proxy_pass http://react_app;
}

# Additional configurations for headers, static files, etc.
}
  1. Setting up React Application

    • Development: The React application was developed to cater specifically to the new user group.
    • Build and Deployment: After development, the React app was built and deployed to the server.
    • Routing: Ensured React app handled routing internally through React Router.

  2. Database Integration

    • Each application interacted with its own database to keep the data segregated.
    • Ensured the backend APIs for both applications were properly configured to communicate with their respective databases.

  3. API Gateway and Data Security

    • An API gateway was introduced to manage API requests and ensure secure data transactions. This centralized the API endpoints and added additional security layers such as rate limiting and logging.

  4. User Interface Consistency

    • Shared a common design system and components where possible.
    • Conducted cross-application testing to ensure a seamless user experience.

Challenges and Resolutions

  • Cross-Origin Resource Sharing (CORS)

    • Resolution :

      Configured Nginx to handle CORS issues by allowing appropriate headers. Ensured both apps could communicate securely.

  • State Management

    • Resolution:
      Utilized services like Redux for the React app and RxJS for the Angular app to manage state efficiently. Separate state management ensured no leakage of data between apps.

  • Session Management
    • Resolution:
      Implemented a unified session service using JSON Web Tokens (JWT) to manage authentication seamlessly across both frameworks.

Results

Successfully deployed Angular and React applications on a single domain.
  • Maintained separate databases without any downtime or corruption issues.
  • Provided a seamless user experience with unified authentication and consistent UI/UX.
  • Enhanced overall system security and performance with Nginx and an API gateway.

Conclusion

Integrating Angular and React applications on a single domain proved to be a sophisticated yet manageable task. Utilizing Nginx for server-side management and maintaining distinct databases allowed for a robust and scalable solution. By leveraging server-side configurations, microservices architecture, and consistent design practices, it is possible to introduce new technologies without disrupting existing systems. This approach not only enhances scalability but also ensures that each part of the application can evolve independently, adapting to future technological advancements and business needs. Developers, Product managers, and decision-makers should consider these strategies to achieve a seamless integration, leading to a robust and flexible web infrastructure.