create-mf

PISMO CREATE MICROFRONTEND CLI

This is a CLI tool to create and manage pre-configured Pismo Micro Frontend projects

How to install

On a terminal:

npm i @pismo/create-mf@latest

Obs: You must have an account logged in NPM and be a member of Pismo Organization

How to use

The command signature

npx @pismo/create-mf@latest project {command} {options}

To see all the available commands

npx @pismo/create-mf@latest project help

Translations

The default language of CLI is english, but change to portuguese if you prefer. To prefer portuguese instead of english language when available, add the argument --lang:pt to the end of any command:

npx @pismo/create-mf@latest project --lang:pt

Commands

Project

Creates a new mf project.

npx @pismo/create-mf@latest project

The microfontend will be create in your current folder, automatically install all dependencies with yarn and start a project on configured port (default 3000).

Using with MF Container

When the microfrontend project are createb by create-mf, is created a folder containerConfig with a file template, that you need to copy and paste in the file containerConfig in the root of console-container-mf each object of configuration, in the correct array.

Only to clarify what happens, in the created microfrontend, inside webpack configuration (vue.config, craco.config), inside Module Federation Plugin, use the name and the exposes keys to add in container project. Example:

vue.config - created microfrontend

  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "mfVue",
        filename: "remoteEntry.js",
        shared: pkg.dependencies,
        remotes: getRemotes(),
        exposes: {
          "./mfVueApp": "./src/bootstrap", // [exposed key]: [exposed path]
        },
      }),
    ],
  },

containerConfig - at main container

menuConfig: [
    {
        Icon: Meh, // icon inside the console-ui
        path: '/mfVue',
        match: ['/mfVue'],
        label: "MF Vue", // label in container menu
        open: false,
        selected: false,
    },
]

applicationConfig: [
    {
        name: 'MfVueComponent', // must be capitalized, because is the name of component in React
        routePath: ['/mfVue'],
        importPath: 'mfVue/mfVueApp', // importPath: [mf name]/[mf exposed key]
        expose: {
            mfVue: 'mfVue@http://localhost:3003/remoteEntry.js' // [mf name]: [mf name]@[mf build path]
        }
    },
]

Probally this new microfrontend wasn't added to the remotes config, in the package @pismo/mf-remotes-config; or if you only need to test locally any microfrontend, will be necessary to add the configuration manually in the craco.config.template (at main container) like that:

/**
 * Overrides remotes for development mode
 */
if (remotesEnvironment === 'development') {
  Object.assign(remotesEntries, {
    // users: 'users@http://localhost:3003/remoteEntry.js',
    // organization: 'organization@http://localhost:3004/remoteEntry.js',
    // programs: 'programs@http://localhost:3002/remoteEntry.js',
    // UI: 'UI@http://localhost:3001/remoteEntry.js',
    mfVue: 'mfVue@http://localhost:3003/remoteEntry.js'
  });
}

After, if you like to run this microfrontend locally inside container, execute yarn serve:build (it not working with start commnad). This command will build the microfrontend and serve it in the configured port, exposing the remotoEntry.js.

References

• Inquirer: CLI interactions (questions and answers).

• FS Extra: work with files and folders actions (copy, paste, write...).

Next Features

• Create vanilla boilerplate