├── .gitignore ├── LICENSE.txt ├── README.md ├── images ├── MicroFrontend-Architecture-v1.png ├── eShopFederated.jpg ├── eShopOnContainers-architecture.png └── logo.png └── src └── eShopMF ├── mf-basket-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src │ ├── App.jsx │ ├── assets │ │ ├── .gitkeep │ │ ├── fonts │ │ │ ├── Oswald-Bold.eot │ │ │ ├── Oswald-Bold.svg │ │ │ ├── Oswald-Bold.ttf │ │ │ ├── Oswald-Bold.woff │ │ │ ├── Oswald-Bold.woff2 │ │ │ ├── Oswald-ExtraLight.eot │ │ │ ├── Oswald-ExtraLight.svg │ │ │ ├── Oswald-ExtraLight.ttf │ │ │ ├── Oswald-ExtraLight.woff │ │ │ ├── Oswald-ExtraLight.woff2 │ │ │ ├── Oswald-Light.eot │ │ │ ├── Oswald-Light.svg │ │ │ ├── Oswald-Light.ttf │ │ │ ├── Oswald-Light.woff │ │ │ ├── Oswald-Light.woff2 │ │ │ ├── Oswald-Medium.eot │ │ │ ├── Oswald-Medium.svg │ │ │ ├── Oswald-Medium.ttf │ │ │ ├── Oswald-Medium.woff │ │ │ ├── Oswald-Medium.woff2 │ │ │ ├── Oswald-Regular.eot │ │ │ ├── Oswald-Regular.svg │ │ │ ├── Oswald-Regular.ttf │ │ │ ├── Oswald-Regular.woff │ │ │ ├── Oswald-Regular.woff2 │ │ │ ├── Oswald-SemiBold.eot │ │ │ ├── Oswald-SemiBold.svg │ │ │ ├── Oswald-SemiBold.ttf │ │ │ ├── Oswald-SemiBold.woff │ │ │ └── Oswald-SemiBold.woff2 │ │ ├── images │ │ │ ├── add.svg │ │ │ ├── arrow-right.svg │ │ │ ├── cart.svg │ │ │ ├── delete.svg │ │ │ ├── header.jpg │ │ │ ├── logo.svg │ │ │ ├── logo_color.svg │ │ │ ├── minus.svg │ │ │ ├── plus.svg │ │ │ ├── refresh.svg │ │ │ └── user.svg │ │ └── styles │ │ │ ├── _bootstrap-overrides.scss │ │ │ ├── _button.scss │ │ │ ├── _form.scss │ │ │ ├── _toastr.scss │ │ │ ├── _utilities.scss │ │ │ ├── _variables.scss │ │ │ └── globals.scss │ ├── index.css │ ├── index.html │ ├── index.js │ └── screens │ │ └── Basket │ │ ├── components │ │ └── BasketStatus.js │ │ ├── containers │ │ └── BasketContainer.js │ │ └── services │ │ └── BasketService.js ├── webpack.config.js └── yarn.lock ├── mf-catalog-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src │ ├── App.jsx │ ├── assets │ │ ├── .gitkeep │ │ ├── fonts │ │ │ ├── Oswald-Bold.eot │ │ │ ├── Oswald-Bold.svg │ │ │ ├── Oswald-Bold.ttf │ │ │ ├── Oswald-Bold.woff │ │ │ ├── Oswald-Bold.woff2 │ │ │ ├── Oswald-ExtraLight.eot │ │ │ ├── Oswald-ExtraLight.svg │ │ │ ├── Oswald-ExtraLight.ttf │ │ │ ├── Oswald-ExtraLight.woff │ │ │ ├── Oswald-ExtraLight.woff2 │ │ │ ├── Oswald-Light.eot │ │ │ ├── Oswald-Light.svg │ │ │ ├── Oswald-Light.ttf │ │ │ ├── Oswald-Light.woff │ │ │ ├── Oswald-Light.woff2 │ │ │ ├── Oswald-Medium.eot │ │ │ ├── Oswald-Medium.svg │ │ │ ├── Oswald-Medium.ttf │ │ │ ├── Oswald-Medium.woff │ │ │ ├── Oswald-Medium.woff2 │ │ │ ├── Oswald-Regular.eot │ │ │ ├── Oswald-Regular.svg │ │ │ ├── Oswald-Regular.ttf │ │ │ ├── Oswald-Regular.woff │ │ │ ├── Oswald-Regular.woff2 │ │ │ ├── Oswald-SemiBold.eot │ │ │ ├── Oswald-SemiBold.svg │ │ │ ├── Oswald-SemiBold.ttf │ │ │ ├── Oswald-SemiBold.woff │ │ │ └── Oswald-SemiBold.woff2 │ │ ├── images │ │ │ ├── add.svg │ │ │ ├── arrow-right.svg │ │ │ ├── cart.svg │ │ │ ├── delete.svg │ │ │ ├── header.jpg │ │ │ ├── logo.svg │ │ │ ├── logo_color.svg │ │ │ ├── minus.svg │ │ │ ├── plus.svg │ │ │ ├── refresh.svg │ │ │ └── user.svg │ │ └── styles │ │ │ ├── _bootstrap-overrides.scss │ │ │ ├── _button.scss │ │ │ ├── _form.scss │ │ │ ├── _toastr.scss │ │ │ ├── _utilities.scss │ │ │ ├── _variables.scss │ │ │ └── globals.scss │ ├── index.css │ ├── index.html │ ├── index.js │ └── pages │ │ └── Catalog │ │ ├── CatalogContainer.js │ │ └── CatalogContainer.scss ├── webpack.config.js └── yarn.lock ├── mf-notifications-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src │ ├── App.jsx │ ├── index.css │ ├── index.html │ └── index.js └── webpack.config.js ├── mf-orders-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src │ ├── App.jsx │ ├── index.css │ ├── index.html │ └── index.js └── webpack.config.js ├── mf-shared-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src │ ├── App.jsx │ ├── components │ │ └── Header.js │ ├── index.css │ ├── index.html │ └── index.js ├── webpack.config.js └── yarn.lock └── mf-shop-app ├── .babelrc ├── .gitattributes ├── .gitignore ├── Dockerfile ├── README.md ├── package.json ├── src ├── App.jsx ├── assets │ ├── .gitkeep │ ├── fonts │ │ ├── Oswald-Bold.eot │ │ ├── Oswald-Bold.svg │ │ ├── Oswald-Bold.ttf │ │ ├── Oswald-Bold.woff │ │ ├── Oswald-Bold.woff2 │ │ ├── Oswald-ExtraLight.eot │ │ ├── Oswald-ExtraLight.svg │ │ ├── Oswald-ExtraLight.ttf │ │ ├── Oswald-ExtraLight.woff │ │ ├── Oswald-ExtraLight.woff2 │ │ ├── Oswald-Light.eot │ │ ├── Oswald-Light.svg │ │ ├── Oswald-Light.ttf │ │ ├── Oswald-Light.woff │ │ ├── Oswald-Light.woff2 │ │ ├── Oswald-Medium.eot │ │ ├── Oswald-Medium.svg │ │ ├── Oswald-Medium.ttf │ │ ├── Oswald-Medium.woff │ │ ├── Oswald-Medium.woff2 │ │ ├── Oswald-Regular.eot │ │ ├── Oswald-Regular.svg │ │ ├── Oswald-Regular.ttf │ │ ├── Oswald-Regular.woff │ │ ├── Oswald-Regular.woff2 │ │ ├── Oswald-SemiBold.eot │ │ ├── Oswald-SemiBold.svg │ │ ├── Oswald-SemiBold.ttf │ │ ├── Oswald-SemiBold.woff │ │ └── Oswald-SemiBold.woff2 │ └── images │ │ ├── add.svg │ │ ├── arrow-right.svg │ │ ├── cart.svg │ │ ├── delete.svg │ │ ├── header.jpg │ │ ├── logo.svg │ │ ├── logo_color.svg │ │ ├── minus.svg │ │ ├── plus.svg │ │ ├── refresh.svg │ │ └── user.svg ├── index.css ├── index.html └── index.js ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | .env.production 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | .parcel-cache 80 | 81 | # Next.js build output 82 | .next 83 | out 84 | 85 | # Nuxt.js build / generate output 86 | .nuxt 87 | dist 88 | 89 | # Gatsby files 90 | .cache/ 91 | # Comment in the public line in if your project uses Gatsby and not Next.js 92 | # https://nextjs.org/blog/next-9-1#public-directory-support 93 | # public 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # FuseBox cache 102 | .fusebox/ 103 | 104 | # DynamoDB Local files 105 | .dynamodb/ 106 | 107 | # TernJS port file 108 | .tern-port 109 | 110 | # Stores VSCode versions used for testing VSCode extensions 111 | .vscode-test 112 | 113 | # yarn v2 114 | .yarn/cache 115 | .yarn/unplugged 116 | .yarn/build-state.yml 117 | .yarn/install-state.gz 118 | .pnp.* -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Md. Atiqul Islam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 7 | 10 | [![Issues][issues-shield]][issues-url] 11 | [![MIT License][license-shield]][license-url] 12 | [![LinkedIn][linkedin-shield]][linkedin-url] 13 | 14 | 15 |
16 |
17 | 18 | Logo 19 | 20 | 21 |

Micro-frontend Applications

22 | 23 |

24 | Module Federation is a powerful tool for implementing micro-frontend architecture in frontend applications. It allows different teams to build and deploy their own independent frontend components, which can then be dynamically loaded and composed together at runtime within a larger application. 25 |
26 | Explore the docs » 27 |
28 |
29 | Report Bug 30 | · 31 | Request Feature 32 |

33 |
34 | 35 | 36 |
37 | Table of Contents 38 |
    39 |
  1. 40 | About The Project 41 | 44 |
    2. 45 |
  2. 46 | Getting Started 47 | 51 |
    3. 52 |
  3. Usage
    4. 53 |
  4. Roadmap
    5. 54 |
  5. Contributing
    6. 55 |
  6. License
    7. 56 |
  7. Contact
    8. 57 |
  8. Acknowledgments
    9. 58 |
59 |
60 | 61 | 62 | ## About The Project 63 | Module Federation gives us a new method of sharing code between applications at runtime. To do so, we need to envision a fairly common scenario like [eShopContainers](https://github.com/dotnet-architecture/eShopOnContainers) with Micro-frontend Architecture. 64 | [![Product Name Screen Shot][microfrontend-screenshot]](images/MicroFrontend-Architecture-v1.png) 65 | 66 | Here's why: 67 | * A containerized architecture is a scalable solution for backend 68 | * But, Client apps (Single Page Architecture) are still in monolithic architecture 69 | * For client apps, multiple teams should work independently 70 | * For client apps, product and build management should be independent 71 | * Duplicate UI components, business logic, i18n strings, etc. 72 | 73 | #### [Module Federation]((https://module-federation.myshopify.com/)) is new solution for micro-frontend architecture! 74 | * Code remains in-place - For one of the applications, the rendering code remains in-place and is not modified. 75 | * No framework - As long as both applications are using the same view framework, then they can both use the same code. 76 | * No code loaders - Micro-FE frameworks are often coupled with code loaders, like SystemJS, that work in parallel with the babel and Webpack imports that engineers are used to. Importing a federated module works just like any normal import. It just happens to be remote. 77 | * Applies to any Javascript - Where Micro-FE frameworks work on UI components, Module Federation can be used for any type of Javascript; UI components, business logic, i18n strings, etc. Any Javascript can be shared. 78 | * Applies beyond Javascript - While many frameworks focus heavily on the Javascript aspects, Module Federation will work with files that Webpack is currently able to process today such as images, JSON, and CSS. If you can require it, it can be federated. 79 | * Universal - Module Federation can be used on any platform that uses the Javascript runtime such as Browser, Node, Electron, or Web Worker. 80 | 81 |

(back to top)

82 | 83 | ### Built With 84 | 85 | This section should list any major frameworks/libraries used to bootstrap the project. 86 | 87 | * [React.js](https://reactjs.org/) 88 | * [React Query](https://react-query.tanstack.com/) 89 | * [Webpack](https://webpack.js.org/) 90 | * [Module Federation](https://webpack.js.org/concepts/module-federation/) 91 | 92 |

(back to top)

93 | 94 | 95 | ## Getting Started 96 | 97 | Instructions on setting up the project locally. 98 | 99 | ### Prerequisites 100 | * Docker Desktop - Make sure you have [installed](https://docs.docker.com/docker-for-windows/install/) and [configured](https://github.com/dotnet-architecture/eShopOnContainers/wiki/Windows-setup#configure-docker) docker in your environment. 101 | * Run eShopContainers - follow the [instructions](https://github.com/dotnet-architecture/eShopOnContainers/blob/dev/README.md#getting-started) 102 | ```sh 103 | docker-compose build 104 | docker-compose up 105 | ``` 106 | 107 | * Node.js 108 | * npm 109 | ```sh 110 | npm install npm@latest -g 111 | ``` 112 | * yarn 113 | ```sh 114 | npm install yarn -g 115 | ``` 116 | 117 | ### How to Run 118 | 119 | _Below is the instructions of how you can install and run the app._ 120 | 121 | 1. Clone the repo 122 | ```sh 123 | git clone https://github.com/imatiqul/eShopFederated.git 124 | ``` 125 | 2. Go to src/eShopMF 126 | ```sh 127 | cd src/eShopMF 128 | ``` 129 | 3. Run mf-basket-app 130 | ```sh 131 | cd mf-basket-app 132 | yarn 133 | yarn start 134 | ``` 135 | 4. Run mf-shared-app 136 | ```sh 137 | cd mf-shared-app 138 | yarn 139 | yarn start 140 | ``` 141 | 5. Run mf-catalog-app 142 | ```sh 143 | cd mf-catalog-app 144 | yarn 145 | yarn start 146 | ``` 147 | 6. Run mf-shop-app 148 | ```sh 149 | cd mf-shop-app 150 | yarn 151 | yarn start 152 | ``` 153 | [![Product Name Screen Shot][product-screenshot]](images/eShopFederated.jpg) 154 |

(back to top)

155 | 156 | 157 | ## Usage 158 | 159 |

(back to top)

160 | 161 | 162 | ## Roadmap 163 | 164 |

(back to top)

165 | 166 | 167 | ## Contributing 168 | 169 | 1. Fork the Project 170 | 2. Create your Feature Branch (`git checkout -b feature/mf-feature`) 171 | 3. Commit your Changes (`git commit -m 'Add some mf-feature'`) 172 | 4. Push to the Branch (`git push origin feature/mf-feature`) 173 | 5. Open a Pull Request 174 | 175 |

(back to top)

176 | 177 | 178 | ## License 179 | 180 | Distributed under the MIT License. See `LICENSE.txt` for more information. 181 | 182 |

(back to top)

183 | 184 | 185 | ## Contact 186 | 187 | ATIQUL ISLAM - [@ATIQ](https://imatiqul.com/) - islam.md.atiqul@gmail.com 188 | 189 | Project Link: [https://github.com/imatiqul/micro-frontend-react](https://github.com/imatiqul/micro-frontend-react) 190 | 191 |

(back to top)

192 | 193 | 194 | ## Acknowledgments 195 | 196 |

(back to top)

197 | 198 | 199 | 200 | [issues-shield]: https://img.shields.io/github/issues/imatiqul/eShopFederated.svg?style=for-the-badge 201 | [issues-url]: https://github.com/imatiqul/micro-frontend-react/issues 202 | [license-shield]: https://img.shields.io/github/license/imatiqul/micro-frontend-react?style=for-the-badge 203 | [license-url]: https://github.com/imatiqul/micro-frontend-react/blob/master/LICENSE.txt 204 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555 205 | [linkedin-url]: https://www.linkedin.com/in/mdatiqulislam/ 206 | [microfrontend-screenshot]: images/MicroFrontend-Architecture-v1.png 207 | [microservice-screenshot]: images/eShopOnContainers-architecture.png 208 | [product-screenshot]: images/eShopFederated.jpg 209 | -------------------------------------------------------------------------------- /images/MicroFrontend-Architecture-v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/images/MicroFrontend-Architecture-v1.png -------------------------------------------------------------------------------- /images/eShopFederated.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/images/eShopFederated.jpg -------------------------------------------------------------------------------- /images/eShopOnContainers-architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/images/eShopOnContainers-architecture.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/images/logo.png -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5503 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/README.md: -------------------------------------------------------------------------------- 1 | A react web app for displaying shpping carts using Module Federation. -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basket", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5503 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-basket", 11 | "docker:run": "docker run -p 5503:5503 web-mf-basket" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "style-loader": "2.0.0", 28 | "svg-url-loader": "^7.1.1", 29 | "url-loader": "^4.1.1", 30 | "webpack": "5.31.2", 31 | "webpack-cli": "^4.9.1", 32 | "webpack-dev-server": "3.11.2" 33 | }, 34 | "dependencies": { 35 | "@babel/runtime": "^7.13.10", 36 | "react": "^17.0.2", 37 | "react-dom": "^17.0.2", 38 | "bootstrap": "^5.1.3", 39 | "axios": "^0.21.1", 40 | "broadcast-channel": "^3.4.1", 41 | "node-sass": "^6.0.1", 42 | "react-query": "^3.5.0", 43 | "sass-loader": "^12.3.0", 44 | "stop-runaway-react-effects": "^1.2.0", 45 | "styled-components": "^4.3.2" 46 | } 47 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import BasketStatus from "./screens/Basket/components/BasketStatus"; 5 | 6 | import "./index.css"; 7 | 8 | const App = () =>
9 | 10 |
11 | 12 |
13 |
; 14 | 15 | ReactDOM.render(, document.getElementById("app")); 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Bold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Light.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Medium.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-Regular.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/fonts/Oswald-SemiBold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Add to cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/X 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/assets/images/header.jpg -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Minus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Plus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Refresh 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/images/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/User 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_bootstrap-overrides.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | $primary: $color-primary; 4 | $secondary: $color-secondary; 5 | $warning: $color-primary; 6 | 7 | //button 8 | $btn-border-radius: 0; 9 | $btn-white-space: nowrap; 10 | 11 | //form 12 | $input-border-radius: 0; 13 | $input-box-shadow: none; 14 | $input-border-color: $color-secondary; -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: transparent; 3 | border-width: 3px; 4 | font-size: $font-size-s; 5 | font-weight: $font-weight-normal; 6 | min-width: 15rem; 7 | text-transform: uppercase; 8 | 9 | &:focus { 10 | box-shadow: none; 11 | opacity: .7; 12 | } 13 | 14 | &:hover { 15 | color: $color-brightest !important; 16 | } 17 | 18 | &:active:focus { 19 | box-shadow: none !important; 20 | } 21 | 22 | &:visited { 23 | text-decoration: none; 24 | } 25 | 26 | &:disabled { 27 | background-color: transparent; 28 | border-color: $color-secondary-bright; 29 | color: $color-secondary-bright; 30 | cursor: not-allowed; 31 | opacity: 1; 32 | } 33 | 34 | &-primary { 35 | border-color: $color-primary; 36 | color: $color-primary; 37 | } 38 | 39 | &-secondary { 40 | border-color: $color-secondary; 41 | color: $color-secondary; 42 | } 43 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_form.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | &-control { 3 | border-width: 2px; 4 | border-color: $color-secondary; 5 | font-size: $font-size-m; 6 | font-weight: $font-weight-semilight; 7 | 8 | &:hover { 9 | border-color: $color-secondary-brighter; 10 | } 11 | 12 | &:focus { 13 | border-color: $color-primary; 14 | box-shadow: unset; 15 | } 16 | 17 | &:visited { 18 | text-decoration: unset; 19 | } 20 | } 21 | } 22 | 23 | label { 24 | font-size: $font-size-s; 25 | margin-bottom: 0.2rem; 26 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_toastr.scss: -------------------------------------------------------------------------------- 1 | // Toast 2 | .toast-container { 3 | .ngx-toastr { 4 | border-radius: 0 !important; 5 | box-shadow: unset !important; 6 | 7 | .toast-close-button { 8 | text-shadow: none; 9 | color: color-brightest; 10 | } 11 | .toast-progress { 12 | background-color: $color-secondary; 13 | } 14 | .toast-close-button:hover, 15 | .toast-close-button:focus { 16 | color: $color-secondary; 17 | } 18 | } 19 | .ngx-toastr:hover { 20 | box-shadow: none; 21 | } 22 | } 23 | 24 | @function str-split($string, $separator) { 25 | $split-arr: (); 26 | // first index of separator in string 27 | $index: str-index($string, $separator); 28 | // loop through string 29 | @while $index != null { 30 | // get the substring from the first character to the separator 31 | $item: str-slice($string, 1, $index - 1); 32 | // push item to array 33 | $split-arr: append($split-arr, $item); 34 | // remove item and separator from string 35 | $string: str-slice($string, $index + 1); 36 | // find new index of separator 37 | $index: str-index($string, $separator); 38 | } 39 | // add the remaining string to list (the last item) 40 | $split-arr: append($split-arr, $string); 41 | 42 | @return $split-arr; 43 | } 44 | 45 | @function svg-factory($fill-color, $viewbox, $path) { 46 | $split: str-split($viewbox, ' '); 47 | $width: nth($split, 3); 48 | $height: nth($split, 4); 49 | 50 | // opacity is 0.9999 otherwise it uses a hex equivelent 51 | // firefox requires fill rgb 52 | @return "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='" + $viewbox + 53 | "' width='" + $width + "' height='" + $height + "'%3E%3Cpath fill='" + 54 | rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; 55 | } 56 | @function svg-encode($svg) { 57 | @return 'data:image/svg+xml;charset=utf8,' + $svg; 58 | } 59 | .toast-success { 60 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/check.svg */ 61 | background-image: url(svg-encode( 62 | svg-factory( 63 | $color-brightest, 64 | '0 0 512 512', 65 | 'M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' 66 | ) 67 | )); 68 | color: $color-brightest; 69 | background-color: $color-primary; 70 | border: unset !important; 71 | } 72 | .toast-error { 73 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/times-circle.svg */ 74 | background-image: url(svg-encode( 75 | svg-factory( 76 | $color-brightest, 77 | '0 0 512 512', 78 | 'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z' 79 | ) 80 | )); 81 | color: $color-brightest; 82 | background-color: $color-primary; 83 | border: unset !important; 84 | } 85 | .toast-info { 86 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/info-circle.svg */ 87 | background-image: url(svg-encode( 88 | svg-factory( 89 | $color-brightest, 90 | '0 0 512 512', 91 | 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' 92 | ) 93 | )); 94 | color: $color-brightest; 95 | background-color: $color-primary; 96 | border: unset !important; 97 | } 98 | .toast-warning { 99 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/exclamation-triangle.svg */ 100 | background-image: url(svg-encode( 101 | svg-factory( 102 | $color-brightest, 103 | '0 0 576 512', 104 | 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' 105 | ) 106 | )); 107 | color: $color-brightest; 108 | background-color: $color-primary; 109 | border: unset !important; 110 | } 111 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_utilities.scss: -------------------------------------------------------------------------------- 1 | .u { 2 | &-text { 3 | &-uppercase { 4 | text-transform: uppercase; 5 | } 6 | } 7 | 8 | &-cursor { 9 | &-pointer { 10 | cursor: pointer; 11 | } 12 | } 13 | 14 | &-mb { 15 | &-4 { 16 | margin-bottom: 4rem; 17 | } 18 | 19 | &-5 { 20 | margin-bottom: 5rem; 21 | } 22 | } 23 | 24 | &-width { 25 | &-100 { 26 | width: 100%; 27 | } 28 | 29 | &-65 { 30 | width: 65%; 31 | } 32 | 33 | &-50 { 34 | width: 50%; 35 | } 36 | } 37 | 38 | &-minwidth { 39 | &-unset { 40 | min-width: unset !important; 41 | } 42 | } 43 | 44 | &-maxwidth { 45 | &-unset { 46 | max-width: unset !important; 47 | } 48 | } 49 | 50 | &-background { 51 | &-brightest { 52 | background-color: $color-brightest; 53 | } 54 | } 55 | 56 | &-text{ 57 | &-sm { 58 | font-size: $font-size-s; 59 | } 60 | 61 | &-lg { 62 | font-size: $font-size-l; 63 | } 64 | 65 | &-xl { 66 | font-size: $font-size-xl; 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $color-primary: #f66f61; 3 | 4 | $color-secondary: #292929; 5 | $color-secondary-bright: #81828d; 6 | $color-secondary-brighter: #979797; 7 | $color-secondary-brightest: #f3f4f3; 8 | 9 | $color-darkest: #000; 10 | $color-brightest: #fff; 11 | 12 | 13 | // Animations 14 | $animation-speed-default: .35s; 15 | $animation-speed-slow: .5s; 16 | $animation-speed-fast: .15s; 17 | 18 | // Fonts 19 | $font-weight-light: 200; 20 | $font-weight-semilight: 300; 21 | $font-weight-normal: 400; 22 | $font-weight-semibold: 600; 23 | $font-weight-bold: 700; 24 | 25 | $font-size-xs: .75rem; // 12px 26 | $font-size-s: .875rem; // 14px 27 | $font-size-m: 1rem; // 16px 28 | $font-size-l: 1.125rem; // 18px 29 | $font-size-xl: 1.25rem; // 20px 30 | $font-size-xxl: 1.5625rem; // 25px 31 | 32 | // Medias 33 | $media-screen-xxs: 360px; 34 | $media-screen-xs: 640px; 35 | $media-screen-s: 768px; 36 | $media-screen-m: 1024px; 37 | $media-screen-l: 1280px; 38 | $media-screen-xl: 1440px; 39 | $media-screen-xxl: 1680px; 40 | $media-screen-xxxl: 1920px; 41 | 42 | // Borders 43 | $border-light: 1px; 44 | 45 | // Images 46 | $image_path: '/assets/images/'; 47 | $image-arrow_down: '#{$image_path}arrow-down.png'; 48 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/assets/styles/globals.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import 'variables'; 3 | @import './bootstrap-overrides'; 4 | @import '~bootstrap/scss/bootstrap'; 5 | @import 'button'; 6 | @import 'form'; 7 | @import '~ngx-toastr/toastr-bs4-alert.scss'; 8 | @import 'toastr'; 9 | @import 'utilities'; 10 | 11 | @font-face { 12 | font-family: 'Oswald'; 13 | src: url('../assets/fonts/Oswald-Medium.eot'); 14 | src: url('../assets/fonts/Oswald-Medium.eot?#iefix') format('embedded-opentype'), 15 | url('../assets/fonts/Oswald-Medium.woff2') format('woff2'), 16 | url('../assets/fonts/Oswald-Medium.woff') format('woff'), 17 | url('../assets/fonts/Oswald-Medium.ttf') format('truetype'), 18 | url('../assets/fonts/Oswald-Medium.svg#Oswald-Medium') format('svg'); 19 | font-weight: 500; 20 | font-style: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: 'Oswald'; 25 | src: url('../assets/fonts/Oswald-ExtraLight.eot'); 26 | src: url('../assets/fonts/Oswald-ExtraLight.eot?#iefix') format('embedded-opentype'), 27 | url('../assets/fonts/Oswald-ExtraLight.woff2') format('woff2'), 28 | url('../assets/fonts/Oswald-ExtraLight.woff') format('woff'), 29 | url('../assets/fonts/Oswald-ExtraLight.ttf') format('truetype'), 30 | url('../assets/fonts/Oswald-ExtraLight.svg#Oswald-ExtraLight') format('svg'); 31 | font-weight: 200; 32 | font-style: normal; 33 | } 34 | 35 | @font-face { 36 | font-family: 'Oswald'; 37 | src: url('../assets/fonts/Oswald-Regular.eot'); 38 | src: url('../assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'), 39 | url('../assets/fonts/Oswald-Regular.woff2') format('woff2'), 40 | url('../assets/fonts/Oswald-Regular.woff') format('woff'), 41 | url('../assets/fonts/Oswald-Regular.ttf') format('truetype'), 42 | url('../assets/fonts/Oswald-Regular.svg#Oswald-Regular') format('svg'); 43 | font-weight: normal; 44 | font-style: normal; 45 | } 46 | 47 | @font-face { 48 | font-family: 'Oswald'; 49 | src: url('../assets/fonts/Oswald-Bold.eot'); 50 | src: url('../assets/fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'), 51 | url('../assets/fonts/Oswald-Bold.woff2') format('woff2'), 52 | url('../assets/fonts/Oswald-Bold.woff') format('woff'), 53 | url('../assets/fonts/Oswald-Bold.ttf') format('truetype'), 54 | url('../assets/fonts/Oswald-Bold.svg#Oswald-Bold') format('svg'); 55 | font-weight: bold; 56 | font-style: normal; 57 | } 58 | 59 | @font-face { 60 | font-family: 'Oswald'; 61 | src: url('../assets/fonts/Oswald-Light.eot'); 62 | src: url('../assets/fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'), 63 | url('../assets/fonts/Oswald-Light.woff2') format('woff2'), 64 | url('../assets/fonts/Oswald-Light.woff') format('woff'), 65 | url('../assets/fonts/Oswald-Light.ttf') format('truetype'), 66 | url('../assets/fonts/Oswald-Light.svg#Oswald-Light') format('svg'); 67 | font-weight: 300; 68 | font-style: normal; 69 | } 70 | 71 | @font-face { 72 | font-family: 'Oswald'; 73 | src: url('../assets/fonts/Oswald-SemiBold.eot'); 74 | src: url('../assets/fonts/Oswald-SemiBold.eot?#iefix') format('embedded-opentype'), 75 | url('../assets/fonts/Oswald-SemiBold.woff2') format('woff2'), 76 | url('../assets/fonts/Oswald-SemiBold.woff') format('woff'), 77 | url('../assets/fonts/Oswald-SemiBold.ttf') format('truetype'), 78 | url('../assets/fonts/Oswald-SemiBold.svg#Oswald-SemiBold') format('svg'); 79 | font-weight: 600; 80 | font-style: normal; 81 | } 82 | 83 | html, 84 | body { 85 | background-color: $color-secondary-brightest; 86 | font-family: Oswald, sans-serif; 87 | font-size: 16px; 88 | font-weight: $font-weight-normal; 89 | height: 100%; 90 | z-index: 10; 91 | } 92 | 93 | ::selection { 94 | background: rgba($color-primary, .75); 95 | } 96 | 97 | *, 98 | *::after, 99 | *::before { 100 | box-sizing: border-box; 101 | } 102 | 103 | .preloading { 104 | color: $color-primary; 105 | display: block; 106 | font-size: $font-size-xl; 107 | left: 50%; 108 | position: fixed; 109 | top: 50%; 110 | transform: translate(-50%, -50%); 111 | } 112 | 113 | select::-ms-expand { 114 | display: none; 115 | } 116 | 117 | @media screen and (min-width: 992px) { 118 | .form-input { 119 | max-width: 360px; 120 | width: 360px; 121 | } 122 | } 123 | 124 | .form-input { 125 | border-radius: 0; 126 | height: 45px; 127 | padding: 10px; 128 | } 129 | 130 | .form-input-small { 131 | max-width: 100px !important; 132 | } 133 | 134 | .form-input-medium { 135 | width: 150px !important; 136 | } 137 | 138 | .alert { 139 | background-color: $color-secondary; 140 | border: 0; 141 | border-radius: 0; 142 | color: $color-primary; 143 | font-size: $font-size-xl; 144 | } 145 | 146 | .divider { 147 | border-top: 3px solid $color-secondary-brightest; 148 | 149 | &--bottom { 150 | border-top: 0; 151 | border-bottom: 3px solid $color-secondary-brightest; 152 | } 153 | } 154 | 155 | h1 { 156 | font-size: $font-size-xxl; 157 | font-weight: $font-weight-normal; 158 | text-transform: uppercase; 159 | } 160 | 161 | h2 { 162 | font-size: $font-size-xl; 163 | font-weight: $font-weight-normal; 164 | text-transform: uppercase; 165 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | color:#191970; 4 | font-size:xx-large; 5 | border-color: #E6E6FA; 6 | border-width: 2px; 7 | border-style: solid; 8 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | 3 | import("./App"); 4 | -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/screens/Basket/components/BasketStatus.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import styled from 'styled-components'; 3 | 4 | const BasketStatusLink = styled.a` 5 | cursor: pointer; 6 | display: inline-block; 7 | float: right; 8 | position: relative; 9 | transition: all .35s; 10 | 11 | :hover -badge { 12 | transform: scale(1.2) rotate(20deg); 13 | } 14 | `; 15 | 16 | const BasketStatusImageWrapper = styled.div` 17 | height: auto; 18 | width: 1.5rem; 19 | `; 20 | 21 | const BasketStatusBadge = styled.div` 22 | background-color: #f66f61; 23 | border-radius: 50%; 24 | bottom: 0; 25 | color:#fff; 26 | display: block; 27 | font-size: .75rem; 28 | line-height: 1.2rem; 29 | height: 1.2rem; 30 | right: 0; 31 | position: absolute; 32 | text-align: center; 33 | transition: all .15s; 34 | width: 1.2rem; 35 | transform: scale(1.2) rotate(20deg); 36 | `; 37 | 38 | const BasketStatus = ({badge}) => 39 | { 40 | return ( 41 | 42 | 43 | 44 | {badge} 45 | ); 46 | } 47 | 48 | function useBadge(badge) 49 | { 50 | return badge; 51 | } 52 | 53 | export default BasketStatus; -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/screens/Basket/containers/BasketContainer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from 'styled-components'; 3 | 4 | const BasketContainer = () => 5 | { 6 | return
BasketContainer
; 7 | } 8 | 9 | export default BasketContainer; -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/src/screens/Basket/services/BasketService.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-basket-app/src/screens/Basket/services/BasketService.js -------------------------------------------------------------------------------- /src/eShopMF/mf-basket-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5503/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5503, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | { 39 | test: /\.(jpg|png)$/, 40 | use: { 41 | loader: 'url-loader', 42 | }, 43 | }, 44 | { 45 | test: /\.svg$/, 46 | use: [ 47 | { 48 | loader: 'svg-url-loader', 49 | options: { 50 | limit: 10000, 51 | }, 52 | }, 53 | ], 54 | }, 55 | ], 56 | }, 57 | 58 | plugins: [ 59 | new ModuleFederationPlugin({ 60 | name: "basket", 61 | filename: "remoteEntry.js", 62 | remotes: {}, 63 | exposes: { 64 | "./BasketStatus": "./src/screens/Basket/components/BasketStatus", 65 | "./BasketContainer": "./src/screens/Basket/containers/BasketContainer", 66 | }, 67 | shared: { 68 | ...deps, 69 | react: { 70 | singleton: true, 71 | requiredVersion: deps.react, 72 | }, 73 | "react-dom": { 74 | singleton: true, 75 | requiredVersion: deps["react-dom"], 76 | }, 77 | }, 78 | }), 79 | new HtmlWebPackPlugin({ 80 | template: "./src/index.html", 81 | }), 82 | ], 83 | }; 84 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5502 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/README.md: -------------------------------------------------------------------------------- 1 | A recat web app for fetching the catalogs and displaying in Shop using Module Federation. -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catelog", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5502 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-catalog", 11 | "docker:run": "docker run -p 5502:5502 web-mf-catalog" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "json-loader": "^0.5.7", 28 | "style-loader": "2.0.0", 29 | "svg-url-loader": "^7.1.1", 30 | "url-loader": "^4.1.1", 31 | "webpack": "5.31.2", 32 | "webpack-cli": "^4.9.1", 33 | "webpack-dev-server": "3.11.2" 34 | }, 35 | "dependencies": { 36 | "@babel/runtime": "^7.13.10", 37 | "bootstrap": "^5.1.3", 38 | "axios": "^0.21.1", 39 | "broadcast-channel": "^3.4.1", 40 | "node-sass": "^6.0.1", 41 | "react": "^17.0.2", 42 | "react-dom": "^17.0.2", 43 | "react-query": "^3.5.0", 44 | "sass-loader": "^12.3.0", 45 | "stop-runaway-react-effects": "^1.2.0", 46 | "styled-components": "^4.3.2" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import CatalogContainer from "./pages/Catalog/CatalogContainer"; 4 | import "./index.css"; 5 | 6 | const App = () => 7 | { 8 | const [basket, setBasket ] = useState({ buyerId: '', items: [] }); 9 | 10 | const addItemToBasket = (catalog) => { 11 | 12 | let _basket = { buyerId: '', items: [] }; 13 | if(basket) 14 | { 15 | _basket = basket; 16 | } 17 | 18 | let basketItem = _basket.items.find(value => value.productId == catalog.productId); 19 | 20 | if (basketItem) { 21 | basketItem.quantity++; 22 | } else { 23 | _basket.items.push({ 24 | pictureUrl: catalog.pictureUri, 25 | productId: catalog.id, 26 | productName: catalog.name, 27 | quantity: 1, 28 | unitPrice: catalog.price, 29 | id: Date.now(), 30 | oldUnitPrice: 0 31 | }); 32 | } 33 | 34 | setBasket(_basket); 35 | } 36 | 37 | return (
38 |
); 39 | } 40 | 41 | 42 | ReactDOM.render(, document.getElementById("app")); 43 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Bold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Light.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Medium.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-Regular.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/fonts/Oswald-SemiBold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Add to cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/X 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-catalog-app/src/assets/images/header.jpg -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Minus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Plus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Refresh 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/images/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/User 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_bootstrap-overrides.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | $primary: $color-primary; 4 | $secondary: $color-secondary; 5 | $warning: $color-primary; 6 | 7 | //button 8 | $btn-border-radius: 0; 9 | $btn-white-space: nowrap; 10 | 11 | //form 12 | $input-border-radius: 0; 13 | $input-box-shadow: none; 14 | $input-border-color: $color-secondary; -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: transparent; 3 | border-width: 3px; 4 | font-size: $font-size-s; 5 | font-weight: $font-weight-normal; 6 | min-width: 15rem; 7 | text-transform: uppercase; 8 | 9 | &:focus { 10 | box-shadow: none; 11 | opacity: .7; 12 | } 13 | 14 | &:hover { 15 | color: $color-brightest !important; 16 | } 17 | 18 | &:active:focus { 19 | box-shadow: none !important; 20 | } 21 | 22 | &:visited { 23 | text-decoration: none; 24 | } 25 | 26 | &:disabled { 27 | background-color: transparent; 28 | border-color: $color-secondary-bright; 29 | color: $color-secondary-bright; 30 | cursor: not-allowed; 31 | opacity: 1; 32 | } 33 | 34 | &-primary { 35 | border-color: $color-primary; 36 | color: $color-primary; 37 | } 38 | 39 | &-secondary { 40 | border-color: $color-secondary; 41 | color: $color-secondary; 42 | } 43 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_form.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | &-control { 3 | border-width: 2px; 4 | border-color: $color-secondary; 5 | font-size: $font-size-m; 6 | font-weight: $font-weight-semilight; 7 | 8 | &:hover { 9 | border-color: $color-secondary-brighter; 10 | } 11 | 12 | &:focus { 13 | border-color: $color-primary; 14 | box-shadow: unset; 15 | } 16 | 17 | &:visited { 18 | text-decoration: unset; 19 | } 20 | } 21 | } 22 | 23 | label { 24 | font-size: $font-size-s; 25 | margin-bottom: 0.2rem; 26 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_toastr.scss: -------------------------------------------------------------------------------- 1 | // Toast 2 | .toast-container { 3 | .ngx-toastr { 4 | border-radius: 0 !important; 5 | box-shadow: unset !important; 6 | 7 | .toast-close-button { 8 | text-shadow: none; 9 | color: color-brightest; 10 | } 11 | .toast-progress { 12 | background-color: $color-secondary; 13 | } 14 | .toast-close-button:hover, 15 | .toast-close-button:focus { 16 | color: $color-secondary; 17 | } 18 | } 19 | .ngx-toastr:hover { 20 | box-shadow: none; 21 | } 22 | } 23 | 24 | @function str-split($string, $separator) { 25 | $split-arr: (); 26 | // first index of separator in string 27 | $index: str-index($string, $separator); 28 | // loop through string 29 | @while $index != null { 30 | // get the substring from the first character to the separator 31 | $item: str-slice($string, 1, $index - 1); 32 | // push item to array 33 | $split-arr: append($split-arr, $item); 34 | // remove item and separator from string 35 | $string: str-slice($string, $index + 1); 36 | // find new index of separator 37 | $index: str-index($string, $separator); 38 | } 39 | // add the remaining string to list (the last item) 40 | $split-arr: append($split-arr, $string); 41 | 42 | @return $split-arr; 43 | } 44 | 45 | @function svg-factory($fill-color, $viewbox, $path) { 46 | $split: str-split($viewbox, ' '); 47 | $width: nth($split, 3); 48 | $height: nth($split, 4); 49 | 50 | // opacity is 0.9999 otherwise it uses a hex equivelent 51 | // firefox requires fill rgb 52 | @return "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='" + $viewbox + 53 | "' width='" + $width + "' height='" + $height + "'%3E%3Cpath fill='" + 54 | rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; 55 | } 56 | @function svg-encode($svg) { 57 | @return 'data:image/svg+xml;charset=utf8,' + $svg; 58 | } 59 | .toast-success { 60 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/check.svg */ 61 | background-image: url(svg-encode( 62 | svg-factory( 63 | $color-brightest, 64 | '0 0 512 512', 65 | 'M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' 66 | ) 67 | )); 68 | color: $color-brightest; 69 | background-color: $color-primary; 70 | border: unset !important; 71 | } 72 | .toast-error { 73 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/times-circle.svg */ 74 | background-image: url(svg-encode( 75 | svg-factory( 76 | $color-brightest, 77 | '0 0 512 512', 78 | 'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z' 79 | ) 80 | )); 81 | color: $color-brightest; 82 | background-color: $color-primary; 83 | border: unset !important; 84 | } 85 | .toast-info { 86 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/info-circle.svg */ 87 | background-image: url(svg-encode( 88 | svg-factory( 89 | $color-brightest, 90 | '0 0 512 512', 91 | 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' 92 | ) 93 | )); 94 | color: $color-brightest; 95 | background-color: $color-primary; 96 | border: unset !important; 97 | } 98 | .toast-warning { 99 | /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/exclamation-triangle.svg */ 100 | background-image: url(svg-encode( 101 | svg-factory( 102 | $color-brightest, 103 | '0 0 576 512', 104 | 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' 105 | ) 106 | )); 107 | color: $color-brightest; 108 | background-color: $color-primary; 109 | border: unset !important; 110 | } 111 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_utilities.scss: -------------------------------------------------------------------------------- 1 | .u { 2 | &-text { 3 | &-uppercase { 4 | text-transform: uppercase; 5 | } 6 | } 7 | 8 | &-cursor { 9 | &-pointer { 10 | cursor: pointer; 11 | } 12 | } 13 | 14 | &-mb { 15 | &-4 { 16 | margin-bottom: 4rem; 17 | } 18 | 19 | &-5 { 20 | margin-bottom: 5rem; 21 | } 22 | } 23 | 24 | &-width { 25 | &-100 { 26 | width: 100%; 27 | } 28 | 29 | &-65 { 30 | width: 65%; 31 | } 32 | 33 | &-50 { 34 | width: 50%; 35 | } 36 | } 37 | 38 | &-minwidth { 39 | &-unset { 40 | min-width: unset !important; 41 | } 42 | } 43 | 44 | &-maxwidth { 45 | &-unset { 46 | max-width: unset !important; 47 | } 48 | } 49 | 50 | &-background { 51 | &-brightest { 52 | background-color: $color-brightest; 53 | } 54 | } 55 | 56 | &-text{ 57 | &-sm { 58 | font-size: $font-size-s; 59 | } 60 | 61 | &-lg { 62 | font-size: $font-size-l; 63 | } 64 | 65 | &-xl { 66 | font-size: $font-size-xl; 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $color-primary: #f66f61; 3 | 4 | $color-secondary: #292929; 5 | $color-secondary-bright: #81828d; 6 | $color-secondary-brighter: #979797; 7 | $color-secondary-brightest: #f3f4f3; 8 | 9 | $color-darkest: #000; 10 | $color-brightest: #fff; 11 | 12 | 13 | // Animations 14 | $animation-speed-default: .35s; 15 | $animation-speed-slow: .5s; 16 | $animation-speed-fast: .15s; 17 | 18 | // Fonts 19 | $font-weight-light: 200; 20 | $font-weight-semilight: 300; 21 | $font-weight-normal: 400; 22 | $font-weight-semibold: 600; 23 | $font-weight-bold: 700; 24 | 25 | $font-size-xs: .75rem; // 12px 26 | $font-size-s: .875rem; // 14px 27 | $font-size-m: 1rem; // 16px 28 | $font-size-l: 1.125rem; // 18px 29 | $font-size-xl: 1.25rem; // 20px 30 | $font-size-xxl: 1.5625rem; // 25px 31 | 32 | // Medias 33 | $media-screen-xxs: 360px; 34 | $media-screen-xs: 640px; 35 | $media-screen-s: 768px; 36 | $media-screen-m: 1024px; 37 | $media-screen-l: 1280px; 38 | $media-screen-xl: 1440px; 39 | $media-screen-xxl: 1680px; 40 | $media-screen-xxxl: 1920px; 41 | 42 | // Borders 43 | $border-light: 1px; 44 | 45 | // Images 46 | $image_path: '/assets/images/'; 47 | $image-arrow_down: '#{$image_path}arrow-down.png'; 48 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/assets/styles/globals.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import 'variables'; 3 | @import './bootstrap-overrides'; 4 | @import '~bootstrap/scss/bootstrap'; 5 | @import 'button'; 6 | @import 'form'; 7 | @import '~ngx-toastr/toastr-bs4-alert.scss'; 8 | @import 'toastr'; 9 | @import 'utilities'; 10 | 11 | @font-face { 12 | font-family: 'Oswald'; 13 | src: url('../assets/fonts/Oswald-Medium.eot'); 14 | src: url('../assets/fonts/Oswald-Medium.eot?#iefix') format('embedded-opentype'), 15 | url('../assets/fonts/Oswald-Medium.woff2') format('woff2'), 16 | url('../assets/fonts/Oswald-Medium.woff') format('woff'), 17 | url('../assets/fonts/Oswald-Medium.ttf') format('truetype'), 18 | url('../assets/fonts/Oswald-Medium.svg#Oswald-Medium') format('svg'); 19 | font-weight: 500; 20 | font-style: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: 'Oswald'; 25 | src: url('../assets/fonts/Oswald-ExtraLight.eot'); 26 | src: url('../assets/fonts/Oswald-ExtraLight.eot?#iefix') format('embedded-opentype'), 27 | url('../assets/fonts/Oswald-ExtraLight.woff2') format('woff2'), 28 | url('../assets/fonts/Oswald-ExtraLight.woff') format('woff'), 29 | url('../assets/fonts/Oswald-ExtraLight.ttf') format('truetype'), 30 | url('../assets/fonts/Oswald-ExtraLight.svg#Oswald-ExtraLight') format('svg'); 31 | font-weight: 200; 32 | font-style: normal; 33 | } 34 | 35 | @font-face { 36 | font-family: 'Oswald'; 37 | src: url('../assets/fonts/Oswald-Regular.eot'); 38 | src: url('../assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'), 39 | url('../assets/fonts/Oswald-Regular.woff2') format('woff2'), 40 | url('../assets/fonts/Oswald-Regular.woff') format('woff'), 41 | url('../assets/fonts/Oswald-Regular.ttf') format('truetype'), 42 | url('../assets/fonts/Oswald-Regular.svg#Oswald-Regular') format('svg'); 43 | font-weight: normal; 44 | font-style: normal; 45 | } 46 | 47 | @font-face { 48 | font-family: 'Oswald'; 49 | src: url('../assets/fonts/Oswald-Bold.eot'); 50 | src: url('../assets/fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'), 51 | url('../assets/fonts/Oswald-Bold.woff2') format('woff2'), 52 | url('../assets/fonts/Oswald-Bold.woff') format('woff'), 53 | url('../assets/fonts/Oswald-Bold.ttf') format('truetype'), 54 | url('../assets/fonts/Oswald-Bold.svg#Oswald-Bold') format('svg'); 55 | font-weight: bold; 56 | font-style: normal; 57 | } 58 | 59 | @font-face { 60 | font-family: 'Oswald'; 61 | src: url('../assets/fonts/Oswald-Light.eot'); 62 | src: url('../assets/fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'), 63 | url('../assets/fonts/Oswald-Light.woff2') format('woff2'), 64 | url('../assets/fonts/Oswald-Light.woff') format('woff'), 65 | url('../assets/fonts/Oswald-Light.ttf') format('truetype'), 66 | url('../assets/fonts/Oswald-Light.svg#Oswald-Light') format('svg'); 67 | font-weight: 300; 68 | font-style: normal; 69 | } 70 | 71 | @font-face { 72 | font-family: 'Oswald'; 73 | src: url('../assets/fonts/Oswald-SemiBold.eot'); 74 | src: url('../assets/fonts/Oswald-SemiBold.eot?#iefix') format('embedded-opentype'), 75 | url('../assets/fonts/Oswald-SemiBold.woff2') format('woff2'), 76 | url('../assets/fonts/Oswald-SemiBold.woff') format('woff'), 77 | url('../assets/fonts/Oswald-SemiBold.ttf') format('truetype'), 78 | url('../assets/fonts/Oswald-SemiBold.svg#Oswald-SemiBold') format('svg'); 79 | font-weight: 600; 80 | font-style: normal; 81 | } 82 | 83 | html, 84 | body { 85 | background-color: $color-secondary-brightest; 86 | font-family: Oswald, sans-serif; 87 | font-size: 16px; 88 | font-weight: $font-weight-normal; 89 | height: 100%; 90 | z-index: 10; 91 | } 92 | 93 | ::selection { 94 | background: rgba($color-primary, .75); 95 | } 96 | 97 | *, 98 | *::after, 99 | *::before { 100 | box-sizing: border-box; 101 | } 102 | 103 | .preloading { 104 | color: $color-primary; 105 | display: block; 106 | font-size: $font-size-xl; 107 | left: 50%; 108 | position: fixed; 109 | top: 50%; 110 | transform: translate(-50%, -50%); 111 | } 112 | 113 | select::-ms-expand { 114 | display: none; 115 | } 116 | 117 | @media screen and (min-width: 992px) { 118 | .form-input { 119 | max-width: 360px; 120 | width: 360px; 121 | } 122 | } 123 | 124 | .form-input { 125 | border-radius: 0; 126 | height: 45px; 127 | padding: 10px; 128 | } 129 | 130 | .form-input-small { 131 | max-width: 100px !important; 132 | } 133 | 134 | .form-input-medium { 135 | width: 150px !important; 136 | } 137 | 138 | .alert { 139 | background-color: $color-secondary; 140 | border: 0; 141 | border-radius: 0; 142 | color: $color-primary; 143 | font-size: $font-size-xl; 144 | } 145 | 146 | .divider { 147 | border-top: 3px solid $color-secondary-brightest; 148 | 149 | &--bottom { 150 | border-top: 0; 151 | border-bottom: 3px solid $color-secondary-brightest; 152 | } 153 | } 154 | 155 | h1 { 156 | font-size: $font-size-xxl; 157 | font-weight: $font-weight-normal; 158 | text-transform: uppercase; 159 | } 160 | 161 | h2 { 162 | font-size: $font-size-xl; 163 | font-weight: $font-weight-normal; 164 | text-transform: uppercase; 165 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | color:#4B0082; 4 | border-color: #F5F5F5; 5 | border-width: 2px; 6 | border-style: solid; 7 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | 3 | import("./App"); 4 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/pages/Catalog/CatalogContainer.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import { 4 | useQuery, 5 | useQueryClient, 6 | QueryClient, 7 | QueryClientProvider 8 | } from "react-query"; 9 | import { ReactQueryDevtools } from "react-query/devtools"; 10 | import "./CatalogContainer.scss"; 11 | 12 | const queryClient = new QueryClient(); 13 | 14 | const CatalogContainer = ({addItemToBasket }) => 15 | { 16 | 17 | return ( 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | function useCatalogs() { 26 | return useQuery("catalogs", async () => { 27 | const { data } = await axios.get( 28 | "http://host.docker.internal:5202/c/api/v1/catalog/items?pageIndex=0&pageSize=14" 29 | , { crossdomain: true }); 30 | return data; 31 | }); 32 | } 33 | 34 | // function useAddItemToBasket(catalog) { 35 | // let basket = { buyerId: '', items: [] }; 36 | // basket.items.push(catalog); 37 | // let url = 'http://host.docker.internal:5202/b/api/v1/basket/'; 38 | 39 | // const headers = { 40 | // 'authorization': 'Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjZCN0FDQzUyMDMwNUJGREI0RjcyNTJEQUVCMjE3N0NDMDkxRkFBRTEiLCJ0eXAiOiJhdCtqd3QiLCJ4NXQiOiJhM3JNVWdNRnY5dFBjbExhNnlGM3pBa2ZxdUUifQ.eyJuYmYiOjE2MzcwMDczNjAsImV4cCI6MTYzNzAxMDk2MCwiaXNzIjoibnVsbCIsImF1ZCI6WyJvcmRlcnMiLCJiYXNrZXQiLCJ3ZWJzaG9wcGluZ2FnZyIsIm9yZGVycy5zaWduYWxyaHViIl0sImNsaWVudF9pZCI6ImpzIiwic3ViIjoiNmY0NzlmYjYtMTFlNi00YTdjLTllMjUtYzQzY2I5Yzc1ZjQ2IiwiYXV0aF90aW1lIjoxNjM3MDA3MzYwLCJpZHAiOiJsb2NhbCIsInByZWZlcnJlZF91c2VybmFtZSI6ImRlbW91c2VyQG1pY3Jvc29mdC5jb20iLCJ1bmlxdWVfbmFtZSI6ImRlbW91c2VyQG1pY3Jvc29mdC5jb20iLCJuYW1lIjoiRGVtb1VzZXIiLCJsYXN0X25hbWUiOiJEZW1vTGFzdE5hbWUiLCJjYXJkX251bWJlciI6IjQwMTI4ODg4ODg4ODE4ODEiLCJjYXJkX2hvbGRlciI6IkRlbW9Vc2VyIiwiY2FyZF9zZWN1cml0eV9udW1iZXIiOiI1MzUiLCJjYXJkX2V4cGlyYXRpb24iOiIxMi8yMSIsImFkZHJlc3NfY2l0eSI6IlJlZG1vbmQiLCJhZGRyZXNzX2NvdW50cnkiOiJVLlMuIiwiYWRkcmVzc19zdGF0ZSI6IldBIiwiYWRkcmVzc19zdHJlZXQiOiIxNTcwMyBORSA2MXN0IEN0IiwiYWRkcmVzc196aXBfY29kZSI6Ijk4MDUyIiwiZW1haWwiOiJkZW1vdXNlckBtaWNyb3NvZnQuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJwaG9uZV9udW1iZXIiOiIxMjM0NTY3ODkwIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwic2NvcGUiOlsib3BlbmlkIiwicHJvZmlsZSIsIm9yZGVycyIsImJhc2tldCIsIndlYnNob3BwaW5nYWdnIiwib3JkZXJzLnNpZ25hbHJodWIiXSwiYW1yIjpbInB3ZCJdfQ.HHdBdiyDBtRUn_B_fnBmmh05T-1tOrwrpn1_Rv4eMjUTYstSyyxPbGZ_tZkbZmJBCDLXm4Lx6HyxFipgyXls_qXtsHkKcppqTfDdiWWNvZ4q7UNdxqF3vrjD-BLcARxryMd3QFYB3-IefMk0vJnsng33UGr4oU_AZMiO1R6jN-O96I97K-455QLO-bWDOKkeeEj9jfGcKPY6WLE_FMJzB6JXbueSYotG5WMnOJXf2wgvfSKFpZ9Pg6fQNGAiolcKKWLNM6g8Omph68e_15Z1WU86f6NOlMi-wKsyDBis-yd40fQS75R8ZtPyZStUe8j9XIdKcYUqA5IX1J3C_lyVOg', 41 | // }; 42 | // axios.post(url, basket, { headers }) 43 | // .then(response => true); 44 | 45 | // } 46 | 47 | 48 | function useAddItemToBasket(catalog) { 49 | basket.items.push(catalog); 50 | 51 | } 52 | 53 | function Catalogs({ addItemToBasket }) { 54 | const queryClient = useQueryClient(); 55 | const { status, data, error, isFetching } = useCatalogs(); 56 | 57 | return ( 58 |
59 |
60 | {status === "loading" ? ( 61 | "Loading..." 62 | ) : status === "error" ? ( 63 | Error: {error.message} 64 | ) : ( 65 |
66 | { 67 | data.data && data.data.map((catalog, index) => ( 68 |
69 |
addItemToBasket(catalog)}> 70 |
71 |
72 | 73 |
74 | 75 |
76 |
77 |
78 | {catalog.name} 79 |
80 |
81 | {catalog.price} 82 |
83 |
84 |
85 |
86 | )) 87 | } 88 |
{isFetching ? "Background Updating..." : " "}
89 |
90 | )} 91 |
92 |
93 | ); 94 | } 95 | 96 | export default CatalogContainer; -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/src/pages/Catalog/CatalogContainer.scss: -------------------------------------------------------------------------------- 1 | @import 'src/assets/styles/variables'; 2 | 3 | .esh-catalog { 4 | $banner-height: 260px; 5 | 6 | &-title { 7 | position: relative; 8 | top: $banner-height / 3.5; 9 | } 10 | 11 | $filter-height: 65px; 12 | 13 | &-filters { 14 | height: $filter-height; 15 | } 16 | 17 | &-filters-wrapper { 18 | padding-bottom: .5rem; 19 | padding-top: .5rem; 20 | } 21 | 22 | &-filter-wrapper { 23 | margin-right: .5rem; 24 | position: relative; 25 | 26 | &:after { 27 | border-bottom: 1px solid $color-secondary; 28 | border-right: 1px solid $color-secondary; 29 | bottom: 1rem; 30 | content: ''; 31 | height: .5rem; 32 | pointer-events: none; 33 | position: absolute; 34 | right: .9rem; 35 | transform: rotate(45deg); 36 | width: .5rem; 37 | z-index: 1; 38 | } 39 | } 40 | 41 | &-filter { 42 | appearance: none; 43 | background-color: transparent; 44 | border: solid 3px $color-secondary; 45 | border-radius: 0; 46 | cursor: pointer; 47 | margin-right: 1rem; 48 | min-width: 140px; 49 | outline-color: $color-secondary; 50 | padding-left: .5rem; 51 | padding-right: 2rem; 52 | 53 | option { 54 | appearance: none; 55 | border: unset; 56 | 57 | &:hover { 58 | background-color: $color-primary; 59 | color: $color-brightest; 60 | cursor: pointer; 61 | } 62 | 63 | &:active { 64 | background-color: $color-primary; 65 | color: $color-brightest; 66 | } 67 | 68 | &:focus { 69 | background-color: $color-primary; 70 | color: $color-brightest; 71 | } 72 | 73 | &:current { 74 | background-color: $color-primary; 75 | color: $color-brightest; 76 | } 77 | 78 | &:selected { 79 | background-color: $color-primary; 80 | color: $color-brightest; 81 | } 82 | } 83 | } 84 | 85 | &-label { 86 | display: inline-block; 87 | font-size: $font-size-m; 88 | margin-bottom: 0; 89 | position: relative; 90 | z-index: 0; 91 | 92 | // &:before { 93 | // color: $color-primary; 94 | // content: attr(data-title); 95 | // font-size: $font-size-s; 96 | // left: .7rem; 97 | // top: .2rem; 98 | // position: absolute; 99 | // text-transform: uppercase; 100 | // z-index: 1; 101 | // } 102 | } 103 | 104 | &-items { 105 | margin-top: 1rem; 106 | } 107 | 108 | &-item { 109 | cursor: pointer; 110 | margin-bottom: 1.5rem; 111 | width: 100%; 112 | 113 | &:hover { 114 | background-color: $color-brightest; 115 | 116 | .esh-catalog-thumbnail-icon { 117 | opacity: 1; 118 | } 119 | } 120 | 121 | &.is-disabled { 122 | background-color: unset; 123 | cursor: default; 124 | 125 | .esh-catalog-thumbnail-icon { 126 | display: none !important; 127 | } 128 | } 129 | } 130 | 131 | &-thumbnail-wrapper { 132 | background-color: #dbdede; 133 | height: 0; 134 | overflow: hidden; 135 | padding-top: 100%; 136 | position: relative; 137 | } 138 | 139 | &-thumbnail-icon { 140 | background-color: $color-primary; 141 | border-radius: 50%; 142 | height: 3.5rem; 143 | left: 50%; 144 | opacity: 0; 145 | position: absolute; 146 | top: 50%; 147 | transform: translate(-50%,-50%); 148 | width: 3.5rem; 149 | z-index: 20; 150 | transition: all $animation-speed-default; 151 | } 152 | 153 | &-thumbnail-icon-svg { 154 | height: auto; 155 | width: 1.5rem; 156 | } 157 | 158 | &-thumbnail { 159 | height: 100%; 160 | left: 50%; 161 | position: absolute; 162 | top: 50%; 163 | transform: translate(-50%,-50%); 164 | width: auto; 165 | z-index: 10; 166 | } 167 | 168 | &-details { 169 | height: 4rem; 170 | } 171 | 172 | &-name { 173 | font-size: $font-size-m; 174 | text-transform: uppercase; 175 | } 176 | 177 | &-price { 178 | color: $color-primary; 179 | font-size: $font-size-m; 180 | 181 | &::before { 182 | content: '$'; 183 | } 184 | } 185 | 186 | &-alert { 187 | margin-top: 10px; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /src/eShopMF/mf-catalog-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5502/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5502, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | { 39 | test: /\.json$/, 40 | loader: 'json-loader' 41 | }, 42 | { 43 | test: /\.(jpg|png)$/, 44 | use: { 45 | loader: 'url-loader', 46 | }, 47 | }, 48 | { 49 | test: /\.svg$/, 50 | use: [ 51 | { 52 | loader: 'svg-url-loader', 53 | options: { 54 | limit: 10000, 55 | }, 56 | }, 57 | ], 58 | }, 59 | { 60 | test: /\.scss$/, 61 | use: [{ 62 | loader: "style-loader" // creates style nodes from JS strings 63 | }, { 64 | loader: "css-loader" // translates CSS into CommonJS 65 | }, { 66 | loader: "sass-loader" // compiles Sass to CSS 67 | }] 68 | } 69 | ], 70 | }, 71 | 72 | plugins: [ 73 | new ModuleFederationPlugin({ 74 | name: "catalog", 75 | filename: "remoteEntry.js", 76 | remotes: {}, 77 | exposes: { 78 | "./CatalogContainer": "./src/pages/Catalog/CatalogContainer", 79 | }, 80 | shared: { 81 | ...deps, 82 | react: { 83 | singleton: true, 84 | requiredVersion: deps.react, 85 | }, 86 | "react-dom": { 87 | singleton: true, 88 | requiredVersion: deps["react-dom"], 89 | }, 90 | }, 91 | }), 92 | new HtmlWebPackPlugin({ 93 | template: "./src/index.html", 94 | }), 95 | ], 96 | }; 97 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5554 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/README.md: -------------------------------------------------------------------------------- 1 | Cool React template, as seen in awesome tutorial https://www.youtube.com/watch?v=E3NHd-PkLrQ 2 | 3 | 2020 update - if you do git clone you'll be missing the .babelrc file and it's easy to miss that. Reference the repo code 4 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notifications", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5554 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-notifications", 11 | "docker:run": "docker run -p 5554:5554 web-mf-notifications" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "style-loader": "2.0.0", 28 | "webpack": "5.31.2", 29 | "webpack-cli": "^4.9.1", 30 | "webpack-dev-server": "3.11.2" 31 | }, 32 | "dependencies": { 33 | "@babel/runtime": "^7.13.10", 34 | "react": "^17.0.2", 35 | "react-dom": "^17.0.2" 36 | } 37 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import "./index.css"; 5 | 6 | const App = () =>
Hi there, I'm React from Webpack 5.
; 7 | 8 | ReactDOM.render(, document.getElementById("app")); 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/src/index.js: -------------------------------------------------------------------------------- 1 | import("./App"); 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-notifications-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5554/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5554, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | ], 39 | }, 40 | 41 | plugins: [ 42 | new ModuleFederationPlugin({ 43 | name: "notifications", 44 | filename: "remoteEntry.js", 45 | remotes: {}, 46 | exposes: {}, 47 | shared: { 48 | ...deps, 49 | react: { 50 | singleton: true, 51 | requiredVersion: deps.react, 52 | }, 53 | "react-dom": { 54 | singleton: true, 55 | requiredVersion: deps["react-dom"], 56 | }, 57 | }, 58 | }), 59 | new HtmlWebPackPlugin({ 60 | template: "./src/index.html", 61 | }), 62 | ], 63 | }; 64 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5504 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/README.md: -------------------------------------------------------------------------------- 1 | A react app for displaying Orders using Module Federation. -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "orders", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5504 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-orders", 11 | "docker:run": "docker run -p 5504:5504 web-mf-orders" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "style-loader": "2.0.0", 28 | "webpack": "5.31.2", 29 | "webpack-cli": "^4.9.1", 30 | "webpack-dev-server": "3.11.2" 31 | }, 32 | "dependencies": { 33 | "@babel/runtime": "^7.13.10", 34 | "react": "^17.0.2", 35 | "react-dom": "^17.0.2" 36 | } 37 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import "./index.css"; 5 | 6 | const App = () =>
Hi there, I'm React from Webpack 5.
; 7 | 8 | ReactDOM.render(, document.getElementById("app")); 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/src/index.js: -------------------------------------------------------------------------------- 1 | import("./App"); 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-orders-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5504/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5504, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | ], 39 | }, 40 | 41 | plugins: [ 42 | new ModuleFederationPlugin({ 43 | name: "orders", 44 | filename: "remoteEntry.js", 45 | remotes: {}, 46 | exposes: {}, 47 | shared: { 48 | ...deps, 49 | react: { 50 | singleton: true, 51 | requiredVersion: deps.react, 52 | }, 53 | "react-dom": { 54 | singleton: true, 55 | requiredVersion: deps["react-dom"], 56 | }, 57 | }, 58 | }), 59 | new HtmlWebPackPlugin({ 60 | template: "./src/index.html", 61 | }), 62 | ], 63 | }; 64 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5555 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/README.md: -------------------------------------------------------------------------------- 1 | A react web app for Shared components using Module Federation. 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shared", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5555 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-shared", 11 | "docker:run": "docker run -p 5555:5555 web-mf-shared" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "style-loader": "2.0.0", 28 | "webpack": "5.31.2", 29 | "webpack-cli": "^4.9.1", 30 | "webpack-dev-server": "3.11.2" 31 | }, 32 | "dependencies": { 33 | "@babel/runtime": "^7.13.10", 34 | "bootstrap": "^5.1.3", 35 | "react": "^17.0.2", 36 | "react-dom": "^17.0.2", 37 | "styled-components": "^4.3.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import Header from "./components/Header"; 4 | 5 | import "./index.css"; 6 | 7 | const HeaderChildComponent = () =>
8 |
9 | All T-SHIRTS 10 | On sale this weekend 11 |
12 | 13 |
; 14 | 15 | const App = () =>
}>
; 16 | 17 | ReactDOM.render(, document.getElementById("app")); 18 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from 'styled-components'; 3 | 4 | const HeaderWrapper = styled.section` 5 | height: 4rem; 6 | `; 7 | 8 | const HeaderContainer = styled.div` 9 | `; 10 | 11 | const Link = styled.a` 12 | color: rgba(#fff, .5); 13 | line-height: 4rem; 14 | text-decoration: none; 15 | text-transform: uppercase; 16 | transition: color .35s; 17 | 18 | &:hover { 19 | color: #fff; 20 | transition: color .35s; 21 | } 22 | `; 23 | 24 | const Header = ({component}) => 25 |
26 | 27 | {component} 28 | 29 |
; 30 | 31 | export default Header; -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | 3 | import("./App"); 4 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shared-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5555/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5555, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | ], 39 | }, 40 | 41 | plugins: [ 42 | new ModuleFederationPlugin({ 43 | name: "shared", 44 | filename: "remoteEntry.js", 45 | remotes: {}, 46 | exposes: { 47 | "./Header": "./src/components/Header", 48 | }, 49 | shared: { 50 | ...deps, 51 | react: { 52 | singleton: true, 53 | requiredVersion: deps.react, 54 | }, 55 | "react-dom": { 56 | singleton: true, 57 | requiredVersion: deps["react-dom"], 58 | }, 59 | }, 60 | }), 61 | new HtmlWebPackPlugin({ 62 | template: "./src/index.html", 63 | }), 64 | ], 65 | }; 66 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"], 3 | "plugins": [ 4 | ["@babel/transform-runtime"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/.gitattributes: -------------------------------------------------------------------------------- 1 | dist/* linguist-vendored=false 2 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | out 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and not Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | 108 | # Stores VSCode versions used for testing VSCode extensions 109 | .vscode-test 110 | 111 | # yarn v2 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .yarn/install-state.gz 116 | .pnp.* 117 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | WORKDIR /usr/src/app 3 | 4 | COPY package.json ./ 5 | COPY yarn.lock ./ 6 | 7 | RUN yarn install 8 | 9 | COPY . . 10 | 11 | RUN yarn build 12 | 13 | EXPOSE 5501 14 | 15 | CMD [ "yarn", "build:start" ] 16 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/README.md: -------------------------------------------------------------------------------- 1 | A react web app for consuming Shared Header and Catalogs from different apps using Module Federation. -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shop", 3 | "version": "1.0.1", 4 | "scripts": { 5 | "build": "webpack --mode production", 6 | "build:dev": "webpack --mode development", 7 | "build:start": "cd dist && PORT=5501 npx serve", 8 | "start": "webpack serve --open --mode development", 9 | "start:live": "webpack serve --open --mode development --liveReload", 10 | "docker:build": "docker build . -t web-mf-shop", 11 | "docker:run": "docker run -p 5501:5501 web-mf-shop" 12 | }, 13 | "license": "MIT", 14 | "author": { 15 | "name": "Atiqul Islam", 16 | "email": "islam.md.atiqul@gmail.com" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "7.13.15", 20 | "@babel/plugin-transform-runtime": "^7.13.15", 21 | "@babel/preset-env": "^7.13.15", 22 | "@babel/preset-react": "7.13.13", 23 | "@webpack-cli/serve": "^1.3.1", 24 | "babel-loader": "8.2.2", 25 | "css-loader": "^5.2.1", 26 | "html-webpack-plugin": "^5.3.1", 27 | "style-loader": "2.0.0", 28 | "svg-url-loader": "^7.1.1", 29 | "url-loader": "^4.1.1", 30 | "webpack": "5.31.2", 31 | "webpack-cli": "^4.9.1", 32 | "webpack-dev-server": "3.11.2" 33 | }, 34 | "dependencies": { 35 | "@babel/runtime": "^7.13.10", 36 | "bootstrap": "^5.1.3", 37 | "react": "^17.0.2", 38 | "react-dom": "^17.0.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import "./index.css"; 5 | 6 | 7 | class FederatedWrapper extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { hasError: false }; 11 | } 12 | 13 | static getDerivedStateFromError(error) { 14 | return { hasError: true }; 15 | } 16 | 17 | componentDidCatch(error, errorInfo) { 18 | // logErrorToMyService(error, errorInfo); 19 | } 20 | 21 | render() { 22 | if (this.state.hasError) { 23 | return this.props.error ||
Something went wrong.
; 24 | } 25 | 26 | return ( 27 | }> 28 | {this.props.children} 29 | 30 | ); 31 | } 32 | } 33 | 34 | const wrapComponent = (Component) => ({ error, delayed, ...props }) => ( 35 | 36 | 37 | 38 | ); 39 | 40 | const BasketStatus = wrapComponent(React.lazy(() => import("basket/BasketStatus"))); 41 | 42 | const Header = wrapComponent(React.lazy(() => import("shared/Header"))); 43 | 44 | const HeaderChildComponent = ({badge}) => 45 | { 46 | { 47 | console.log(badge); 48 | } 49 | return (
50 |
51 | All T-SHIRTS 52 | On sale this weekend 53 |
54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 |
64 |
65 |
); 66 | } 67 | 68 | const CatalogContainer = wrapComponent(React.lazy(() => import("catalog/CatalogContainer"))); 69 | 70 | const App = () => 71 | { 72 | const [basket, setBasket ] = useState({ buyerId: '', items: [] }); 73 | const [badge, setBadge ] = useState(0); 74 | const addItemToBasket = (catalog) => { 75 | 76 | let _basket = { buyerId: '', items: [] }; 77 | if(basket) 78 | { 79 | _basket = basket; 80 | } 81 | 82 | let basketItem = _basket.items.find(value => value.productId == catalog.productId); 83 | 84 | if (basketItem) { 85 | basketItem.quantity++; 86 | } else { 87 | _basket.items.push({ 88 | pictureUrl: catalog.pictureUri, 89 | productId: catalog.id, 90 | productName: catalog.name, 91 | quantity: 1, 92 | unitPrice: catalog.price, 93 | id: Date.now(), 94 | oldUnitPrice: 0 95 | }); 96 | } 97 | 98 | setBasket(_basket); 99 | setBadge(_basket?.items?.length); 100 | } 101 | 102 | return (
103 |
104 |
}>
105 |
106 |
107 | 108 |
109 |
); 110 | } 111 | 112 | ReactDOM.render(, document.getElementById("app")); 113 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Bold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-ExtraLight.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Light.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Medium.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-Regular.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.eot -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.ttf -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.woff -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/fonts/Oswald-SemiBold.woff2 -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Add to cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Cart 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/X 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imatiqul/micro-frontend-react/b3313b0bfd4841a7f3457fe6300afaa873a2ea67/src/eShopMF/mf-shop-app/src/assets/images/header.jpg -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Minus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Plus 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/Refresh 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/assets/images/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icons/24/User 5 | Created with Sketch. 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | border-color: #B0C4DE; 3 | border-width: 2px; 4 | border-style: solid; 5 | } 6 | 7 | .esh-app-header { 8 | background: url('./assets/images/header.jpg') center -2.7rem no-repeat, linear-gradient(90deg, #5F6571 0%, #5F6571 35%, #CFC6BF 65%, #CFC6BF 100%); 9 | background-size: 94rem, auto; 10 | height: 13rem; 11 | padding-top: 2.25rem; 12 | position: relative; 13 | transition: all .35s; 14 | 15 | 16 | } 17 | .esh-app-header-expanded { 18 | background-position: center top; 19 | background-size: 87rem, auto; 20 | height: 29rem; 21 | 22 | 23 | } 24 | 25 | .esh-app-header-brand { 26 | height: auto; 27 | width: 92px; 28 | } 29 | 30 | .esh-app-header-promo { 31 | bottom: 3.5rem; 32 | opacity: 1; 33 | position: absolute; 34 | text-align: center; 35 | transition: all .35s; 36 | width: 100%; 37 | } 38 | 39 | .esh-app-header-promo-title { 40 | display: block; 41 | color: rgba(#fff, .3); 42 | font-size: 5rem; 43 | line-height: 5rem; 44 | word-wrap: none; 45 | } 46 | 47 | .esh-app-header-promo-subtitle { 48 | display: block; 49 | color: #fff; 50 | font-size: 1.25rem; 51 | } 52 | 53 | .esh-app-footer { 54 | background-color: #81828d; 55 | color: #fff; 56 | font-size: 1rem; 57 | display: flex; 58 | height: 7rem; 59 | margin-top: auto; 60 | 61 | } 62 | 63 | .esh-app-brand { 64 | height: auto; 65 | width: 104px; 66 | } 67 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/src/index.js: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | 3 | import("./App"); 4 | -------------------------------------------------------------------------------- /src/eShopMF/mf-shop-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require("html-webpack-plugin"); 2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 3 | 4 | const deps = require("./package.json").dependencies; 5 | module.exports = { 6 | output: { 7 | publicPath: "http://localhost:5501/", 8 | }, 9 | 10 | resolve: { 11 | extensions: [".jsx", ".js", ".json"], 12 | }, 13 | 14 | devServer: { 15 | port: 5501, 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.m?js/, 22 | type: "javascript/auto", 23 | resolve: { 24 | fullySpecified: false, 25 | }, 26 | }, 27 | { 28 | test: /\.css$/i, 29 | use: ["style-loader", "css-loader"], 30 | }, 31 | { 32 | test: /\.(js|jsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | }, 37 | }, 38 | { 39 | test: /\.(jpg|png)$/, 40 | use: { 41 | loader: 'url-loader', 42 | }, 43 | }, 44 | { 45 | test: /\.svg$/, 46 | use: [ 47 | { 48 | loader: 'svg-url-loader', 49 | options: { 50 | limit: 10000, 51 | }, 52 | }, 53 | ], 54 | }, 55 | ], 56 | }, 57 | 58 | plugins: [ 59 | new ModuleFederationPlugin({ 60 | name: "shop", 61 | filename: "remoteEntry.js", 62 | remotes: { 63 | "shared": "shared@http://localhost:5555/remoteEntry.js", 64 | "catalog": "catalog@http://localhost:5502/remoteEntry.js", 65 | "basket": "basket@http://localhost:5503/remoteEntry.js" 66 | }, 67 | exposes: {}, 68 | shared: { 69 | ...deps, 70 | react: { 71 | singleton: true, 72 | requiredVersion: deps.react, 73 | }, 74 | "react-dom": { 75 | singleton: true, 76 | requiredVersion: deps["react-dom"], 77 | }, 78 | }, 79 | }), 80 | new HtmlWebPackPlugin({ 81 | template: "./src/index.html", 82 | }), 83 | ], 84 | }; 85 | --------------------------------------------------------------------------------