React/Solid-JS Module Federation on TanStack!

Key Concepts

• Module Federation: A technique to share code between separately deployed applications at runtime.
• Micro Frontend Architecture: An approach to building web applications as a composition of features owned by independent teams.
• React: A JavaScript library for building user interfaces.
• SolidJS: A JavaScript framework for building user interfaces, known for its performance.
• TanStack Store: A simple state management library.
• Remote: A module exposed by another application via Module Federation.
• Host: An application that consumes remote modules.
• State Sharing: Sharing data between different parts of an application or between different applications.
• Runtime Updating: The ability to update code in one application and have those changes reflected in other applications at runtime.

React Host App Setup

• The video starts by creating a React application using create-ts-router-app with the addons feature enabled to support Module Federation.
• The project is named react-mod-fed.
• The setup includes the code router and Tailwind CSS.
• Module Federation is enabled during the project creation.

SolidJS Counter App

• An existing SolidJS application (solid-mod-fed) with a counter component is used.
• The SolidJS counter is built using SolidJS's reactive primitives.
• The goal is to integrate this SolidJS counter into the React application and share state between them.

Running Both Applications

• Both the React and SolidJS applications are started simultaneously.
• The React app runs on port 3000, and the SolidJS app runs on port 3001.

Creating a React Counter

• A simple counter component is created in React (counter.tsx) to have a side-by-side comparison.
• The React counter includes basic increment and decrement functionality.
• Styles are added to the React counter for visual presentation.
• The React counter is integrated into the app.tsx file using Flexbox layout.
• The background color is set to black, and the text color is set to white in index.html.

Exposing the SolidJS Counter

• The SolidJS counter needs to be exposed as a remote module.

• A counterLauncher function is defined in the SolidJS application.

• counterLauncher takes an HTML element and renders the SolidJS counter into that element using render from solid-js/web.

• The counterLauncher function is exported as the default export.

• In the moduleFederation.config.ts file of the SolidJS app, counterLauncher is exposed:

  module.exports = {
    name: 'solid_mod_fed',
    exposes: {
      './counterLauncher': './src/counterLauncher',
    },
  };
  

Importing the SolidJS Counter into React

• The exposed SolidJS counter needs to be registered as a remote in the React application.

• In the moduleFederation.config.ts file of the React app, the remote is configured:

  module.exports = {
    name: 'react_mod_fed',
    remotes: {
      'solid_mod_fed': 'solid_mod_fed@http://localhost:3001/remoteEntry.js',
    },
  };
  

• The remote configuration includes the name (solid_mod_fed) and the URL of the remote entry point (http://localhost:3001/remoteEntry.js).

• The counterLauncher is imported from the remote module in the React component:

  import counterLauncher from 'solid_mod_fed/counterLauncher';
  

• A div element is created in the React component with a ref to hold the SolidJS counter.

• The useRef hook is used to get a reference to the div element.

• The useEffect hook is used to run the counterLauncher function on the div element when the component mounts:

  const solidCounterRef = useRef(null);
  
  useEffect(() => {
    if (solidCounterRef.current) {
      counterLauncher(solidCounterRef.current);
    }
  }, []);
  
  return <div ref={solidCounterRef} />;
  

State Sharing with TanStack Store

• TanStack Store is used to share state between the React and SolidJS counters.

• @tanstack/store and @tanstack/solid-store are installed in the SolidJS application.

• A counterStore.ts file is created in the SolidJS application to define the store:

  import { atom } from '@tanstack/store';
  
  export const counterStore = atom({
    count: 20,
  });
  

• The SolidJS counter component is updated to use the TanStack Store instead of its internal signal.

• useStore from @tanstack/solid-store is used to connect to the store.

• The setCount function is replaced with store.setState to update the store.

• The counterStore is exposed in the moduleFederation.config.ts file of the SolidJS application:

  module.exports = {
    name: 'solid_mod_fed',
    exposes: {
      './counterLauncher': './src/counterLauncher',
      './counterStore': './src/counterStore',
    },
  };
  

• @tanstack/react-store is installed in the React application.

• The counterStore is imported from the remote module in the React component:

  import { counterStore } from 'solid_mod_fed/counterStore';
  

• The React counter component is updated to use the TanStack Store.

• useStore from @tanstack/react-store is used to connect to the store.

• The setCount function is replaced with store.setState to update the store.

Runtime Updating

• Module Federation enables runtime updating, meaning that changes in the SolidJS application are automatically reflected in the React application.
• When the initial value of the count in counterStore.ts is changed in the SolidJS application, the React application immediately reflects the change.

Conclusion

• The video demonstrates how to use Module Federation to share UI components and state between React and SolidJS applications.
• TanStack Store is used to manage and share state between the applications.
• Module Federation enables runtime updating, providing a seamless development and deployment experience.
• This approach allows for building micro frontend architectures where different teams can own and deploy different parts of the application independently.