https://github.com/xtrinch/create-react-app-module-federation-example
An example repo on how to use module federation with apps jumpstarted by create-react-app without ejecting the configuration
https://github.com/xtrinch/create-react-app-module-federation-example
create-react-app module-federation module-federation-examples react webpack-module-federation
Last synced: over 1 year ago
JSON representation
An example repo on how to use module federation with apps jumpstarted by create-react-app without ejecting the configuration
- Host: GitHub
- URL: https://github.com/xtrinch/create-react-app-module-federation-example
- Owner: xtrinch
- License: other
- Created: 2022-11-27T17:15:43.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T09:57:29.000Z (over 1 year ago)
- Last Synced: 2025-02-28T19:52:44.919Z (over 1 year ago)
- Topics: create-react-app, module-federation, module-federation-examples, react, webpack-module-federation
- Language: HTML
- Homepage:
- Size: 1.13 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Create-react-app module federation example
The motivation for this repository is to enable us to use multiple separate builds to
form a single application seamlessly, with as little configuration as possible.
This repository represents an example on how to use module federation with apps jumpstarted
by `create-react-app` without ejecting the configuration.
This is packed into a monorepo, but this is by no means a requirement. You could have each
package in its own repository scattered across github.
## Configuration
There's very little configuration involved. There is however two important files in each repository:
- `modulefedration.config.js`
This is webpack's module federation config, see https://webpack.js.org/concepts/module-federation
for more information. Module federation enables us to use multiple separate builds to form a single
application.
- `craco.config.js`
Craco is the Create React App Configuration Override, an easy and comprehensible configuration layer
for create-react-app. This is the config for it to enable us to add plugins, see https://github.com/dilanx/craco.
## The magic that makes this work
The two webpack plugins that make this possible:
- https://github.com/bfaulk96/craco-mf
`craco-mf` enables us to use module federation in our CRA application.
- https://github.com/cloudbeds/webpack-module-federation-types-plugin
`@cloudbeds/webpack-module-federation-types-plugin`
provides us with typesafe development - meaning our apps are not full of ts-ignores and we have
an automatic system for sharing typings between the apps. This is necessary for any real-world
development scenario.
In the `modulefederation.config.js` you configure which packages are shared between the different apps,
which components are exposed to other apps and which other apps we wish to reach in our app and where
they reside.
Example for an app that uses a library build and is exposed to another container app:
```
{
name: "app2",
exposes: {
'./App2Index': './src/Homepage',
},
filename: "remoteEntry.js",
remotes: {
library: `library@${process.env.LIBRARY_URL}/remoteEntry.js`,
},
shared: {
react: {
singleton: true,
requiredVersion: deps["react"],
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}
```
## What forms this example application
There's three packages in this monorepo:
- `library` (contains shared components)
- `app2` (a standalone app that makes use of components and is also exposed to be used elsewhere)
- `app1` (a container app that makes use of components and also includes app2)
App2 and app1 also contain routing via `react-router-dom` as any real-life react app probably
would.
## Running in development
In development, the app is ran with `lerna`, which will run `yarn run start` in each
of the packages. Each of the apps can also be ran individually by running `yarn run start`
in their respective folders (Provided you have also ran their dependencies, e.g. you need
to run `library` to run `app2`).
Firstly, install the required packages by running `yarn` in each of the `packages/` and in the root.
To start the app with lerna, run in root of repository:
`yarn run start`
The same effect can be achieved with running `yarn run start` in each of the packages.
## Building for production
In the following section, two alternatives for production deploy are presented.
### Docker-compose
Production setup example is prepared using docker & docker-compose. In this setup, each of the
apps is its own container, which serves a static production build behind `nginx`.
To start the app with docker-compose, run in root of repository:
`docker-compose up`
### S3
If we were to deploy the applications to S3, we would deploy each application separately to its own S3,
each into their own respective buckets. The only configuration needed is to use the correct remote
URLs in `.env` files in each of the packages, which would need to point to S3 URLs
instead of localhost URLs.
E.g.:
`LIBRARY_URL=http://library.s3-website-us-east-1.amazonaws.com`
`APP2_URL=http://app2.s3-website-us-east-1.amazonaws.com`