Este proyecto demuestra cómo implementar una super app utilizando una arquitectura polyrepo con React Native. El proyecto muestra cómo las mini apps pueden ser alojadas tanto dentro del monorepo principal como de forma remota.
El proyecto está estructurado de manera que simula un entorno polyrepo real, donde:
- La super app (host) actúa como la aplicación principal
- La mayoría de las mini apps están en el mismo monorepo por simplicidad
- La mini app
techGal
está configurada para ser consumida de forma remota, simulando un escenario real de polyrepo
En el archivo rspack.config.mjs
de la super app, puedes ver la configuración de las mini apps remotas:
- La mayoría de las mini apps se cargan desde
localhost
durante el desarrollo techGal
está configurada para cargarse desde GitHub, simulando un escenario de producción
Para alternar entre desarrollo local y remoto de techGal
:
- En
packages/host/rspack.config.mjs
, encuentra las siguientes líneas:
// Para desarrollo local (descomentar):
// techGal: `techGal@http://localhost:9005/${platform}/mf-manifest.json`,
// Para consumo remoto (comentar durante desarrollo local):
techGal: `techGal@https://raw.githubusercontent.com/callstack-internal/remote-mini-app-sample-polyrepo/refs/heads/main/techGallery/build/generated/${platform}/mf-manifest.json`,
- Comenta/descomenta las líneas según necesites desarrollo local o remoto.
techGal
es una aplicación independiente que puede ejecutarse de forma autónoma o como parte de la super app.
- Navega al directorio de techGal:
cd techGallery
- Instala las dependencias:
pnpm install
- Inicia la aplicación:
pnpm start
- En otra terminal, ejecuta la aplicación en iOS o Android:
pnpm ios
# o
pnpm android
Aunque este proyecto mantiene todo en un solo repositorio por simplicidad, está diseñado para funcionar como un polyrepo. Para implementar esto en un escenario real:
- Mueve el contenido de la carpeta
techGal
a un repositorio separado - Ejecuta
pnpm bundle
para generar los archivos remotos - Sube la carpeta
build/generated
a cualquier servidor o CDN - Actualiza la URL en el
rspack.config.mjs
de la super app para que apunte a la nueva ubicación
This project demonstrates how to implement a super app using a polyrepo architecture with React Native. It showcases how mini apps can be hosted both within the main monorepo and remotely.
The project is structured to simulate a real polyrepo environment, where:
- The super app (host) acts as the main application
- Most mini apps are in the same monorepo for simplicity
- The
techGal
mini app is configured to be consumed remotely, simulating a real polyrepo scenario
In the super app's rspack.config.mjs
file, you can see the remote mini apps configuration:
- Most mini apps are loaded from
localhost
during development techGal
is configured to load from GitHub, simulating a production scenario
To toggle between local and remote development of techGal
:
- In
packages/host/rspack.config.mjs
, find these lines:
// For local development (uncomment):
// techGal: `techGal@http://localhost:9005/${platform}/mf-manifest.json`,
// For remote consumption (comment during local development):
techGal: `techGal@https://raw.githubusercontent.com/callstack-internal/remote-mini-app-sample-polyrepo/refs/heads/main/techGallery/build/generated/${platform}/mf-manifest.json`,
- Comment/uncomment the lines as needed for local or remote development.
techGal
is an independent application that can run standalone or as part of the super app.
- Navigate to techGal directory:
cd techGallery
- Install dependencies:
pnpm install
- Start the application:
pnpm start
- In another terminal, run the app on iOS or Android:
pnpm ios
# or
pnpm android
While this project keeps everything in a single repository for simplicity, it's designed to work as a polyrepo. To implement this in a real scenario:
- Move the
techGal
folder contents to a separate repository - Run
pnpm bundle
to generate the remote files - Upload the
build/generated
folder to any server or CDN - Update the URL in the super app's
rspack.config.mjs
to point to the new location
Note: Make sure you have completed the Set Up Your Environment guide before proceeding.
First, you will need to run Metro, the JavaScript build tool for React Native.
To start the Metro dev server, run the following command from the root of your React Native project:
# Using npm
npm start
# OR using Yarn
yarn start
With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
# Using npm
npm run android
# OR using Yarn
yarn android
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
bundle install
Then, and every time you update your native dependencies, run:
bundle exec pod install
For more information, please visit CocoaPods Getting Started guide.
# Using npm
npm run ios
# OR using Yarn
yarn ios
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
This is one way to run your app — you can also build it directly from Android Studio or Xcode.
Now that you have successfully run the app, let's make changes!
Open App.tsx
in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by Fast Refresh.
When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
- Android: Press the R key twice or select "Reload" from the Dev Menu, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS).
- iOS: Press R in iOS Simulator.
You've successfully run and modified your React Native App. 🥳
- If you want to add this new React Native code to an existing application, check out the Integration guide.
- If you're curious to learn more about React Native, check out the docs.
If you're having issues getting the above steps to work, see the Troubleshooting page.
To learn more about React Native, take a look at the following resources:
- React Native Website - learn more about React Native.
- Getting Started - an overview of React Native and how setup your environment.
- Learn the Basics - a guided tour of the React Native basics.
- Blog - read the latest official React Native Blog posts.
@facebook/react-native
- the Open Source; GitHub repository for React Native.