react-mfe-gen 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+# react-mfe-gen
+CLI tool for react Microfront end initial setup

package/constants.js

@@ -0,0 +1,280 @@
+export const QUESTION = {
+  ACTION: "Select an action:",
+  LANGUAGE: "Choose your preferred language:",
+  PROJECT_NAME: "Enter your project name:",
+  PROJECT_DESCRIPTION: "Enter your project description:",
+  NUMBER_OF_MFES: "How many micro-frontends do you plan to include?",
+  MFE_NAME:
+    "Enter your micro-frontend name:\n**Note:** This will be used as a prefix in window functions.\n:",
+  MFE_DESCRIPTION: "Enter a description for your micro-frontend:",
+  CONTAINER_NAME:
+    "Enter your container app name:\n**Note:** This should be prefix word in your microfrontends window functions.\n:",
+  CONTAINER_DESCRIPTION: "Enter a description for your container app:",
+  STYLING: "Select a styling solution:",
+  STATE_MANAGEMENT: "Select a state management library:",
+  FORM_MANAGEMENT: "Select a form management library:",
+  CONDITIONAL_MFE_NAME: "Enter your micro-frontend name:",
+  CONTAINER_PATH:
+    "Please enter a path to create container:\ne.g: G:\\workspace\\sample-container\n:",
+  MFE_PATH:
+    "Please enter a path to create microfront end:\ne.g: G:\\workspace\\sample-mfe\n:",
+  PATH: "Please enter a path to create ",
+};
+export const CHOICE_CONSTANTS = {
+  ACTION: {
+    NEW_PROJECT: "Create a new project 🚀",
+    CONTAINER: "Create only a container 📦",
+    SINGLE_MFE: "Create a single micro-frontend 🌐",
+  },
+  STYLING: {
+    SASS: "Sass 🎨",
+    TAILWIND: "Tailwind 🌊",
+    MATERIAL_UI: "Material UI 🧩",
+    BOOTSTRAP: "Bootstrap 🥾",
+    STYLED_COMPONENTS: "Styled Components ✍️",
+  },
+  LANGUAGE: {
+    JAVA_SCRIPT: "JavaScript 🟨",
+    TYPE_SCRIPT: "TypeScript 🔷",
+  },
+  STATE_MANAGEMENT: {
+    REDUX: "Redux 🔄",
+    ZUSTAND: "Zustand 🐻",
+  },
+  FORM_MANAGEMENT: {
+    REACT_HOOK_FORM: "React-hook-form 🪝",
+    FORMIK: "Formik 📝",
+  },
+  NONE: "None ❌",
+};
+
+export const CHOICES = {
+  ACTION: [
+    CHOICE_CONSTANTS.ACTION.NEW_PROJECT,
+    CHOICE_CONSTANTS.ACTION.CONTAINER,
+    CHOICE_CONSTANTS.ACTION.SINGLE_MFE,
+  ],
+  STYLING: [
+    CHOICE_CONSTANTS.NONE,
+    CHOICE_CONSTANTS.STYLING.SASS,
+    CHOICE_CONSTANTS.STYLING.BOOTSTRAP,
+    CHOICE_CONSTANTS.STYLING.MATERIAL_UI,
+    CHOICE_CONSTANTS.STYLING.TAILWIND,
+    CHOICE_CONSTANTS.STYLING.STYLED_COMPONENTS,
+  ],
+  LANGUAGE: [
+    CHOICE_CONSTANTS.LANGUAGE.JAVA_SCRIPT,
+    CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT,
+  ],
+  STATE_MANAGEMENT: [
+    CHOICE_CONSTANTS.NONE,
+    CHOICE_CONSTANTS.STATE_MANAGEMENT.REDUX,
+    CHOICE_CONSTANTS.STATE_MANAGEMENT.ZUSTAND,
+  ],
+  FORM_MANAGEMENT: [
+    CHOICE_CONSTANTS.NONE,
+    CHOICE_CONSTANTS.FORM_MANAGEMENT.REACT_HOOK_FORM,
+    CHOICE_CONSTANTS.FORM_MANAGEMENT.FORMIK,
+  ],
+};
+
+export const PROMPT = {
+  USER_NEED: [
+    {
+      message: QUESTION.ACTION,
+      type: "list",
+      name: "typeOfAction",
+      choices: CHOICES.ACTION,
+    },
+    {
+      message: QUESTION.LANGUAGE,
+      type: "list",
+      name: "language",
+      choices: CHOICES.LANGUAGE,
+    },
+  ],
+  ENTIRE_PROJECT: [
+    {
+      message: QUESTION.PROJECT_NAME,
+      type: "input",
+      name: "projectName",
+      validate(value) {
+        if (!/^[a-z-]+$/.test(value)) {
+          return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+        }
+        return true;
+      },
+    },
+    {
+      message: QUESTION.PROJECT_DESCRIPTION,
+      type: "input",
+      name: "projectDescription",
+    },
+    {
+      type: "input",
+      name: "numberOfMfes",
+      message: QUESTION.NUMBER_OF_MFES,
+      validate(value) {
+        const isNumber = !Number.isNaN(Number.parseFloat(value));
+        return isNumber || "Please enter a valid number";
+      },
+      filter: Number,
+    },
+  ],
+  ONE_MFE: [
+    {
+      message: QUESTION.MFE_NAME,
+      type: "input",
+      name: "mfeName",
+      validate(value) {
+        if (!/^[a-z-]+$/.test(value)) {
+          return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+        }
+        return true;
+      },
+    },
+    {
+      message: QUESTION.MFE_DESCRIPTION,
+      type: "input",
+      name: "mfeDescription",
+    },
+  ],
+  CONTAINER: [
+    {
+      message: QUESTION.CONTAINER_NAME,
+      type: "input",
+      name: "containerName",
+      validate(value) {
+        if (!/^[a-z-]+$/.test(value)) {
+          return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+        }
+        return true;
+      },
+    },
+    {
+      message: QUESTION.CONTAINER_DESCRIPTION,
+      type: "input",
+      name: "containerDescription",
+    },
+    {
+      type: "input",
+      name: "numberOfMfes",
+      message: QUESTION.NUMBER_OF_MFES,
+      validate(value) {
+        const isNumber = !Number.isNaN(Number.parseFloat(value));
+        return isNumber || "Please enter a valid number";
+      },
+      filter: Number,
+    },
+  ],
+  COMMON: [
+    {
+      message: QUESTION.STYLING,
+      type: "list",
+      name: "styling",
+      choices: CHOICES.STYLING,
+    },
+    {
+      message: QUESTION.STATE_MANAGEMENT,
+      type: "list",
+      name: "stateManagement",
+      choices: CHOICES.STATE_MANAGEMENT,
+    },
+  ],
+  CONDITIONAL: {
+    MICROFRONT_END_NAME: {
+      message: QUESTION.CONDITIONAL_MFE_NAME,
+      type: "input",
+      name: "mfeName",
+      validate(value) {
+        if (!/^[a-z-]+$/.test(value)) {
+          return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+        }
+        return true;
+      },
+    },
+    CONTAINER_PATH: {
+      message: QUESTION.CONTAINER_PATH,
+      type: "input",
+      name: "containerPath",
+    },
+    MFE_PATH: {
+      message: QUESTION.MFE_PATH,
+      type: "input",
+      name: "mfePath",
+    },
+    PATH: {
+      message: QUESTION.PATH,
+      type: "input",
+      name: "path",
+    },
+    MICROFRONT_END_NAME: {
+      message: QUESTION.CONDITIONAL_MFE_NAME,
+      type: "input",
+      name: "mfeName",
+    },
+    FORM_MANAGEMENT: {
+      message: QUESTION.FORM_MANAGEMENT,
+      type: "list",
+      name: "formManagement",
+      choices: CHOICES.FORM_MANAGEMENT,
+    },
+  },
+};
+
+export const INFO_MESSAGE = {
+  DISCLAIMER:
+    "Hello there! 👋\n\nThis tool currently supports micro-frontend creation using runtime integration via custom script injection ⚙️.\nPlease keep this limitation in mind when developing your MFE applications 📌.\n",
+  CREATE_APP: "Let's create ",
+  CONFIGURE_CONTAINER: "Configuring the container... 🛠️",
+  APP_CREATION: "Creating your React app... ⚛️  ",
+  i_DEPENDENCIES: "Installing dependencies... 📦  ",
+  i_DEV_DEPENDENCIES: "Installing dev dependencies... 🧩  ",
+  SUCCESS: {
+    NEW_PRO: "New project created successfully! 🎉",
+    CONTAINER: "Container created successfully! 📦",
+    ONE_MFE: "Microfront end created successfully! 🌐",
+  },
+  HAPPY_CODING: "Happy coding! 💻✨",
+};
+
+export const LIBRARY_PAIR = {
+  STYLING: {
+    [CHOICE_CONSTANTS.STYLING.TAILWIND]: [
+      "tailwindcss",
+      "postcss",
+      "autoprefixer",
+    ],
+    [CHOICE_CONSTANTS.STYLING.SASS]: ["sass"],
+    [CHOICE_CONSTANTS.STYLING.MATERIAL_UI]: [
+      "@mui/material",
+      "@emotion/react",
+      "@emotion/styled",
+      "@mui/icons-material",
+    ],
+    [CHOICE_CONSTANTS.STYLING.BOOTSTRAP]: ["bootstrap"],
+    [CHOICE_CONSTANTS.STYLING.STYLED_COMPONENTS]: ["styled-components"],
+    [CHOICE_CONSTANTS.NONE]: [],
+  },
+  STATE_MANAGEMENT: {
+    [CHOICE_CONSTANTS.NONE]: [],
+    [CHOICE_CONSTANTS.STATE_MANAGEMENT.REDUX]: [
+      "@reduxjs/toolkit",
+      "react-redux",
+    ],
+    [CHOICE_CONSTANTS.STATE_MANAGEMENT.ZUSTAND]: ["zustand"],
+  },
+  FORM_MANAGEMENT: {
+    [CHOICE_CONSTANTS.NONE]: [],
+    [CHOICE_CONSTANTS.FORM_MANAGEMENT.REACT_HOOK_FORM]: [
+      "react-hook-form",
+      "@hookform/resolvers",
+      "yup",
+    ],
+    [CHOICE_CONSTANTS.FORM_MANAGEMENT.FORMIK]: ["formik", "yup"],
+  },
+};
+
+export const DEFAULT_DEPENDENCIES = ["axios", "react-router-dom"];
+
+export const DEFAULT_DEV_DEPENDENCIES = ["cross-env", "react-app-rewired"];

package/creation/container-creation.js

@@ -0,0 +1,75 @@
+import inquirer from "inquirer";
+import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "../constants.js";
+import utils from "../utility.js";
+
+const containerCreation = async (language) => {
+  // To store different working dir
+  const wrokingDirectories = [];
+  try {
+    // Get typescript flag
+    const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+    // Declare array to store list of mfe names
+    const mfeNames = [];
+
+    const { containerName, containerDescription, numberOfMfes } =
+      await inquirer.prompt(PROMPT.CONTAINER);
+
+    // Interate to get each mfe name
+    for (let i = 0; i < numberOfMfes; i++) {
+      const { mfeName } = await inquirer.prompt([
+        {
+          message: `Enter your name of Microfront end ${i + 1}:`,
+          type: "input",
+          name: "mfeName",
+          validate(value) {
+            if (!/^[a-z-]+$/.test(value)) {
+              return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+            }
+            return true;
+          },
+        },
+      ]);
+      mfeNames.push(mfeName);
+    }
+
+    console.log(`${INFO_MESSAGE.CREATE_APP}${containerName} as container`);
+
+    // Get container path and app requirements
+    const commonInfo = await inquirer.prompt([
+      PROMPT.CONDITIONAL.CONTAINER_PATH,
+      ...PROMPT.COMMON,
+    ]);
+
+    // store working dir
+    wrokingDirectories.push(commonInfo.containerPath);
+
+    // Go inside user specified dir
+    process.chdir(commonInfo.containerPath);
+
+    // Array to store CRA command
+    const appCommand = utils.getLanguageTemplate(containerName, isTypeScript);
+
+    // Create container react app
+    await utils.createReactApp(appCommand);
+
+    // Make normal react app into MFE container
+    await utils.configureContainer(
+      {
+        projectName: containerName,
+        projectDescription: containerDescription,
+        ...commonInfo,
+        isTypeScript,
+      },
+      mfeNames
+    );
+
+    // Let user know container created status
+    console.log(
+      `${INFO_MESSAGE.SUCCESS.CONTAINER}\n${INFO_MESSAGE.HAPPY_CODING}`
+    );
+  } catch {
+    utils.cleanupProject(wrokingDirectories);
+  }
+};
+
+export default containerCreation;

package/creation/index.js

@@ -0,0 +1,5 @@
+import newProjectCreation from "./new-pro-creation.js";
+import containerCreation from "./container-creation.js";
+import singleMfeCreation from "./single-mfe-creation.js";
+
+export { newProjectCreation, containerCreation, singleMfeCreation };

package/creation/new-pro-creation.js

@@ -0,0 +1,109 @@
+import inquirer from "inquirer";
+import {
+  PROMPT,
+  INFO_MESSAGE,
+  QUESTION,
+  CHOICE_CONSTANTS,
+} from "../constants.js";
+import utils from "../utility.js";
+
+const newProjectCreation = async (language) => {
+  // To store different working dir
+  const wrokingDirectories = [];
+  try {
+    // Get typescript flag
+    const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+    // Declare array to store list of mfe names
+    const mfeNames = [];
+    // Get basic project info
+    const projectInfo = await inquirer.prompt(PROMPT.ENTIRE_PROJECT);
+
+    // Interate to get each mfe name
+    for (let i = 0; i < projectInfo.numberOfMfes; i++) {
+      const { mfeName } = await inquirer.prompt([
+        {
+          message: `Enter your name of Microfront end ${i + 1}:`,
+          type: "input",
+          name: "mfeName",
+          validate(value) {
+            if (!/^[a-z-]+$/.test(value)) {
+              return "Please use only lowercase letters and '-' (numbers, capital letters, and other symbols are not allowed).";
+            }
+            return true;
+          },
+        },
+      ]);
+      mfeNames.push(mfeName);
+    }
+
+    console.log(
+      `${INFO_MESSAGE.CREATE_APP}${projectInfo.projectName} as container`
+    );
+
+    // Get container path and app requirements
+    const commonInfo = await inquirer.prompt([
+      PROMPT.CONDITIONAL.CONTAINER_PATH,
+      ...PROMPT.COMMON,
+    ]);
+
+    // store working dir
+    wrokingDirectories.push(commonInfo.containerPath);
+    // Go inside user specified dir
+    process.chdir(commonInfo.containerPath);
+
+    // Array to store CRA command
+    const appCommand = utils.getLanguageTemplate(
+      projectInfo.projectName,
+      isTypeScript
+    );
+
+    // Create container react app
+    await utils.createReactApp(appCommand);
+
+    // Make normal react app into MFE container
+    await utils.configureContainer(
+      { ...projectInfo, ...commonInfo, isTypeScript },
+      mfeNames
+    );
+
+    // Get mfe requirements for each mfe
+    for (let i = 0; i < mfeNames.length; i++) {
+      const mfeName = mfeNames[i];
+
+      console.log(`${INFO_MESSAGE.CREATE_APP}${mfeName}\n`);
+
+      const mfeInfo = await inquirer.prompt([
+        {
+          message: `${QUESTION.PATH}${mfeName} as microfront end\ne.g: G:\\workspace\\sample-mfe\n:`,
+          type: "input",
+          name: "path",
+        },
+        PROMPT.CONDITIONAL.FORM_MANAGEMENT,
+        ...PROMPT.COMMON,
+      ]);
+      // store working dir
+      wrokingDirectories.push(mfeInfo.path);
+      // Go inside user specified mfe dir
+      process.chdir(mfeInfo.path);
+      const mfeAppCommand = utils.getLanguageTemplate(mfeName, isTypeScript);
+
+      // Create mfe react app
+      await utils.createReactApp(mfeAppCommand);
+
+      // Make normal react app into MFE container
+      await utils.configureMfe(
+        { ...mfeInfo, projectName: projectInfo.projectName, isTypeScript },
+        mfeName,
+        i
+      );
+    }
+
+    console.log(
+      `${INFO_MESSAGE.SUCCESS.NEW_PRO}\n${INFO_MESSAGE.HAPPY_CODING}`
+    );
+  } catch {
+    utils.cleanupProject(wrokingDirectories);
+  }
+};
+
+export default newProjectCreation;

package/creation/single-mfe-creation.js

@@ -0,0 +1,49 @@
+import inquirer from "inquirer";
+import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "../constants.js";
+import utils from "../utility.js";
+
+const singleMfeCreation = async (language) => {
+  // To store different working dir
+  const wrokingDirectories = [];
+  try {
+    // Get typescript flag
+    const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+
+    const { mfeName, mfeDescription } = await inquirer.prompt(PROMPT.ONE_MFE);
+
+    console.log(`${INFO_MESSAGE.CREATE_APP}${mfeName} as microfront end`);
+
+    const mfeInfo = await inquirer.prompt([
+      PROMPT.CONDITIONAL.MFE_PATH,
+      ...PROMPT.COMMON,
+      PROMPT.CONDITIONAL.FORM_MANAGEMENT,
+    ]);
+
+    // store working dir
+    wrokingDirectories.push(mfeInfo.mfePath);
+
+    // Go inside user specified dir
+    process.chdir(mfeInfo.mfePath);
+
+    // Array to store CRA command
+    const appCommand = utils.getLanguageTemplate(mfeName, isTypeScript);
+
+    // Create container react app
+    await utils.createReactApp(appCommand);
+
+    // Make normal react app into MFE container
+    await utils.configureMfe(
+      { ...mfeInfo, projectName: mfeName, isTypeScript },
+      mfeName,
+      0
+    );
+
+    console.log(
+      `${INFO_MESSAGE.SUCCESS.ONE_MFE}\n${INFO_MESSAGE.HAPPY_CODING}`
+    );
+  } catch {
+    utils.cleanupProject(wrokingDirectories)
+  }
+};
+
+export default singleMfeCreation;

package/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import mfeGen from './mfe-gen.js';
+
+mfeGen();

package/mfe-gen.js

@@ -0,0 +1,22 @@
+import inquirer from "inquirer";
+import { PROMPT, INFO_MESSAGE, CHOICE_CONSTANTS } from "./constants.js";
+import {newProjectCreation,containerCreation,singleMfeCreation} from "./creation/index.js";
+
+const mfeGen = async () => {
+  console.log(INFO_MESSAGE.DISCLAIMER);
+
+  const { typeOfAction, language } = await inquirer.prompt(PROMPT.USER_NEED);
+  switch (typeOfAction) {
+    case CHOICE_CONSTANTS.ACTION.NEW_PROJECT:
+      newProjectCreation(language);
+      break;
+    case CHOICE_CONSTANTS.ACTION.CONTAINER:
+      containerCreation(language);
+      break;
+    case CHOICE_CONSTANTS.ACTION.SINGLE_MFE:
+      singleMfeCreation(language);
+      break;
+  }
+};
+
+export default mfeGen;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-mfe-gen",
+  "version": "1.0.0",
+  "description": "CLI tool for react Microfront end initial setup",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VengadeshRaj/react-mfe-gen.git"
+  },
+  "author": "Vengadesh Raj",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/VengadeshRaj/react-mfe-gen/issues"
+  },
+  "homepage": "https://github.com/VengadeshRaj/react-mfe-gen#readme",
+  "dependencies": {
+    "cli-spinner": "^0.2.10",
+    "execa": "^9.6.0",
+    "inquirer": "^12.9.4"
+  },
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+  "react-mfe-gen": "./index.js"
+}
+}

package/templates/container/app-comp-template.js

@@ -0,0 +1,10 @@
+export const getAppContent=(containerName='container')=>{
+    return`import ${containerName} from "./${containerName}";
+
+function App() {
+  return <${containerName} />;
+}
+
+export default App;
+`
+}

package/templates/container/container-comp-template.js

@@ -0,0 +1,28 @@
+import utils from "../../utility.js";
+
+export const getContainerCompContent = (containerCompName, mfes) => {
+  let containerComp = `import React from "react";\n`;
+
+  for (let i = 0; i < mfes.length; i++) {
+    containerComp += `import {${utils.toCompName(mfes[i])}} from "./microfrontends/${utils.toCompName(mfes[i])}";\n`;
+  }
+
+  containerComp += `\n\nfunction ${containerCompName}() {
+  const getMfeOrigin =(port:string|undefined='')=> \`\${window.location.protocol}//\${window.location.hostname}:\${port}\`;
+
+  return (
+    <div>
+      <h1>Hello from ${containerCompName}</h1>\n`;
+
+  for (let i = 0; i < mfes.length; i++) {
+    containerComp += `      <${utils.toCompName(mfes[i]) } name={"${utils.toCompName(mfes[i])}"} host={getMfeOrigin(process.env.REACT_APP_${mfes[i].toUpperCase()})} />\n`;
+  }
+
+  containerComp += `</div>
+  );
+};
+
+export default ${containerCompName};`;
+
+  return containerComp;
+};

package/templates/container/env-template.js

@@ -0,0 +1,8 @@
+export const getEnvContent = (mfes) => {
+  let envTemplate = "";
+
+  for (let i = 0; i < mfes.length; i++) {
+    envTemplate += `REACT_APP_${mfes[i].toUpperCase()} = 900${i}\n`
+  }
+  return envTemplate;
+};

package/templates/container/heart-template.js

@@ -0,0 +1,60 @@
+export const getHeartContent=(containerName='container')=>{
+    return `
+import React from "react";
+
+class MicroFrontend extends React.Component {
+  componentDidMount() {
+    const { name, host, document } = this.props;
+    const scriptId = \`micro-frontend-script-\${name}\`;
+
+    if (document.getElementById(scriptId)) {
+      this.renderMicroFrontend();
+      return;
+    }
+
+    fetch(\`\${host}/asset-manifest.json\`)
+      .then((res) => res.json())
+      .then((manifest) => {
+        const script = document.createElement("script");
+        script.id = scriptId;
+        script.crossOrigin = "";
+        script.src = \`\${host}\${manifest["files"]["main.js"]}\`;
+        script.onload = this.renderMicroFrontend;
+        document.head.appendChild(script);
+        const link = document.createElement("link");
+        link.id = scriptId;
+        link.href = \`\${host}\${manifest["files"]["main.css"]}\`;
+        link.onload = this.renderMicroFrontend;
+        link.rel = "stylesheet";
+        document.head.appendChild(link);
+      });
+  }
+
+  componentWillUnmount() {
+    const { name, window } = this.props;
+
+    window[\`unmount\${name}\`] && window[\`unmount\${name}\`](
+      \`\${name}-${containerName}\`
+    );
+  }
+
+  renderMicroFrontend = () => {
+    const { name, window, history } = this.props;
+
+    window[\`render\${name}\`] &&
+      window[\`render\${name}\`](\`\${name}-${containerName}\`, history);
+  };
+
+  render() {
+    return <main id={\`\${this.props.name}-${containerName}\`} />;
+  }
+}
+
+MicroFrontend.defaultProps = {
+  document,
+  window,
+};
+
+export default MicroFrontend;
+`
+}

package/templates/container/index.js

@@ -0,0 +1,17 @@
+import { getAppContent } from "./app-comp-template.js";
+
+import { getContainerCompContent } from "./container-comp-template.js";
+
+import { getEnvContent } from "./env-template.js";
+
+import { getHeartContent } from "./heart-template.js";
+
+import { getMfeCompContent } from "./mfe-comp-template.js";
+
+export {
+  getAppContent,
+  getContainerCompContent,
+  getEnvContent,
+  getHeartContent,
+  getMfeCompContent,
+};

package/templates/container/mfe-comp-template.js

@@ -0,0 +1,8 @@
+export const getMfeCompContent = (mfeName, isTypeScript) => {
+  return `import MicroFrontend from "../MicroFrontend";
+
+export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
+  return <MicroFrontend name={props.name} host={props.host} />;
+};
+`;
+};

package/templates/mfe/app-comp-template.js

@@ -0,0 +1,14 @@
+export const getMfeAppContent=(mfeName='mfe',isTs)=>{
+    return`import React from 'react';
+
+function App(prop${isTs ? ": any" : ""}) {
+  return (
+   <div>
+    <h1>Hello from ${mfeName}</h1>
+   </div>
+  );
+}
+
+export default App;
+`
+}

package/templates/mfe/config-overrides-template.js

@@ -0,0 +1,13 @@
+export const getConfigOverridesContent =()=>{
+    return`module.exports = {
+    webpack: (config, env) => {
+      config.optimization.runtimeChunk = false;
+      config.optimization.splitChunks = {
+        cacheGroups: {
+          default: false,
+        },
+      };
+      return config;
+    },
+  };`
+}

package/templates/mfe/index.js

@@ -0,0 +1,9 @@
+import { getMfeAppContent } from "./app-comp-template.js";
+import { getConfigOverridesContent } from "./config-overrides-template.js";
+import { getmfeIndexContent } from "./mfe-index-template.js";
+
+export {
+  getMfeAppContent,
+  getConfigOverridesContent,
+  getmfeIndexContent
+};

package/templates/mfe/mfe-index-template.js

@@ -0,0 +1,36 @@
+export const getmfeIndexContent=(mfeName='mfe',container='',isTs)=>{
+    return`import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+declare global {
+  interface Window {
+    render${mfeName}: (containerId${isTs?": string":""}, history${isTs?"?: any":""}) => void;
+    unmount${mfeName}: (containerId${isTs?": string":""}) => void;
+  }
+}
+
+window.render${mfeName} = (containerId${isTs?": string":""}, history${isTs?"?: any":""}) => {
+  const container${isTs?": any":""} = document.getElementById(containerId);
+  if (container) {
+    const root = createRoot(container);
+    root.render(<App history={history} />);
+  }
+};
+
+window.unmount${mfeName} = (containerId${isTs?": string":""}) => {
+  const container = document.getElementById(containerId);
+  if (container) {
+    const root = createRoot(container);
+    root.unmount();
+  }
+};
+
+const rootContainer = document.getElementById("root");
+if (rootContainer && !document.getElementById("${mfeName}-${container}")) {
+  createRoot(rootContainer).render(<App />);
+}
+
+
+`
+}

package/utility.js

@@ -0,0 +1,231 @@
+import { Spinner } from "cli-spinner";
+import { execa } from "execa";
+import {
+  INFO_MESSAGE,
+  LIBRARY_PAIR,
+  DEFAULT_DEPENDENCIES,
+  DEFAULT_DEV_DEPENDENCIES,
+} from "./constants.js";
+import {
+  getHeartContent,
+  getAppContent,
+  getMfeCompContent,
+  getContainerCompContent,
+  getEnvContent,
+} from "./templates/container/index.js";
+import { writeFile, unlink, mkdir, readFile, rm } from "fs/promises";
+import {
+  getConfigOverridesContent,
+  getMfeAppContent,
+  getmfeIndexContent,
+} from "./templates/mfe/index.js";
+class utils {
+  static async runTask(logMessage, task) {
+    const spinner = new Spinner(logMessage + "%s");
+    spinner.setSpinnerString("⠋⠙⠹⠸⠼⠴⠦⠧⠏");
+    spinner.setSpinnerDelay(40);
+    spinner.start();
+    try {
+      await task();
+      spinner.stop(true);
+    } catch (err) {
+      spinner.stop(true);
+      throw err;
+    }
+  }
+  static async cleanupProject(dirs) {
+    console.log(`Cleaning up the project directory: ${dirs}`);
+    try {
+      for (let i = 0; i < dirs.length; i++) {
+        await rm(dirs[i], { recursive: true });
+      }
+    } catch (err) {
+      console.log(`Failed to clean project directory\n Error:${err}`);
+    }
+  }
+  static async createReactApp(appCommand) {
+    try {
+      await utils.runTask(INFO_MESSAGE.APP_CREATION, () =>
+        execa("npx", ["create-react-app", ...appCommand])
+      );
+    } catch (err) {
+      throw err;
+    }
+  }
+  static async installPackages(packages, isDev = false) {
+    try {
+      let message = INFO_MESSAGE.i_DEPENDENCIES;
+      if (isDev) {
+        message = INFO_MESSAGE.i_DEV_DEPENDENCIES;
+        packages = [...packages, "--save-dev"];
+      }
+      await utils.runTask(message, () =>
+        execa("npm", ["install", ...packages])
+      );
+    } catch (err) {
+      throw err;
+    }
+  }
+  static getLanguageTemplate(appName, isTs) {
+    return isTs ? [appName, "--template", "typescript"] : [appName];
+  }
+
+  static withExt(name, isTs) {
+    return isTs ? `${name}.tsx` : `${name}.jsx`;
+  }
+  static withScript(name, isTs) {
+    return isTs ? `${name}.ts` : `${name}.js`;
+  }
+  static toCompName(AppName) {
+    return AppName.replace(/[-\s]+/g, " ")
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join("");
+  }
+  static async updateScripts(dir, newScripts) {
+    const rawPackageJson = await readFile(dir);
+    const packageJSON = JSON.parse(rawPackageJson, "utf8");
+
+    packageJSON.scripts = newScripts;
+
+    await writeFile(dir, JSON.stringify(packageJSON, null, 2), "utf8");
+  }
+  static async configureContainer(info, mfeNames) {
+    // Destructure inputs
+    const {
+      projectName,
+      projectDescription,
+      isTypeScript,
+      styling,
+      stateManagement,
+    } = info;
+
+    // Go inside src
+    process.chdir(`${process.cwd()}\\${projectName}\\src`);
+
+    // Create heart of container
+    await utils.runTask(INFO_MESSAGE.CONFIGURE_CONTAINER, () =>
+      writeFile("MicroFrontend.js", getHeartContent(projectName))
+    );
+
+    // Convert project name into component name format
+    const containerCompName = utils.toCompName(projectName);
+
+    // Create container component
+    await utils.runTask(INFO_MESSAGE.CONFIGURE_CONTAINER, () =>
+      writeFile(
+        utils.withExt(containerCompName, isTypeScript),
+        getContainerCompContent(containerCompName, mfeNames)
+      )
+    );
+
+    // Modify App.jsx or .tsx file
+    await utils.runTask(INFO_MESSAGE.CONFIGURE_CONTAINER, () =>
+      writeFile(
+        utils.withExt("App", isTypeScript),
+        getAppContent(containerCompName)
+      )
+    );
+
+    // Drop unnecessary files
+    await unlink("App.css");
+    await unlink("logo.svg");
+
+    // Create MFE folders
+    await mkdir("microfrontends");
+
+    // Go inside MFE folder
+    process.chdir(`${process.cwd()}\\microfrontends`);
+
+    // Run loop and create number of mfe components
+    for (let i = 0; i < mfeNames.length; i++) {
+      const mfeCompName = utils.toCompName(mfeNames[i]);
+      await writeFile(
+        utils.withExt(mfeCompName, isTypeScript),
+        getMfeCompContent(mfeCompName, isTypeScript)
+      );
+    }
+
+    // Go to root
+    process.chdir("../../");
+    // Create env file with specified MFE default ports
+    await writeFile(".env", getEnvContent(mfeNames));
+
+    // Install common and user defined packages
+    const packagesList = [
+      ...DEFAULT_DEPENDENCIES,
+      ...LIBRARY_PAIR.STYLING[styling],
+      ...LIBRARY_PAIR.STATE_MANAGEMENT[stateManagement],
+    ];
+    await utils.installPackages(packagesList);
+
+    // Create readme
+    await writeFile("README.md", `# ${projectName}\n${projectDescription}`);
+
+    console.log(`${projectName} created ✅`);
+  }
+  static async configureMfe(info, mfeName, index) {
+    // Destructure inputs
+    const {
+      projectName,
+      formManagement,
+      styling,
+      stateManagement,
+      isTypeScript,
+    } = info;
+    // Go inside src
+    process.chdir(`${process.cwd()}\\${mfeName}\\src`);
+
+    // Modify App.jsx or .tsx file
+    await writeFile(
+      utils.withExt("App", isTypeScript),
+      getMfeAppContent(utils.toCompName(mfeName), isTypeScript)
+    );
+
+    // Modify index.jsx or .tsx file
+    await writeFile(
+      utils.withExt("index", isTypeScript),
+      getmfeIndexContent(utils.toCompName(mfeName), projectName, isTypeScript)
+    );
+
+    // Drop unnecessary files
+    await unlink("App.css");
+    await unlink("logo.svg");
+    await unlink("index.css");
+
+    // Go to root
+    process.chdir("../");
+
+    // add config override file
+    await writeFile("config-overrides.js", getConfigOverridesContent());
+
+    const updatedScript = {
+      start: `cross-env PORT=900${index} react-app-rewired start`,
+      build: "react-app-rewired build",
+      test: "react-app-rewired test",
+      eject: "react-app-rewired eject",
+    };
+
+    // modify package.json scripts
+    utils.updateScripts(`${process.cwd()}\\package.json`, updatedScript);
+
+    // Install common and user defined packages
+    const packagesList = [
+      ...DEFAULT_DEPENDENCIES,
+      ...LIBRARY_PAIR.STYLING[styling],
+      ...LIBRARY_PAIR.STATE_MANAGEMENT[stateManagement],
+      ...LIBRARY_PAIR.FORM_MANAGEMENT[formManagement],
+    ];
+
+    await utils.installPackages(packagesList);
+
+    await utils.installPackages(DEFAULT_DEV_DEPENDENCIES, true);
+
+    // Create readme
+    await writeFile("README.md", `# ${mfeName}`);
+
+    console.log(`${mfeName} created ✅`);
+  }
+}
+
+export default utils;