npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

micro-frontend-common-setup

v1.0.17

Published

Vue CLI Micro FrontEnd Common Setup

Downloads

21

Readme

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