├── Readme.md ├── app ├── .gitignore ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── bootstrap.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── modules │ ├── Footer.css │ ├── Footer.js │ ├── Header.css │ ├── Header.js │ ├── LeftSidebar.css │ ├── LeftSidebar.js │ ├── RightSidebar.css │ └── RightSidebar.js │ ├── reportWebVitals.js │ └── setupTests.js ├── footer ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.png │ ├── index.html │ └── svelte.png ├── scripts │ └── setupTypeScript.js ├── src │ ├── App.svelte │ ├── loadApp.js │ └── main.js └── webpack.config.js ├── header ├── .gitignore ├── README.md ├── craco.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── bootstrap.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── left-sidebar ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ ├── .gitkeep │ │ └── logo.png │ ├── bootstrap.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── loadApp.ts │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── webpack.config.js └── webpack.prod.config.js └── right-sidebar ├── .gitignore ├── README.md ├── babel.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png └── main.js └── vue.config.js /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # React application with micro front end architecture 3 | 4 | This is a demonstration project to show multiple micro application developed in different frameworks`(like React,Angular,Vue,Svelte)` can exist inside same application.Thanks to Webpack 5 module federation 5 | 6 | ## components 7 | 8 | ### App - 9 | Its a React application developed using create react app and acting as shell(Container) application which renders small micro application. 10 | 11 | ### Header - 12 | Its a React application developed using create react app and acting as micro application which renders header of the application 13 | 14 | ### Left sidebar - 15 | Its an Angular application developed using angular cli and acting as micro application which renders left sidebar of the application 16 | 17 | ### Right sidebar - 18 | Its a Vue application developed using vue cli and acting as micro application which renders right sidebar of the application 19 | 20 | ### Footer - 21 | Its a Svelte application developed using svelte webpack template and acting as micro application which renders footer of the application 22 | 23 | ### How to run the application 24 | 25 | - Go to each folder(app,header,left-sidebar,right-sidebar,footer) and run `npm start` 26 | - Open browser and type `http://localhost:3000` 27 | 28 | Screenshot 2022-02-07 at 1 24 51 AM 29 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /app/craco.config.js: -------------------------------------------------------------------------------- 1 | const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin; 2 | const deps = require('./package.json').dependencies; 3 | 4 | module.exports = { 5 | plugins: [ 6 | { 7 | plugin: { 8 | overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => { return cracoConfig; }, 9 | overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { 10 | webpackConfig.plugins = [ 11 | ...webpackConfig.plugins, 12 | new ModuleFederationPlugin({ 13 | name: "app", 14 | remotes: { 15 | header: "header@http://localhost:3001/remoteEntry.js", 16 | leftSideBar:"leftSidebar@http://localhost:3002/remoteEntry.js", 17 | rightSidebar:"rightSidebar@http://localhost:3003/remoteEntry.js", 18 | footer: "footer@http://localhost:3004/remoteEntry.js", 19 | }, 20 | shared:{ 21 | ...deps, 22 | 'react-dom': { 23 | singleton: true, 24 | eager:true 25 | }, 26 | react: { 27 | singleton: true, 28 | eager:true 29 | }, 30 | } 31 | }), 32 | ] 33 | return webpackConfig; 34 | }, 35 | overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => { return devServerConfig; }, 36 | overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => { return jestConfig }, 37 | }, 38 | } 39 | ] 40 | }; -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.2", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "set PORT=3000 && craco start", 16 | "build": "craco build", 17 | "test": "craco test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "@craco/craco": "^6.4.3", 40 | "webpack": "^5.68.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/app/public/favicon.ico -------------------------------------------------------------------------------- /app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/app/public/logo192.png -------------------------------------------------------------------------------- /app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/app/public/logo512.png -------------------------------------------------------------------------------- /app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .header-container{ 6 | height: 60px; 7 | } 8 | .footer-container{ 9 | position: fixed; 10 | bottom: 0; 11 | height:100px; 12 | width: 100%; 13 | } 14 | .content{ 15 | display: flex; 16 | height: calc(100vh - 160px); 17 | } 18 | .content > *{ 19 | flex:1 50%; 20 | } 21 | .react-logo{ 22 | height: 90px; 23 | } 24 | .main-app{ 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } -------------------------------------------------------------------------------- /app/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Header from "./modules/Header"; 3 | import Footer from "./modules/Footer"; 4 | import RightSidebar from "./modules/RightSidebar"; 5 | import LeftSidebar from './modules/LeftSidebar'; 6 | import {ReactComponent as ReactLogo} from "./logo.svg"; 7 | function App() { 8 | return ( 9 |
10 |
11 |

Main Application in

12 | 13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 |
21 | 24 |
25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /app/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /app/src/index.js: -------------------------------------------------------------------------------- 1 | import("./bootstrap"); -------------------------------------------------------------------------------- /app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/src/modules/Footer.css: -------------------------------------------------------------------------------- 1 | .footer-module{ 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /app/src/modules/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import { mount } from "footer/footerModule"; 3 | import "./Footer.css"; 4 | 5 | const HeaderModule = () => { 6 | const ref = useRef(null); 7 | 8 | useEffect(() => { 9 | mount(ref.current); 10 | }, []); 11 | 12 | return
; 13 | }; 14 | 15 | export default HeaderModule; -------------------------------------------------------------------------------- /app/src/modules/Header.css: -------------------------------------------------------------------------------- 1 | .header-module{ 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /app/src/modules/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import { mount } from "header/HeaderModule"; 3 | import "./Header.css"; 4 | const HeaderModule = () => { 5 | const ref = useRef(null); 6 | 7 | useEffect(() => { 8 | mount(ref.current); 9 | }, []); 10 | 11 | 12 | return
; 13 | }; 14 | 15 | export default HeaderModule; -------------------------------------------------------------------------------- /app/src/modules/LeftSidebar.css: -------------------------------------------------------------------------------- 1 | .left-sidebar-module{ 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /app/src/modules/LeftSidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import {mount} from "leftSideBar/leftSideBar"; 3 | import "./LeftSidebar.css"; 4 | 5 | const LeftSidebarModule = () => { 6 | const ref = useRef(null); 7 | useEffect(() => { 8 | mount(); 9 | }, []); 10 | return
; 11 | }; 12 | 13 | export default LeftSidebarModule; -------------------------------------------------------------------------------- /app/src/modules/RightSidebar.css: -------------------------------------------------------------------------------- 1 | .right-sidebar-module{ 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /app/src/modules/RightSidebar.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import {mount} from "rightSidebar/rightSidebar"; 3 | import "./RightSidebar.css"; 4 | 5 | const RightSidebarModule = () => { 6 | const ref = useRef(null); 7 | useEffect(() => { 8 | mount(ref.current); 9 | }, []); 10 | return
; 11 | }; 12 | 13 | export default RightSidebarModule; -------------------------------------------------------------------------------- /app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /footer/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/build/bundle.* 4 | -------------------------------------------------------------------------------- /footer/README.md: -------------------------------------------------------------------------------- 1 | # svelte app 2 | 3 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template-webpack. 4 | 5 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 6 | 7 | ```bash 8 | npx degit sveltejs/template-webpack svelte-app 9 | cd svelte-app 10 | ``` 11 | 12 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 13 | 14 | 15 | ## Get started 16 | 17 | Install the dependencies... 18 | 19 | ```bash 20 | cd svelte-app 21 | npm install 22 | ``` 23 | 24 | ...then start webpack: 25 | 26 | ```bash 27 | npm run dev 28 | ``` 29 | 30 | Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes. 31 | 32 | 33 | ## Deploying to the web 34 | 35 | ### With [now](https://zeit.co/now) 36 | 37 | Install `now` if you haven't already: 38 | 39 | ```bash 40 | npm install -g now 41 | ``` 42 | 43 | Then, from within your project folder: 44 | 45 | ```bash 46 | now 47 | ``` 48 | 49 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 50 | 51 | ### With [surge](https://surge.sh/) 52 | 53 | Install `surge` if you haven't already: 54 | 55 | ```bash 56 | npm install -g surge 57 | ``` 58 | 59 | Then, from within your project folder: 60 | 61 | ```bash 62 | npm run build 63 | surge public 64 | ``` 65 | -------------------------------------------------------------------------------- /footer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "cross-env": "^7.0.3", 6 | "css-loader": "^5.0.1", 7 | "mini-css-extract-plugin": "^1.3.4", 8 | "svelte": "^3.31.2", 9 | "svelte-loader": "^3.0.0", 10 | "webpack": "^5.16.0", 11 | "webpack-cli": "^4.4.0", 12 | "webpack-dev-server": "^3.11.2" 13 | }, 14 | "scripts": { 15 | "build": "cross-env NODE_ENV=production webpack", 16 | "start": "webpack serve --content-base public --port 3004" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /footer/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/footer/public/favicon.png -------------------------------------------------------------------------------- /footer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /footer/public/svelte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/footer/public/svelte.png -------------------------------------------------------------------------------- /footer/scripts/setupTypeScript.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Run this script to convert the project to TypeScript. This is only guaranteed to work 3 | * on the unmodified default template; if you have done code changes you are likely need 4 | * to touch up the generated project manually. 5 | */ 6 | 7 | // @ts-check 8 | const fs = require("fs") 9 | const path = require("path") 10 | const { argv } = require("process") 11 | 12 | const projectRoot = argv[2] || path.join(__dirname, "..") 13 | 14 | function warn(message) { 15 | console.warn('Warning: ' + message); 16 | } 17 | 18 | function createFile(fileName, contents) { 19 | if (fs.existsSync(fileName)) { 20 | warn(`Wanted to create ${fileName}, but it already existed. Leaving existing file.`); 21 | } else { 22 | fs.writeFileSync(fileName, contents); 23 | } 24 | } 25 | 26 | 27 | function replaceInFile(fileName, replacements) { 28 | if (fs.existsSync(fileName)) { 29 | let contents = fs.readFileSync(fileName, 'utf8'); 30 | let hadUpdates = false; 31 | 32 | replacements.forEach(([from, to]) => { 33 | const newContents = contents.replace(from, to); 34 | 35 | const isAlreadyApplied = typeof to !== 'string' || contents.includes(to); 36 | 37 | if (newContents !== contents) { 38 | contents = newContents; 39 | hadUpdates = true; 40 | } else if (!isAlreadyApplied) { 41 | warn(`Wanted to update "${from}" in ${fileName}, but did not find it.`); 42 | } 43 | }); 44 | 45 | if (hadUpdates) { 46 | fs.writeFileSync(fileName, contents); 47 | } else { 48 | console.log(`${fileName} had already been updated.`); 49 | } 50 | } else { 51 | warn(`Wanted to update ${fileName} but the file did not exist.`); 52 | } 53 | } 54 | 55 | // Add deps to pkg.json 56 | function addDepsToPackageJson() { 57 | const pkgJSONPath = path.join(projectRoot, 'package.json'); 58 | const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8')); 59 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { 60 | 'ts-loader': '^8.0.4', 61 | '@tsconfig/svelte': '^1.0.10', 62 | '@types/node': '^14.11.1', 63 | 'svelte-check': '^1.0.46', 64 | 'svelte-preprocess': '^4.3.0', 65 | tslib: '^2.0.1', 66 | typescript: '^4.0.3' 67 | }); 68 | 69 | // Add script for checking 70 | packageJSON.scripts = Object.assign(packageJSON.scripts, { 71 | validate: 'svelte-check' 72 | }); 73 | 74 | // Write the package JSON 75 | fs.writeFileSync(pkgJSONPath, JSON.stringify(packageJSON, null, ' ')); 76 | } 77 | 78 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too 79 | function changeJsExtensionToTs(dir) { 80 | const elements = fs.readdirSync(dir, { withFileTypes: true }); 81 | 82 | for (let i = 0; i < elements.length; i++) { 83 | if (elements[i].isDirectory()) { 84 | changeJsExtensionToTs(path.join(dir, elements[i].name)); 85 | } else if (elements[i].name.match(/^[^_]((?!json).)*js$/)) { 86 | fs.renameSync(path.join(dir, elements[i].name), path.join(dir, elements[i].name).replace('.js', '.ts')); 87 | } 88 | } 89 | } 90 | 91 | function updateSingleSvelteFile({ view, vars, contextModule }) { 92 | replaceInFile(path.join(projectRoot, 'src', `${view}.svelte`), [ 93 | [/(?:/gm, (m, attrs) => ``], 94 | ...(vars ? vars.map(({ name, type }) => [`export let ${name};`, `export let ${name}: ${type};`]) : []), 95 | ...(contextModule ? contextModule.map(({ js, ts }) => [js, ts]) : []) 96 | ]); 97 | } 98 | 99 | // Switch the App.svelte file to use TS 100 | function updateSvelteFiles() { 101 | [ 102 | { 103 | view: 'App', 104 | vars: [{ name: 'name', type: 'string' }] 105 | }, 106 | ].forEach(updateSingleSvelteFile); 107 | } 108 | 109 | function updateWebpackConfig() { 110 | // Edit webpack config 111 | replaceInFile(path.join(projectRoot, 'webpack.config.js'), [ 112 | // Edit imports 113 | [ 114 | /require\('path'\);\n(?!const sveltePreprocess)/, 115 | `require('path');\nconst sveltePreprocess = require('svelte-preprocess');\n` 116 | ], 117 | // Edit extensions 118 | [ 119 | /'\.js',/, 120 | `'.js', '.ts',` 121 | ], 122 | // Edit name of entry point 123 | [ 124 | /'\.\/src\/main.js'/, 125 | `'./src/main.ts'` 126 | ], 127 | // Add preprocess to the svelte loader, this is tricky because there's no easy signifier. 128 | // Instead we look for 'hotReload: 'prod,' 129 | [ 130 | /hotReload: \!prod(?!,\n\s*preprocess)/g, 131 | 'hotReload: !prod,\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: !prod })' 132 | ], 133 | // Add ts-loader 134 | [ 135 | /module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g, 136 | `module: {\n\t\t\trules: [\n\t\t\t\t{\n\t\t\t\t\ttest: /\\.ts$/,\n\t\t\t\t\tloader: 'ts-loader',\n\t\t\t\t\texclude: /node_modules/\n\t\t\t\t},\n\t\t\t\t`, 137 | ] 138 | ]); 139 | } 140 | 141 | // Add TSConfig 142 | function createTsConfig() { 143 | const tsconfig = `{ 144 | "extends": "@tsconfig/svelte/tsconfig.json", 145 | "include": ["src/**/*", "src/node_modules/**/*"], 146 | "exclude": ["node_modules/*", "__sapper__/*", "static/*"] 147 | }`; 148 | 149 | createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig); 150 | } 151 | 152 | // Adds the extension recommendation 153 | function configureVsCode() { 154 | const dir = path.join(projectRoot, '.vscode'); 155 | 156 | if (!fs.existsSync(dir)) { 157 | fs.mkdirSync(dir); 158 | } 159 | 160 | createFile(path.join(projectRoot, '.vscode', 'extensions.json'), `{"recommendations": ["svelte.svelte-vscode"]}`); 161 | } 162 | 163 | function deleteThisScript() { 164 | fs.unlinkSync(path.join(__filename)); 165 | 166 | // Check for Mac's DS_store file, and if it's the only one left remove it 167 | const remainingFiles = fs.readdirSync(path.join(__dirname)); 168 | if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') { 169 | fs.unlinkSync(path.join(__dirname, '.DS_store')); 170 | } 171 | 172 | // Check if the scripts folder is empty 173 | if (fs.readdirSync(path.join(__dirname)).length === 0) { 174 | // Remove the scripts folder 175 | try { 176 | fs.rmdirSync(path.join(__dirname)); 177 | } catch (e) { 178 | warn(`Cannot delete locked directory ${__dirname}`); 179 | } 180 | } 181 | } 182 | 183 | console.log(`Adding TypeScript...`); 184 | 185 | addDepsToPackageJson(); 186 | 187 | changeJsExtensionToTs(path.join(projectRoot, 'src')); 188 | 189 | updateSvelteFiles(); 190 | 191 | updateWebpackConfig(); 192 | 193 | createTsConfig(); 194 | 195 | configureVsCode(); 196 | 197 | // Delete this script, but not during testing 198 | if (!argv[2]) { 199 | deleteThisScript(); 200 | } 201 | 202 | console.log('Converted to TypeScript.'); 203 | 204 | if (fs.existsSync(path.join(projectRoot, 'node_modules'))) { 205 | console.log(` 206 | Next: 207 | 1. run 'npm install' again to install TypeScript dependencies 208 | `); 209 | } 210 | -------------------------------------------------------------------------------- /footer/src/App.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 |
5 | Footer Application in 6 |
7 | 23 | -------------------------------------------------------------------------------- /footer/src/loadApp.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const mount = (el) => { 4 | new App({ 5 | target: el, 6 | // props: { 7 | // name: 'world' 8 | // } 9 | }); 10 | }; 11 | 12 | export {mount}; -------------------------------------------------------------------------------- /footer/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; 11 | -------------------------------------------------------------------------------- /footer/webpack.config.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 | const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin; 3 | const path = require('path'); 4 | 5 | const mode = process.env.NODE_ENV || 'development'; 6 | const prod = mode === 'production'; 7 | 8 | module.exports = { 9 | entry: { 10 | 'build/bundle': ['./src/main.js'] 11 | }, 12 | resolve: { 13 | alias: { 14 | svelte: path.dirname(require.resolve('svelte/package.json')) 15 | }, 16 | extensions: ['.mjs', '.js', '.svelte'], 17 | mainFields: ['svelte', 'browser', 'module', 'main'] 18 | }, 19 | output: { 20 | path: path.join(__dirname, '/public'), 21 | filename: '[name].js', 22 | chunkFilename: '[name].[id].js', 23 | publicPath:'auto' 24 | }, 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.svelte$/, 29 | use: { 30 | loader: 'svelte-loader', 31 | options: { 32 | compilerOptions: { 33 | dev: !prod 34 | }, 35 | emitCss: prod, 36 | hotReload: !prod 37 | } 38 | } 39 | }, 40 | { 41 | test: /\.css$/, 42 | use: [ 43 | MiniCssExtractPlugin.loader, 44 | 'css-loader' 45 | ] 46 | }, 47 | { 48 | // required to prevent errors from Svelte on Webpack 5+ 49 | test: /node_modules\/svelte\/.*\.mjs$/, 50 | resolve: { 51 | fullySpecified: false 52 | } 53 | } 54 | ] 55 | }, 56 | mode, 57 | plugins: [ 58 | new ModuleFederationPlugin({ 59 | name:'footer', 60 | filename:'remoteEntry.js', 61 | exposes:{ 62 | './footerModule':'./src/loadApp.js' 63 | } 64 | }), 65 | new MiniCssExtractPlugin({ 66 | filename: '[name].css' 67 | }) 68 | ], 69 | devtool: prod ? false : 'source-map', 70 | devServer: { 71 | hot: true 72 | } 73 | }; 74 | -------------------------------------------------------------------------------- /header/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /header/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /header/craco.config.js: -------------------------------------------------------------------------------- 1 | const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin; 2 | const deps = require('./package.json').dependencies; 3 | 4 | module.exports = { 5 | plugins: [ 6 | { 7 | plugin: { 8 | overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => { return cracoConfig; }, 9 | overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { 10 | webpackConfig.output.publicPath = "auto"; 11 | 12 | webpackConfig.plugins = [ 13 | ...webpackConfig.plugins, 14 | new ModuleFederationPlugin({ 15 | name: "header", 16 | filename: "remoteEntry.js", 17 | exposes: { 18 | "./HeaderModule": "./src/bootstrap", 19 | }, 20 | shared:{ 21 | ...deps, 22 | 'react-dom': { 23 | singleton: true, 24 | eager:true 25 | }, 26 | react: { 27 | singleton: true, 28 | eager:true 29 | }, 30 | } 31 | }), 32 | ] 33 | return webpackConfig; 34 | }, 35 | overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => { return devServerConfig; }, 36 | overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => { return jestConfig }, 37 | }, 38 | } 39 | ] 40 | }; -------------------------------------------------------------------------------- /header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "header", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.4.3", 7 | "@testing-library/jest-dom": "^5.16.2", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "export PORT=3001 && craco start", 17 | "build": "craco build", 18 | "test": "craco test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /header/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/header/public/favicon.ico -------------------------------------------------------------------------------- /header/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /header/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/header/public/logo192.png -------------------------------------------------------------------------------- /header/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/header/public/logo512.png -------------------------------------------------------------------------------- /header/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /header/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /header/src/App.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | background-color: #888; 3 | font-size: 18px; 4 | font-weight: bold; 5 | text-align: center; 6 | height:100%; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | .react-logo1{ 12 | height:90%; 13 | } -------------------------------------------------------------------------------- /header/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import {ReactComponent as ReactLogo} from "./logo.svg" 3 | function App() { 4 | return ( 5 |
6 | Header Application in 7 | 8 |
9 | 10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /header/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /header/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const mount = (el) => { 8 | ReactDOM.render( 9 | 10 | , el); 11 | }; 12 | 13 | if (process.env.NODE_ENV === "development") { 14 | const rootNode = document.querySelector("#root"); 15 | if (rootNode) { 16 | mount(rootNode); 17 | } 18 | } 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | 24 | export { mount }; -------------------------------------------------------------------------------- /header/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /header/src/index.js: -------------------------------------------------------------------------------- 1 | import("./bootstrap"); -------------------------------------------------------------------------------- /header/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /header/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /header/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /left-sidebar/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /left-sidebar/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /left-sidebar/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /left-sidebar/README.md: -------------------------------------------------------------------------------- 1 | # LeftSidebar 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.2. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /left-sidebar/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "left-sidebar": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | }, 12 | "@schematics/angular:application": { 13 | "strict": true 14 | } 15 | }, 16 | "root": "", 17 | "sourceRoot": "src", 18 | "prefix": "app", 19 | "architect": { 20 | "build": { 21 | "builder": "ngx-build-plus:browser", 22 | "options": { 23 | "outputPath": "dist/left-sidebar", 24 | "index": "src/index.html", 25 | "main": "src/main.ts", 26 | "polyfills": "src/polyfills.ts", 27 | "tsConfig": "tsconfig.app.json", 28 | "inlineStyleLanguage": "scss", 29 | "assets": [ 30 | "src/favicon.ico", 31 | "src/assets" 32 | ], 33 | "styles": [ 34 | "src/styles.scss" 35 | ], 36 | "scripts": [], 37 | "extraWebpackConfig": "webpack.config.js", 38 | "commonChunk": false 39 | }, 40 | "configurations": { 41 | "production": { 42 | "budgets": [ 43 | { 44 | "type": "initial", 45 | "maximumWarning": "500kb", 46 | "maximumError": "1mb" 47 | }, 48 | { 49 | "type": "anyComponentStyle", 50 | "maximumWarning": "2kb", 51 | "maximumError": "4kb" 52 | } 53 | ], 54 | "fileReplacements": [ 55 | { 56 | "replace": "src/environments/environment.ts", 57 | "with": "src/environments/environment.prod.ts" 58 | } 59 | ], 60 | "outputHashing": "all", 61 | "extraWebpackConfig": "webpack.prod.config.js" 62 | }, 63 | "development": { 64 | "buildOptimizer": false, 65 | "optimization": false, 66 | "vendorChunk": true, 67 | "extractLicenses": false, 68 | "sourceMap": true, 69 | "namedChunks": true 70 | } 71 | }, 72 | "defaultConfiguration": "production" 73 | }, 74 | "serve": { 75 | "builder": "ngx-build-plus:dev-server", 76 | "configurations": { 77 | "production": { 78 | "browserTarget": "left-sidebar:build:production", 79 | "extraWebpackConfig": "webpack.prod.config.js" 80 | }, 81 | "development": { 82 | "browserTarget": "left-sidebar:build:development" 83 | } 84 | }, 85 | "defaultConfiguration": "development", 86 | "options": { 87 | "port": 3002, 88 | "publicHost": "http://localhost:3002", 89 | "extraWebpackConfig": "webpack.config.js" 90 | } 91 | }, 92 | "extract-i18n": { 93 | "builder": "ngx-build-plus:extract-i18n", 94 | "options": { 95 | "browserTarget": "left-sidebar:build", 96 | "extraWebpackConfig": "webpack.config.js" 97 | } 98 | }, 99 | "test": { 100 | "builder": "@angular-devkit/build-angular:karma", 101 | "options": { 102 | "main": "src/test.ts", 103 | "polyfills": "src/polyfills.ts", 104 | "tsConfig": "tsconfig.spec.json", 105 | "karmaConfig": "karma.conf.js", 106 | "inlineStyleLanguage": "scss", 107 | "assets": [ 108 | "src/favicon.ico", 109 | "src/assets" 110 | ], 111 | "styles": [ 112 | "src/styles.scss" 113 | ], 114 | "scripts": [] 115 | } 116 | } 117 | } 118 | } 119 | }, 120 | "defaultProject": "left-sidebar" 121 | } 122 | -------------------------------------------------------------------------------- /left-sidebar/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/left-sidebar'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /left-sidebar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "left-sidebar", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test", 10 | "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular-architects/module-federation": "^14.0.2", 15 | "@angular/animations": "~13.2.0", 16 | "@angular/common": "~13.2.0", 17 | "@angular/compiler": "~13.2.0", 18 | "@angular/core": "~13.2.0", 19 | "@angular/forms": "~13.2.0", 20 | "@angular/platform-browser": "~13.2.0", 21 | "@angular/platform-browser-dynamic": "~13.2.0", 22 | "@angular/router": "~13.2.0", 23 | "rxjs": "~7.5.0", 24 | "tslib": "^2.3.0", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "~13.2.2", 29 | "@angular/cli": "~13.2.2", 30 | "@angular/compiler-cli": "~13.2.0", 31 | "@types/jasmine": "~3.10.0", 32 | "@types/node": "^12.11.1", 33 | "jasmine-core": "~4.0.0", 34 | "karma": "~6.3.0", 35 | "karma-chrome-launcher": "~3.1.0", 36 | "karma-coverage": "~2.1.0", 37 | "karma-jasmine": "~4.0.0", 38 | "karma-jasmine-html-reporter": "~1.7.0", 39 | "typescript": "~4.5.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /left-sidebar/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | Left Sidebar Application in 3 | 4 |
5 | -------------------------------------------------------------------------------- /left-sidebar/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .left-sidebar{ 2 | background-color: peachpuff; 3 | font-size: 18px; 4 | font-weight: bold; 5 | text-align: center; 6 | height:100%; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | .angular-logo{ 12 | height: 100px; 13 | } 14 | -------------------------------------------------------------------------------- /left-sidebar/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'left-sidebar'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('left-sidebar'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('.content span')?.textContent).toContain('left-sidebar app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /left-sidebar/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'left-sidebar'; 10 | } 11 | -------------------------------------------------------------------------------- /left-sidebar/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /left-sidebar/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/left-sidebar/src/assets/.gitkeep -------------------------------------------------------------------------------- /left-sidebar/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/left-sidebar/src/assets/logo.png -------------------------------------------------------------------------------- /left-sidebar/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | platformBrowserDynamic().bootstrapModule(AppModule) 11 | .catch(err => console.error(err)); 12 | -------------------------------------------------------------------------------- /left-sidebar/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /left-sidebar/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /left-sidebar/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/left-sidebar/src/favicon.ico -------------------------------------------------------------------------------- /left-sidebar/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LeftSidebar 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /left-sidebar/src/loadApp.ts: -------------------------------------------------------------------------------- 1 | import "zone.js"; 2 | import { enableProdMode } from '@angular/core'; 3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 4 | 5 | import { AppModule } from './app/app.module'; 6 | import { environment } from './environments/environment'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | const mount = ()=>{ 13 | platformBrowserDynamic().bootstrapModule(AppModule) 14 | .catch(err => console.error(err)); 15 | } 16 | 17 | export{mount} 18 | -------------------------------------------------------------------------------- /left-sidebar/src/main.ts: -------------------------------------------------------------------------------- 1 | import("./bootstrap") 2 | -------------------------------------------------------------------------------- /left-sidebar/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /left-sidebar/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /left-sidebar/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /left-sidebar/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts", 11 | "src/loadApp.ts" 12 | ], 13 | "include": [ 14 | "src/**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /left-sidebar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "sourceMap": true, 13 | "declaration": false, 14 | "downlevelIteration": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "es2020", 19 | "module": "es2020", 20 | "lib": [ 21 | "es2020", 22 | "dom" 23 | ] 24 | }, 25 | "angularCompilerOptions": { 26 | "enableI18nLegacyMessageIdFormat": false, 27 | "strictInjectionParameters": true, 28 | "strictInputAccessModifiers": true, 29 | "strictTemplates": true 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /left-sidebar/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /left-sidebar/webpack.config.js: -------------------------------------------------------------------------------- 1 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); 2 | const mf = require("@angular-architects/module-federation/webpack"); 3 | const path = require("path"); 4 | const share = mf.share; 5 | 6 | const sharedMappings = new mf.SharedMappings(); 7 | sharedMappings.register( 8 | path.join(__dirname, 'tsconfig.json'), 9 | [/* mapped paths to share */]); 10 | 11 | module.exports = { 12 | output: { 13 | uniqueName: "leftSidebar", 14 | publicPath: "auto", 15 | scriptType:'text/javascript' 16 | }, 17 | optimization: { 18 | runtimeChunk: false 19 | }, 20 | resolve: { 21 | alias: { 22 | ...sharedMappings.getAliases(), 23 | } 24 | }, 25 | experiments: { 26 | outputModule: true 27 | }, 28 | plugins: [ 29 | new ModuleFederationPlugin({ 30 | // library: { type: "module" }, 31 | 32 | // For remotes (please adjust) 33 | name: "leftSidebar", 34 | filename: "remoteEntry.js", 35 | exposes: { 36 | './leftSideBar':'./src/loadApp.ts' 37 | }, 38 | 39 | // For hosts (please adjust) 40 | // remotes: { 41 | // "mfe1": "http://localhost:3000/remoteEntry.js", 42 | 43 | // }, 44 | 45 | shared: share({ 46 | "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 47 | "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 48 | "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 49 | "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, 50 | 51 | ...sharedMappings.getDescriptors() 52 | }) 53 | 54 | }), 55 | sharedMappings.getPlugin() 56 | ], 57 | }; 58 | -------------------------------------------------------------------------------- /left-sidebar/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./webpack.config'); 2 | -------------------------------------------------------------------------------- /right-sidebar/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /right-sidebar/README.md: -------------------------------------------------------------------------------- 1 | # right-sidebar 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /right-sidebar/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /right-sidebar/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /right-sidebar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "right-sidebar", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "vue-cli-service serve --port 3003", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "vue": "^3.2.13" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.12.16", 16 | "@babel/eslint-parser": "^7.12.16", 17 | "@vue/cli-plugin-babel": "~5.0.0-rc.2", 18 | "@vue/cli-plugin-eslint": "~5.0.0-rc.2", 19 | "@vue/cli-service": "~5.0.0-rc.2", 20 | "eslint": "^7.32.0", 21 | "eslint-plugin-vue": "^8.0.3" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/vue3-essential", 30 | "eslint:recommended" 31 | ], 32 | "parserOptions": { 33 | "parser": "@babel/eslint-parser" 34 | }, 35 | "rules": {} 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not dead", 41 | "not ie 11" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /right-sidebar/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/right-sidebar/public/favicon.ico -------------------------------------------------------------------------------- /right-sidebar/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /right-sidebar/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | 15 | 30 | -------------------------------------------------------------------------------- /right-sidebar/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshmons/micro-front-end-react-application/125b4ede37c94b3b78858720165839c63e779dfe/right-sidebar/src/assets/logo.png -------------------------------------------------------------------------------- /right-sidebar/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | const mount = (el) => { 5 | createApp(App).mount(el); 6 | }; 7 | 8 | if (process.env.NODE_ENV === "development") { 9 | const rootNode = document.querySelector("#app"); 10 | if (rootNode) { 11 | mount(rootNode); 12 | } 13 | } 14 | 15 | export {mount}; 16 | 17 | -------------------------------------------------------------------------------- /right-sidebar/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service'); 2 | const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin; 3 | module.exports = defineConfig({ 4 | transpileDependencies: true, 5 | publicPath:"auto", 6 | configureWebpack: { 7 | optimization:{ 8 | splitChunks:false 9 | }, 10 | plugins: [ 11 | new ModuleFederationPlugin({ 12 | name:'rightSidebar', 13 | filename:'remoteEntry.js', 14 | exposes:{ 15 | './rightSidebar':'./src/main.js' 16 | }, 17 | shared:{ 18 | vue:{ 19 | eager:true 20 | } 21 | } 22 | }) 23 | ] 24 | } 25 | }) 26 | --------------------------------------------------------------------------------