Tech Plan: Migrating Angular Applications to React + Next.js Micro-Frontends

Overview

This document outlines the technical plan for migrating six Angular applications to React + Next.js using a micro-frontends architecture with Module Federation. The plan allows for gradual migration while maintaining a functioning overall system.

1. Set up the Next.js Shell Application

1. Create a new Next.js project:

   npx create-next-app@latest shell-app
   cd shell-app
   

2. Install necessary dependencies:

   npm install @module-federation/nextjs-mf
   

3. Configure Next.js for Module Federation (next.config.js):

   const NextFederationPlugin = require('@module-federation/nextjs-mf');
   
   module.exports = {
     webpack(config, options) {
       config.plugins.push(
         new NextFederationPlugin({
           name: 'shell',
           remotes: {
             app1: 'app1@http://localhost:3001/remoteEntry.js',
             app2: 'app2@http://localhost:3002/remoteEntry.js',
             app3: 'app3@http://localhost:3003/remoteEntry.js',
             app4: 'app4@http://localhost:3004/remoteEntry.js',
             app5: 'app5@http://localhost:3005/remoteEntry.js',
             app6: 'app6@http://localhost:3006/remoteEntry.js',
           },
           shared: {
             react: {
               singleton: true,
               requiredVersion: false,
             },
           },
         })
       );
       return config;
     },
   };
   

4. Create a layout component (components/Layout.tsx):

   import React from 'react'
   import Link from 'next/link'
   
   export default function Layout({ children }: { children: React.ReactNode }) {
     return (
       <div className="min-h-screen flex flex-col">
         <header className="bg-blue-600 text-white p-4">
           <nav>
             <ul className="flex space-x-4">
               <li><Link href="/">Home</Link></li>
               <li><Link href="/app1">App 1</Link></li>
               <li><Link href="/app2">App 2</Link></li>
               <li><Link href="/app3">App 3</Link></li>
               <li><Link href="/app4">App 4</Link></li>
               <li><Link href="/app5">App 5</Link></li>
               <li><Link href="/app6">App 6</Link></li>
             </ul>
           </nav>
         </header>
         <main className="flex-grow container mx-auto p-4">
           {children}
         </main>
         <footer className="bg-gray-200 p-4 text-center">
           © 2023 Your Company Name
         </footer>
       </div>
     )
   }
   

5. Update pages/_app.tsx:

   import type { AppProps } from 'next/app'
   import Layout from '../components/Layout'
   import '../styles/globals.css'
   
   export default function App({ Component, pageProps }: AppProps) {
     return (
       <Layout>
         <Component {...pageProps} />
       </Layout>
     )
   }
   

2. Create Next.js Micro-Frontends

For each Angular application, create a corresponding Next.js application:

1. Create a new Next.js project:

   npx create-next-app@latest app1
   cd app1
   

2. Install dependencies:

   npm install @module-federation/nextjs-mf
   

3. Configure for Module Federation (next.config.js):

   const NextFederationPlugin = require('@module-federation/nextjs-mf');
   
   module.exports = {
     webpack(config, options) {
       config.plugins.push(
         new NextFederationPlugin({
           name: 'app1',
           filename: 'static/chunks/remoteEntry.js',
           exposes: {
             './App': './pages/index.tsx',
           },
           shared: {
             react: {
               singleton: true,
               requiredVersion: false,
             },
           },
         })
       );
       return config;
     },
   };
   

4. Create the main component (pages/index.tsx):

   import React from 'react'
   
   export default function App1() {
     return (
       <div className="bg-green-100 p-4 rounded-lg">
         <h1 className="text-2xl font-bold mb-4">Welcome to App 1</h1>
         <p>This is the content of App 1, now migrated to React and Next.js!</p>
       </div>
     )
   }
   

5. Repeat steps 1-4 for each remaining application (app2 through app6).

3. Integrate Micro-Frontends into the Shell

1. Create pages for each micro-frontend in the shell app (pages/app1.tsx):

   import dynamic from 'next/dynamic'
   
   const App1 = dynamic(() => import('app1/App'), { ssr: false })
   
   export default function App1Page() {
     return <App1 />
   }
   

2. Repeat for app2 through app6.

3. Update the home page (pages/index.tsx):

   import Link from 'next/link'
   
   export default function Home() {
     return (
       <div className="space-y-4">
         <h1 className="text-3xl font-bold">Welcome to Our Micro-Frontend App</h1>
         <p>Click on the links below to navigate to different apps:</p>
         <ul className="list-disc list-inside">
           <li><Link href="/app1" className="text-blue-600 hover:underline">App 1</Link></li>
           <li><Link href="/app2" className="text-blue-600 hover:underline">App 2</Link></li>
           <li><Link href="/app3" className="text-blue-600 hover:underline">App 3</Link></li>
           <li><Link href="/app4" className="text-blue-600 hover:underline">App 4</Link></li>
           <li><Link href="/app5" className="text-blue-600 hover:underline">App 5</Link></li>
           <li><Link href="/app6" className="text-blue-600 hover:underline">App 6</Link></li>
         </ul>
       </div>
     )
   }
   

4. Gradual Migration from Angular to React

1. Start with one Angular application (e.g., App 1).
2. Identify main components and features.
3. Recreate components in React.
4. Update the Next.js micro-frontend with new React components.
5. Test thoroughly.
6. Update the shell to use the React version.
7. Repeat for remaining Angular applications.

5. Shared State Management

1. Install Redux:

   npm install redux react-redux @reduxjs/toolkit
   

2. Create a shared store (store/index.ts):

   import { configureStore } from '@reduxjs/toolkit'
   
   const store = configureStore({
     reducer: {
       // Add your reducers here
     },
   })
   
   export type RootState = ReturnType<typeof store.getState>
   export type AppDispatch = typeof store.dispatch
   
   export default store
   

3. Wrap the shell with Redux Provider (pages/_app.tsx):

   import type { AppProps } from 'next/app'
   import { Provider } from 'react-redux'
   import store from '../store'
   import Layout from '../components/Layout'
   import '../styles/globals.css'
   
   export default function App({ Component, pageProps }: AppProps) {
     return (
       <Provider store={store}>
         <Layout>
           <Component {...pageProps} />
         </Layout>
       </Provider>
     )
   }
   

6. Testing

1. Implement unit tests for individual components (Jest and React Testing Library).
2. Create integration tests for each micro-frontend.
3. Develop end-to-end tests for the entire application (e.g., using Cypress).

7. Deployment

1. Set up CI/CD pipeline for each micro-frontend and the shell.
2. Deploy each micro-frontend to its own subdomain or path.
3. Deploy the shell application.

Conclusion

This plan provides a structured approach to migrating Angular applications to React + Next.js using Module Federation. It allows for gradual migration while maintaining a functioning system. Adjust as needed based on specific requirements and application complexity.