Awesome

Super App Showcase – micro-frontends for mobile apps

Bring micro-frontend architecture to your mobile React Native app with Re.Pack and make it a Super App.

Learn more about Super Apps here: https://www.callstack.com/super-app-development.

🚧 We are currently updating this project to support Re.Pack 5 and Module Federation 2. Additionally, we are working on a more streamlined deployment process for mini apps. Stay tuned for more updates! 🚧

The problem

As small apps grow, offering multiple services (payments, messaging, social network, gaming, news, etc.), maintaining them becomes challenging. The codebase can become cluttered, and the app size may deter users who only need a few services. Today, teams dealing with such a challenge can either use monorepo to help draw the boundaries between functionalities, or leverage publishing and consuming packages from npm. However, both approaches have their drawbacks. At the same time, web teams have acccess to micro-frontend architecture, which allows them to split the app into smaller, more manageable parts downloadable on demand.

The solution

This showcase demonstrates how to achieve a proper micro-frontend architecture for mobile apps with Module Federation. It simplifies setup and maintenance, allowing independent apps to be deployed separately or as part of a super app. Micro-frontends can be moved to separate repositories, enabling independent team work or external contributions. Unlike classic monorepos, this setup uses runtime dependencies, so updating a micro-frontend automatically updates all apps using it without redeployment.

The Super App

<table> <tr> <td>Host App</td> <td>Mini Apps Interaction</td> <td>Booking Standalone App</td> </tr> <tr> <td><img src="images/host-main-screen.png" alt="host-main-screen" width="200"></td> <td><img src="images/host.gif" alt="host" width="200"></td> <td><img src="images/booking.gif" alt="booking" width="200"></td> </tr> </table>

Structure

The super app contains 4 apps:

host - the main app, which is a super app. It contains all the micro-frontends and provides a way to navigate between them.
booking - micro-frontend for booking service. Booking exposes UpcomingAppointments screen and MainNavigator. MainNavigator is Booking app itself. UpcomingAppointments screen is a screen, which is used in the super app in its own navigation.
shopping - micro-frontend for shopping service. Shopping exposes MainNavigator. MainNavigator is Shopping app itself.
news - micro-frontend for news service. News exposes MainNavigator. MainNavigator is News app itself. News mini app stored in separate repository https://github.com/callstack/news-mini-app-showcase to provide the example of using remote container outside of the monorepo.
dashboard - micro-frontend for dashboard service. Dashboard exposes MainNavigator. MainNavigator is Dashboard app itself.
auth - module that is used by other modules to provide authentication and authorization flow and UI.

Each of the mini apps could be deployed and run as a standalone app.

How to use

We use pnpm to manage dependencies. Learn how to install pnpm here

Setup

Install dependencies for all apps:

pnpm install

[Optional] Install pods where applicable

pnpm pods

Pods might sometimes be outdated, and they might fail to install, in that case you can update them by running:

pnpm pods:update

Run

Start dev server for Host and Mini apps:

pnpm start

Or start dev server for a specific app (host | booking | shopping | news | dashboard):

pnpm start:<app-name>

Or start dev server for a specific app as a standalone app. It's useful for testing micro-frontend as a standalone app:

pnpm start:standalone:<app-name>

Running the mini app as a standalone requires exposing auth module:

pnpm start:auth

Run iOS or Android app (ios | android):

pnpm run:<app-name>:<platform>

For Android, make sure to reverse all adb ports:

pnpm adbreverse

Test

Run tests for all apps:

pnpm test

Lint

Run linter for all apps:

pnpm lint

Type check

Run type check for all apps:

pnpm typecheck

Known Issues

The "booking" and "shopping" mini-apps can't be run in standalone mode (i.e. without the host running). This is a deliberate decision of this repository to showcase the possibility and to reduce the amount of work to keep the mini-apps dependencies up-to-date. The "dashboard" mini-app can be run as a standalone app (without the host). It's up to you to decide on what kind of developer experience your super app has.

Contributing

Read the contribution guidelines before contributing.

Made with ❤️ at Callstack

Super App showcase is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!