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.
![angular-app-and-react](https://d2366e79lh4q4u.cloudfront.net/wp-content/uploads/2024/07/converting-angular-app-to-react.avif)
Objectives:
- Concurrent Operation: Allow two applications to run concurrently on a single domain.
- Framework Integration: Integrate Angular and React applications without compromising individual performance.
- Database Isolation: Maintain separate databases for each application for data integrity and security.
- 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:
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.
}
-
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.
-
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.
-
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.
-
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
- 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.