{"id":16239085,"url":"https://github.com/xtrinch/create-react-app-module-federation-example","last_synced_at":"2025-03-19T16:31:18.854Z","repository":{"id":66146891,"uuid":"571261901","full_name":"xtrinch/create-react-app-module-federation-example","owner":"xtrinch","description":"An example repo on how to use module federation with apps jumpstarted by create-react-app without ejecting the configuration","archived":false,"fork":false,"pushed_at":"2024-09-24T09:57:29.000Z","size":1183,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T19:52:44.919Z","etag":null,"topics":["create-react-app","module-federation","module-federation-examples","react","webpack-module-federation"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xtrinch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-27T17:15:43.000Z","updated_at":"2024-10-07T08:59:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"178dbc9b-2b12-4e07-a21b-83fec449f722","html_url":"https://github.com/xtrinch/create-react-app-module-federation-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Fcreate-react-app-module-federation-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Fcreate-react-app-module-federation-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Fcreate-react-app-module-federation-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Fcreate-react-app-module-federation-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xtrinch","download_url":"https://codeload.github.com/xtrinch/create-react-app-module-federation-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244006258,"owners_count":20382441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","module-federation","module-federation-examples","react","webpack-module-federation"],"created_at":"2024-10-10T13:42:18.679Z","updated_at":"2025-03-19T16:31:18.850Z","avatar_url":"https://github.com/xtrinch.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create-react-app module federation example\n\nThe motivation for this repository is to enable us to use multiple separate builds to \nform a single application seamlessly, with as little configuration as possible.\n\nThis repository represents an example on how to use module federation with apps jumpstarted\nby `create-react-app` without ejecting the configuration.\n\nThis is packed into a monorepo, but this is by no means a requirement. You could have each\npackage in its own repository scattered across github.\n\n## Configuration\n\nThere's very little configuration involved. There is however two important files in each repository:\n- `modulefedration.config.js` \n\nThis is webpack's module federation config, see https://webpack.js.org/concepts/module-federation\nfor more information. Module federation enables us to use multiple separate builds to form a single\napplication.\n\n- `craco.config.js` \n\nCraco is the Create React App Configuration Override, an easy and comprehensible configuration layer\nfor create-react-app. This is the config for it to enable us to add plugins, see https://github.com/dilanx/craco.\n\n## The magic that makes this work\n\nThe two webpack plugins that make this possible:\n- https://github.com/bfaulk96/craco-mf\n\n`craco-mf` enables us to use module federation in our CRA application.\n\n- https://github.com/cloudbeds/webpack-module-federation-types-plugin\n\n`@cloudbeds/webpack-module-federation-types-plugin`\nprovides us with typesafe development - meaning our apps are not full of ts-ignores and we have\nan automatic system for sharing typings between the apps. This is necessary for any real-world\ndevelopment scenario.\n\nIn the `modulefederation.config.js` you configure which packages are shared between the different apps,\nwhich components are exposed to other apps and which other apps we wish to reach in our app and where\nthey reside.\n\nExample for an app that uses a library build and is exposed to another container app:\n```\n{\n  name: \"app2\",\n  exposes: {\n    './App2Index': './src/Homepage',\n  },\n  filename: \"remoteEntry.js\",\n  remotes: {\n    library: `library@${process.env.LIBRARY_URL}/remoteEntry.js`,\n  },\n  shared: {\n    react: {\n      singleton: true,\n      requiredVersion: deps[\"react\"],\n    },\n    \"react-dom\": {\n      singleton: true,\n      requiredVersion: deps[\"react-dom\"],\n    },\n  },\n}\n```\n\n## What forms this example application\n\nThere's three packages in this monorepo:\n- `library` (contains shared components)\n- `app2` (a standalone app that makes use of components and is also exposed to be used elsewhere)\n- `app1` (a container app that makes use of components and also includes app2)\n\nApp2 and app1 also contain routing via `react-router-dom` as any real-life react app probably\nwould.\n\n## Running in development\n\nIn development, the app is ran with `lerna`, which will run `yarn run start` in each\nof the packages. Each of the apps can also be ran individually by running `yarn run start`\nin their respective folders (Provided you have also ran their dependencies, e.g. you need\nto run `library` to run `app2`).\n\nFirstly, install the required packages by running `yarn` in each of the `packages/` and in the root.\n\nTo start the app with lerna, run in root of repository:\n`yarn run start`\n\nThe same effect can be achieved with running `yarn run start` in each of the packages.\n\n## Building for production\n\nIn the following section, two alternatives for production deploy are presented.\n\n### Docker-compose\n\nProduction setup example is prepared using docker \u0026 docker-compose. In this setup, each of the\napps is its own container, which serves a static production build behind `nginx`.\n\nTo start the app with docker-compose, run in root of repository:\n`docker-compose up`\n\n### S3\n\nIf we were to deploy the applications to S3, we would deploy each application separately to its own S3, \neach into their own respective buckets. The only configuration needed is to use the correct remote\nURLs in `.env` files in each of the packages, which would need to point to S3 URLs \ninstead of localhost URLs.\n\nE.g.:\n`LIBRARY_URL=http://library.s3-website-us-east-1.amazonaws.com`\n`APP2_URL=http://app2.s3-website-us-east-1.amazonaws.com`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtrinch%2Fcreate-react-app-module-federation-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxtrinch%2Fcreate-react-app-module-federation-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtrinch%2Fcreate-react-app-module-federation-example/lists"}