{"id":15878917,"url":"https://github.com/alejandronanez/module-federation-next","last_synced_at":"2026-05-06T13:37:38.044Z","repository":{"id":84303308,"uuid":"280760489","full_name":"alejandronanez/module-federation-next","owner":"alejandronanez","description":"Next.js applications sharing code using Webpack Module Federation","archived":false,"fork":false,"pushed_at":"2020-07-29T02:49:13.000Z","size":649,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-01T21:06:24.050Z","etag":null,"topics":["example-project","module-federation","nextjs","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alejandronanez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-07-19T00:00:20.000Z","updated_at":"2021-01-15T10:22:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"1480e5e3-0952-4eec-9628-2fcaea494f93","html_url":"https://github.com/alejandronanez/module-federation-next","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/alejandronanez%2Fmodule-federation-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alejandronanez%2Fmodule-federation-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alejandronanez%2Fmodule-federation-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alejandronanez%2Fmodule-federation-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alejandronanez","download_url":"https://codeload.github.com/alejandronanez/module-federation-next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246730260,"owners_count":20824396,"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":["example-project","module-federation","nextjs","webpack"],"created_at":"2024-10-06T02:42:21.257Z","updated_at":"2025-10-28T13:31:58.367Z","avatar_url":"https://github.com/alejandronanez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module Federation - Next.js Applications\n\nThis project contains 3 Next.js applications that share code between each other using [Webpack's Module Federation](https://webpack.js.org/concepts/module-federation/)\n\nYou can read more about Module Federation in Webpack's [official documentation](https://webpack.js.org/concepts/module-federation/), in this [Youtube Playlist](https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ) or by buying the [Practical Module Federation Book](https://module-federation.myshopify.com/products/practical-module-federation), written by one of the Module Federation co-creators.\n\n## About the project\n\nAs mentioned before, this project has 3 applications:\n\n1. `Shell`. Which is the app that contains the application shell and routes, you can think of it as the glue layer between other applications.\n2. `Homepage`. Homepage for a fictional company.\n3. `Jobs`. Jobs page for a fictional company.\n\nThis project uses [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) **for convenience**, so make sure to get run `yarn install` from the root of the project to get everything installed.\n\nSince Next.js is not using `Webpack 5` by the time of this writing, we need to create a `side-car` webpack configuration for each project. That means, that we have a folder that contains a `Webpack 5` configuration and it's the one that takes care of sharing the modules between the applications. That said, we will have an application structure that looks like this:\n\n```\n# Some files were hidden for brevity\n\npackages/shell\n├── README.md\n├── node_modules\n├── package.json\n├── public\n│   ├── favicon.ico\n│   └── vercel.svg\n├── src\n│   ├── components\n│   ├── hooks\n│   ├── pages\n│   └── styles\n├── wp5-host # Webpack 5 side-car\n│   ├── node_modules\n│   ├── package.json\n│   ├── src\n│   ├── webpack.config.js # Webpack 5 configuration\n│   └── yarn.lock\n└── yarn.lock\n```\n\nTo recap, the commands that we will need are:\n\n```\n# From the root of the project\n\nyarn # install all the dependencies needed. Next.js applications and Webpack 5 sidecars.\n\nyarn dev # Run all Next.js applications in development mode and the webpack sidecars\n```\n\nIf you want to run specific commands for each application, feel free to take a look at the main `package.json` in each one of the folders mentioned above.\n\n## Application URL\n\nYou can visit the applications in the following urls:\n\n### In Development\n\n| Application | URL Address           |\n| ----------- | --------------------- |\n| Shell       | http://localhost:3000 |\n| Homepage    | http://localhost:3001 |\n| Jobs        | http://localhost:3002 |\n| Careers     | http://localhost:3003 |\n\nFor local development, the webpack remote entries will be loading in these urls:\n\n| Application | URL Address                          |\n| ----------- | ------------------------------------ |\n| Shell       | http://localhost:8000/remoteEntry.js |\n| Homepage    | http://localhost:8001/remoteEntry.js |\n| Jobs        | http://localhost:8002/remoteEntry.js |\n| Careers     | http://localhost:8003/remoteEntry.js |\n\n### In Prod\n\n| Application | URL Address                                   |\n| ----------- | --------------------------------------------- |\n| Shell       | https://shell-mf.alejandronanez.vercel.app    |\n| Homepage    | https://homepage-mf.alejandronanez.vercel.app |\n| Jobs        | https://jobs-mf.alejandronanez.vercel.app     |\n| Careers     | https://careers-mf.alejandronanez.vercel.app  |\n\nFor local development, the webpack remote entries will be loading in these urls:\n\n| Application | URL Address                                                     |\n| ----------- | --------------------------------------------------------------- |\n| Shell       | https://shell-mf.alejandronanez.vercel.app/mf/remoteEntry.js    |\n| Homepage    | https://homepage-mf.alejandronanez.vercel.app/mf/remoteEntry.js |\n| Jobs        | https://jobs-mf.alejandronanez.vercel.app/mf/remoteEntry.js     |\n| Careers     | https://careers-mf.alejandronanez.vercel.app/mf/remoteEntry.js  |\n\n## What's pending / up for grabs\n\n- [x] ~[Being able to consume Typescript modules](https://github.com/alejandronanez/module-federation-next/pull/2)~\n- [x] ~[Add some basci routing](https://github.com/alejandronanez/module-federation-next/commit/f91001369167aaa4069e80b9931f9e4550a1b2a8)~\n- [ ] Centralize all the apps in Shell\n- [ ] Spin up a component library\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandronanez%2Fmodule-federation-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falejandronanez%2Fmodule-federation-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falejandronanez%2Fmodule-federation-next/lists"}