https://github.com/evertonsavio/webpack-micro-frontends
Micro frontends pattern and webpack configurations. A solution to de-composition and routing for multiple front-end applications.
https://github.com/evertonsavio/webpack-micro-frontends
Last synced: about 1 month ago
JSON representation
Micro frontends pattern and webpack configurations. A solution to de-composition and routing for multiple front-end applications.
- Host: GitHub
- URL: https://github.com/evertonsavio/webpack-micro-frontends
- Owner: evertonsavio
- Created: 2024-05-04T18:37:35.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-04T22:39:56.000Z (about 2 years ago)
- Last Synced: 2025-01-02T12:12:53.435Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Microfrontends Webpack Setup ( Run-Time Integrations )
### Setup Webpack
On each microfront end run:
```
npm init -y
npm 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
```
Create webpack.config.js file:
```
module.exports = {
mode: 'development',
};
#package.json
"scripts": {
"start": "webpack"
},
```
Run the webpack config:
```
npm run start
```
The dist folder will be created with the bundle.js / main.js.
### Setup Webpack Dev Server
PORT: 8081.
```
module.exports = {
mode: 'development',
devServer: {
port: 8081,
},
};
#package.json
"scripts": {
"start": "webpack serve"
},
```
Create the public folder and add index.html there.
Add plugin to automatically add script tags to html file on webpack.config.js.
```
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devServer: {
port: 8081,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
```
### Setup Container ( Decides what to render )
```
npm init -y
npm 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
```
```
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devServer: {
port: 8080,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
```
### Designate one app as the Host (Container) and one as the Remote
1. In the Remote, decide which modules (files) you want to make available to other projects
2. Set up Module Federation plugin to expose those files
```
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
mode: 'development',
devServer: {
port: 8081,
},
plugins: [
new ModuleFederationPlugin({
name: 'products',
filename: 'remoteEntry.js',
exposes: {
'./ProductsIndex': './src/index'
}
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
```
3. In the Host, decide which files you want to get from the remotte
4. Set up Module Federation plugin to fetch those files
```
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
mode: 'development',
devServer: {
port: 8080,
},
plugins: [
new ModuleFederationPlugin({
name: 'container',
remotes: {
products: 'products@http://localhost:8081/remoteEntry.js'
}
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};
const HtmlWebpackPlugin = require('html-webpack-plugin')
```
5. In the Host, refactor the entry point to load asynchronously
> Rename index.js to bootstrap.js and creates a new index.js with import('./bootstrap')
6. In the Host, import whatever files you need from the remote.