Installation

npm i -D micro-frontend-common-setup

How to add Micro Frontend support in your existing vue app

• Switch to latest node version i.e 16.13.0
• Update or install global vue cli tool to next version by running npm install -g @vue/cli@next, follow this documentation for reference https://next.cli.vuejs.org/migrations/migrate-from-v4.html.
• Delete node_modules folder and package-lock.json file from current app.
• npm install
• Then run this vue upgrade --next command in your current app, as mentioned in above vue cli migration documentation.
• Add or update following dependency.
  • "@babel/core": "^7.12.16"
  • "@babel/eslint-parser": "^7.12.16"
  • "@vue/babel-preset-app": "^4.5.12"
  • "@vue/cli-plugin-babel": "~5.0.0-rc.1"
  • "@vue/cli-plugin-eslint": "~5.0.0-alpha.5"
  • "@vue/cli-service": "~5.0.0-rc.1"
  • "@vue/compiler-sfc": "^3.0.0"
  • "eslint": "^8.3.0"
  • "eslint-plugin-vue": "^7.0.0"
  • "micro-frontend-common-setup": "^1.0.2"
  • "sass": "^1.30.0"
  • "sass-loader": "^10.1.0"
• Remove following dependency
  • node-sass if present
• Copy micro-frontend-configs folder in your current app from this repo (https://gitlab.credenceanalytics.com/frameworks-and-tools/micro-frontend-common-setup.git).
• In micro-frontend-configs folder there are three files those are remotes.js, exposes.js and shared.js. Add remotes entries in remote.js file, exposed modules or components entries in exposes.js file and shared modules entries in shared.js.
• Refer to this link https://webpack.js.org/concepts/module-federation/ to get more idea about module federation remotes, shared and exposed modules.

Changes for vue.config.js file.

1. Open vue.config.js file and store existing config object in a variable const VueConfig = {...}.
2. Import a function from micro-frontend-common-setup npm package at line no.1., e.g const overrideVueConfigs = require("micro-frontend-common-setup");
3. And then at last line pass config variable to imported function and export result module.exports = overrideVueConfigs(VueConfig).

• Dev server will run on https, If your using nginx to run this app then make change in your nginx conf file accordingly.

Usage

    // vue.config.js
    const overrideVueConfigs = require("micro-frontend-common-setup");
    // Your existing config store in a other variable
    const VueConfigs = {...}
    // Now at the end of the file
    module.exports = overrideVueConfigs(VueConfigs, {...});

Used environment variables in this package (Use micro-frontend-common-setup functions second object argument instead with same key value pairs)

• port

  • A port number to be used for devServer

• app_name

  • A name to be used for micro frontend app

• setup_public_path

  • This is a optional (A path for javascript file in which we change the public path of remote from host), path for this file should be relative to vue.config.js file, the reason is that its used by webpack directly
  • Default path is "./node_modules/micro-frontend-common-setup/setup-public-path"
  • You can create your own setup-public-path.js to add override existing logic with your logic and add path of this file relative to vue.config.js file.

• micros_remotes_path

  • A path for javascript file which returns a JSON object (All remotes entries)
  • Default path is "./micro-frontend-configs/remotes.js"

• micros_exposes_path

  • A path for javascript file which returns a JSON object (All expose module entries)
  • Default path is "./micro-frontend-configs/exposes.js"

• micros_shared_path

  • A path for javascript file which returns a JSON object (All shared module entries)
  • Default path is "./micro-frontend-configs/shared.js"

• All above paths must be relative to current working directory. Current working directory is where we are executing or requiring or importing micro-frontend-common-setup node package i.e in root directory of project vue.config.js file.

• Example

    // .env
    port = 9696 // Optional default port will be 8080
    app_name = 'micro_credcomponents' // Unique application name which will be used by hosts to access exposed components or modules
    setup_public_path = "./micro-frontends/setup-public-path" // Not required until & unless you want change something then pass path of that file
    micros_remotes_path = "./micro-frontend-configs/remotes.js" // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory
    micros_exposes_path = "./micro-frontend-configs/exposes.js" // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory
    micros_shared_path = "./micro-frontend-configs/shared.js" // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory

You can use environment variables or pass this same key pairs as a object to a function which is imported from micro-frontend-common-setup package

• E.g.

    // vue.config.js
    const overrideVueConfigs = require("micro-frontend-common-setup");
    // Your existing config store in a other variable
    const VueConfigs = {...}
    // Now at the end of the file
    module.exports = overrideVueConfigs(VueConfigs, {
        port: 9696, // Optional default port will be 8080
        app_name: "micro_credcomponents", // Unique application name which will be used by hosts to access exposed components or modules
        setup_public_path: "./micro-frontends/setup-public-path", // Not required until & unless you want change something, if yes then add relative path of that file which contains your logic.
        micros_remotes_path: "./micro-frontend-configs/remotes.js", // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory
        micros_exposes_path: "./micro-frontend-configs/exposes.js", // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory
        micros_shared_path: "./micro-frontend-configs/shared.js", // Not required until & unless `micro-frontend-configs` directory is not located in your applications root directory
    });

Note- If your remotes.js, exposes.js and shared.js files are located in this directory ./<<your_app>>/micro-frontend-configs/ then this micros_remotes_path, micros_exposes_path, micros_shared_path keys and its values are optional you can omit this keys from function arguments or from environment variable file.

Micro Frontend final example

1. How to share a component from app (remote)?

• Create exposes.js file in ./<<your_app>>/micro-frontend-configs/ directory.
• Component path should be relative to vue.config.js file.

    // ./<<your_app>>/micro-frontend-configs/exposes.js
    module.exports = {
        // Component file path should be relative to `vue.config.js` file
        "./MegaMenu": "./src/components/MegaMenu/MegaMenu.vue",

        // Sharing vue, if you want to use above shared component in legacy or other javascript framework.
        "./vue": require.resolve("vue"),
    }

• .env setup for remote app

    port = 9696
    app_name = micro_credcomponents

2. How use exposed component of remote in host?.

• Create remotes.js file in ./<<your_app>>/micro-frontend-configs/ directory.
• Add a remote app entry in above file, which is exposing or sharing components.

    // ./<<your_app>>/micro-frontend-configs/remotes.js
    const { getRemote } = require("micro-frontend-common-setup/utils");
    module.exports = {
        // import placeholder name, which will be used to import components
        "@micro.app-components": getRemote({
            remoteUrls: {
                development: "/apps/credcomponents/remoteEntry.js",
                production: "/oneview/appcomponents/dist/remoteEntry.js"
            },
            // Remote app name
            remoteAppName: "micro_credcomponents",

            // If `true` then it will pick development url from `remoteUrls` which contain remote applications entry file.
            // But while build or production it will only pick `production` url
            canIUseDevUrl: true
        })
    }

• Now in your .vue file import remote component.

    import MegaMenu from "@micro.app-components/MegaMenu"
    export default {
        render(h) {
            var file = [];
            return h(MegaMenu, 
            props: {
                menuList: [{...},{...}]
            })
        }
    }

• .env setup for host app

    PORT = 9697
    app_name = micro_appbuilder

• If you are changing or updating remotes.js, shared.js, exposes.js entries you will need to restart devServer to take that effect or change.

Other additional changes which is required.

• Rename main file main.js file to bootstrap.js
• Create main file main.js and import bootstrap.js in same file.

    import("./bootstrap") 

Legacy application setup