{"id":19059309,"url":"https://github.com/evertonsavio/webpack-micro-frontends","last_synced_at":"2026-05-12T11:30:19.342Z","repository":{"id":238178569,"uuid":"796036697","full_name":"evertonsavio/webpack-micro-frontends","owner":"evertonsavio","description":"Micro frontends pattern and webpack configurations. A solution to de-composition and routing for multiple front-end applications.","archived":false,"fork":false,"pushed_at":"2024-05-04T22:39:56.000Z","size":98,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-02T12:12:53.435Z","etag":null,"topics":[],"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/evertonsavio.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":"2024-05-04T18:37:35.000Z","updated_at":"2024-10-05T11:26:04.000Z","dependencies_parsed_at":"2024-11-09T00:07:44.201Z","dependency_job_id":"190b59d2-52a6-45d0-bd88-4335f44b9391","html_url":"https://github.com/evertonsavio/webpack-micro-frontends","commit_stats":null,"previous_names":["evertonsavio/webpack-microfrontends-101","evertonsavio/webpack-micro-frontends"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evertonsavio%2Fwebpack-micro-frontends","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evertonsavio%2Fwebpack-micro-frontends/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evertonsavio%2Fwebpack-micro-frontends/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evertonsavio%2Fwebpack-micro-frontends/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evertonsavio","download_url":"https://codeload.github.com/evertonsavio/webpack-micro-frontends/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240113943,"owners_count":19749829,"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":[],"created_at":"2024-11-09T00:07:47.156Z","updated_at":"2026-05-12T11:30:19.269Z","avatar_url":"https://github.com/evertonsavio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Microfrontends Webpack Setup ( Run-Time Integrations )\n\n### Setup Webpack\nOn each microfront end run:\n```\nnpm init -y\nnpm install webpack@5.88.0 webpack-cli@4.10.0 webpack-dev-server@4.7.4 faker@5.1.0 html-webpack-plugin@5.5.0 --save-exact\n```\n\nCreate webpack.config.js file:\n```\nmodule.exports = {\n    mode: 'development',\n};\n\n#package.json\n    \"scripts\": {\n        \"start\": \"webpack\"\n    },\n```\nRun the webpack config:\n```\nnpm run start\n```\nThe dist folder will be created with the bundle.js / main.js.\n\n### Setup Webpack Dev Server\nPORT: 8081.\n```\nmodule.exports = {\n    mode: 'development',\n    devServer: {\n        port: 8081,\n    },\n};\n\n#package.json\n    \"scripts\": {\n        \"start\": \"webpack serve\"\n    },\n```\nCreate the public folder and add index.html there.\nAdd plugin to automatically add script tags to html file on webpack.config.js.\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n    mode: 'development',\n    devServer: {\n        port: 8081,\n    },\n    plugins: [\n        new  HtmlWebpackPlugin({\n            template: './public/index.html'\n        })\n    ]\n};\n```\n\n### Setup Container ( Decides what to render )\n```\nnpm init -y\nnpm install webpack@5.88.0 webpack-cli@4.10.0 webpack-dev-server@4.7.4 html-webpack-plugin@5.5.0 nodemon --save-exact\n```\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n    mode: 'development',\n    devServer: {\n        port: 8080,\n    },\n    plugins: [\n        new  HtmlWebpackPlugin({\n            template: './public/index.html'\n        })\n    ]\n};\n```\n\n### Designate one app as the Host (Container) and one as the Remote\n1. In the Remote, decide which modules (files) you want to make available to other projects\n2. Set up Module Federation plugin to expose those files\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')\n\nmodule.exports = {\n    mode: 'development',\n    devServer: {\n        port: 8081,\n    },\n    plugins: [\n        new ModuleFederationPlugin({\n            name: 'products',\n            filename: 'remoteEntry.js',\n            exposes: {\n                './ProductsIndex': './src/index'\n            }\n        }),\n        new HtmlWebpackPlugin({\n            template: './public/index.html'\n        })\n    ]\n};\n\n```\n3. In the Host, decide which files you want to get from the remotte\n4. Set up Module Federation plugin to fetch those files\n```\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')\n\nmodule.exports = {\n    mode: 'development',\n    devServer: {\n        port: 8080,\n    },\n    plugins: [\n        new ModuleFederationPlugin({\n            name: 'container',\n            remotes: {\n                products: 'products@http://localhost:8081/remoteEntry.js'\n            }\n        }),\n        new HtmlWebpackPlugin({\n            template: './public/index.html'\n        })\n    ]\n};\n\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\n```\n5. In the Host, refactor the entry point to load asynchronously\n\u003e Rename index.js to bootstrap.js and creates a new index.js with import('./bootstrap')\n6. In the Host, import whatever files you need from the remote.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevertonsavio%2Fwebpack-micro-frontends","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevertonsavio%2Fwebpack-micro-frontends","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevertonsavio%2Fwebpack-micro-frontends/lists"}