react-mfe-gen 1.1.2 → 1.2.0

package/dist/constants/constants.js

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DEV_DEPENDENCIES = exports.DEFAULT_DEPENDENCIES = exports.LIBRARY_PAIR = exports.INFO_MESSAGE = exports.PROMPT = exports.CHOICES = exports.CHOICE_CONSTANTS = exports.QUESTION = void 0;
+exports.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:\n for windows os: G:\\workspace\\sample-mfe ,\n for macOS/Linux: /Users/Me/workspace/sample-mfe\n:",
+    MFE_PATH: "Please enter a path to create microfront end:\ne.g:\n for windows os: G:\\workspace\\sample-mfe ,\n for macOS/Linux: /Users/Me/workspace/sample-mfe\n:",
+    PATH: "Please enter a path to create ",
+};
+exports.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 ❌",
+};
+exports.CHOICES = {
+    ACTION: [
+        exports.CHOICE_CONSTANTS.ACTION.NEW_PROJECT,
+        exports.CHOICE_CONSTANTS.ACTION.CONTAINER,
+        exports.CHOICE_CONSTANTS.ACTION.SINGLE_MFE,
+    ],
+    STYLING: [
+        exports.CHOICE_CONSTANTS.NONE,
+        exports.CHOICE_CONSTANTS.STYLING.SASS,
+        exports.CHOICE_CONSTANTS.STYLING.BOOTSTRAP,
+        exports.CHOICE_CONSTANTS.STYLING.MATERIAL_UI,
+        exports.CHOICE_CONSTANTS.STYLING.TAILWIND,
+        exports.CHOICE_CONSTANTS.STYLING.STYLED_COMPONENTS,
+    ],
+    LANGUAGE: [
+        exports.CHOICE_CONSTANTS.LANGUAGE.JAVA_SCRIPT,
+        exports.CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT,
+    ],
+    STATE_MANAGEMENT: [
+        exports.CHOICE_CONSTANTS.NONE,
+        exports.CHOICE_CONSTANTS.STATE_MANAGEMENT.REDUX,
+        exports.CHOICE_CONSTANTS.STATE_MANAGEMENT.ZUSTAND,
+    ],
+    FORM_MANAGEMENT: [
+        exports.CHOICE_CONSTANTS.NONE,
+        exports.CHOICE_CONSTANTS.FORM_MANAGEMENT.REACT_HOOK_FORM,
+        exports.CHOICE_CONSTANTS.FORM_MANAGEMENT.FORMIK,
+    ],
+};
+exports.PROMPT = {
+    USER_NEED: [
+        {
+            message: exports.QUESTION.ACTION,
+            type: "list",
+            name: "typeOfAction",
+            choices: exports.CHOICES.ACTION,
+        },
+        {
+            message: exports.QUESTION.LANGUAGE,
+            type: "list",
+            name: "language",
+            choices: exports.CHOICES.LANGUAGE,
+        },
+    ],
+    ENTIRE_PROJECT: [
+        {
+            message: exports.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: exports.QUESTION.PROJECT_DESCRIPTION,
+            type: "input",
+            name: "projectDescription",
+        },
+        {
+            type: "input",
+            name: "numberOfMfes",
+            message: exports.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: exports.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: exports.QUESTION.MFE_DESCRIPTION,
+            type: "input",
+            name: "mfeDescription",
+        },
+    ],
+    CONTAINER: [
+        {
+            message: exports.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: exports.QUESTION.CONTAINER_DESCRIPTION,
+            type: "input",
+            name: "containerDescription",
+        },
+        {
+            type: "input",
+            name: "numberOfMfes",
+            message: exports.QUESTION.NUMBER_OF_MFES,
+            validate(value) {
+                const isNumber = !Number.isNaN(Number.parseFloat(value));
+                return isNumber || "Please enter a valid number";
+            },
+            filter: Number,
+        },
+    ],
+    COMMON: [
+        {
+            message: exports.QUESTION.STYLING,
+            type: "list",
+            name: "styling",
+            choices: exports.CHOICES.STYLING,
+        },
+        {
+            message: exports.QUESTION.STATE_MANAGEMENT,
+            type: "list",
+            name: "stateManagement",
+            choices: exports.CHOICES.STATE_MANAGEMENT,
+        },
+    ],
+    CONDITIONAL: {
+        MICROFRONT_END_NAME: {
+            message: exports.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: exports.QUESTION.CONTAINER_PATH,
+            type: "input",
+            name: "containerPath",
+        },
+        MFE_PATH: {
+            message: exports.QUESTION.MFE_PATH,
+            type: "input",
+            name: "mfePath",
+        },
+        PATH: {
+            message: exports.QUESTION.PATH,
+            type: "input",
+            name: "path",
+        },
+        FORM_MANAGEMENT: {
+            message: exports.QUESTION.FORM_MANAGEMENT,
+            type: "list",
+            name: "formManagement",
+            choices: exports.CHOICES.FORM_MANAGEMENT,
+        },
+    },
+};
+exports.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! 💻✨",
+};
+exports.LIBRARY_PAIR = {
+    STYLING: {
+        [exports.CHOICE_CONSTANTS.STYLING.TAILWIND]: [
+            "tailwindcss",
+            "postcss",
+            "autoprefixer",
+        ],
+        [exports.CHOICE_CONSTANTS.STYLING.SASS]: ["sass"],
+        [exports.CHOICE_CONSTANTS.STYLING.MATERIAL_UI]: [
+            "@mui/material",
+            "@emotion/react",
+            "@emotion/styled",
+            "@mui/icons-material",
+        ],
+        [exports.CHOICE_CONSTANTS.STYLING.BOOTSTRAP]: ["bootstrap"],
+        [exports.CHOICE_CONSTANTS.STYLING.STYLED_COMPONENTS]: ["styled-components"],
+        [exports.CHOICE_CONSTANTS.NONE]: [],
+    },
+    STATE_MANAGEMENT: {
+        [exports.CHOICE_CONSTANTS.NONE]: [],
+        [exports.CHOICE_CONSTANTS.STATE_MANAGEMENT.REDUX]: [
+            "@reduxjs/toolkit",
+            "react-redux",
+        ],
+        [exports.CHOICE_CONSTANTS.STATE_MANAGEMENT.ZUSTAND]: ["zustand"],
+    },
+    FORM_MANAGEMENT: {
+        [exports.CHOICE_CONSTANTS.NONE]: [],
+        [exports.CHOICE_CONSTANTS.FORM_MANAGEMENT.REACT_HOOK_FORM]: [
+            "react-hook-form",
+            "@hookform/resolvers",
+            "yup",
+        ],
+        [exports.CHOICE_CONSTANTS.FORM_MANAGEMENT.FORMIK]: ["formik", "yup"],
+    },
+};
+exports.DEFAULT_DEPENDENCIES = ["axios", "react-router-dom"];
+exports.DEFAULT_DEV_DEPENDENCIES = ["cross-env", "react-app-rewired"];

package/dist/creation/container-creation.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const inquirer_1 = __importDefault(require("inquirer"));
+const constants_1 = require("../constants/constants");
+const utility_1 = require("../utils/utility");
+const path_1 = __importDefault(require("path"));
+const containerCreation = async (language) => {
+    // To store different working dir
+    const workingDirectories = [];
+    try {
+        // Get typescript flag
+        const isTypeScript = language === constants_1.CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+        // Declare array to store list of mfe names
+        const mfeNames = [];
+        const { containerName, containerDescription, numberOfMfes } = await inquirer_1.default.prompt(constants_1.PROMPT.CONTAINER);
+        // Interate to get each mfe name
+        for (let i = 0; i < numberOfMfes; i++) {
+            const { mfeName } = await inquirer_1.default.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(`${constants_1.INFO_MESSAGE.CREATE_APP}${containerName} as container`);
+        // Get container path and app requirements
+        const commonInfo = await inquirer_1.default.prompt([
+            constants_1.PROMPT.CONDITIONAL.CONTAINER_PATH,
+            ...constants_1.PROMPT.COMMON,
+        ]);
+        // store working dir
+        // store working dir
+        const containerFullPath = path_1.default.join(commonInfo.containerPath, containerName);
+        workingDirectories.push(containerFullPath);
+        // Go inside user specified dir
+        process.chdir(commonInfo.containerPath);
+        // Array to store CRA command
+        const appCommand = utility_1.utils.getLanguageTemplate(containerName, isTypeScript);
+        // Create container react app
+        await utility_1.utils.createReactApp(appCommand);
+        // Make normal react app into MFE container
+        await utility_1.utils.configureContainer({
+            projectName: containerName,
+            projectDescription: containerDescription,
+            ...commonInfo,
+            isTypeScript,
+        }, mfeNames);
+        // Let user know container created status
+        utility_1.mfeGenLogger.successLog(`${constants_1.INFO_MESSAGE.SUCCESS.CONTAINER}\n${constants_1.INFO_MESSAGE.HAPPY_CODING}`);
+    }
+    catch (e) {
+        utility_1.mfeGenLogger.ErrorLog(`Error: ${e}`);
+        utility_1.utils.cleanupProject(workingDirectories);
+    }
+};
+exports.default = containerCreation;

package/dist/creation/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.singleMfeCreation = exports.containerCreation = exports.newProjectCreation = void 0;
+const new_pro_creation_1 = __importDefault(require("./new-pro-creation"));
+exports.newProjectCreation = new_pro_creation_1.default;
+const container_creation_1 = __importDefault(require("./container-creation"));
+exports.containerCreation = container_creation_1.default;
+const single_mfe_creation_1 = __importDefault(require("./single-mfe-creation"));
+exports.singleMfeCreation = single_mfe_creation_1.default;

package/dist/creation/new-pro-creation.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const inquirer_1 = __importDefault(require("inquirer"));
+const constants_1 = require("../constants/constants");
+const utility_1 = require("../utils/utility");
+const newProjectCreation = async (language) => {
+    // To store different working dir
+    const workingDirectories = [];
+    try {
+        // Get typescript flag
+        const isTypeScript = language === constants_1.CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+        // Declare array to store list of mfe names
+        const mfeNames = [];
+        // Get basic project info
+        const projectInfo = await inquirer_1.default.prompt(constants_1.PROMPT.ENTIRE_PROJECT);
+        // Interate to get each mfe name
+        for (let i = 0; i < projectInfo.numberOfMfes; i++) {
+            const { mfeName } = await inquirer_1.default.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(`${constants_1.INFO_MESSAGE.CREATE_APP}${projectInfo.projectName} as container`);
+        // Get container path and app requirements
+        const commonInfo = await inquirer_1.default.prompt([
+            constants_1.PROMPT.CONDITIONAL.CONTAINER_PATH,
+            ...constants_1.PROMPT.COMMON,
+        ]);
+        // store working dir
+        const containerFullPath = path_1.default.join(commonInfo.containerPath, projectInfo.projectName);
+        workingDirectories.push(containerFullPath);
+        // Go inside user specified dir
+        process.chdir(commonInfo.containerPath);
+        // Array to store CRA command
+        const appCommand = utility_1.utils.getLanguageTemplate(projectInfo.projectName, isTypeScript);
+        // Create container react app
+        await utility_1.utils.createReactApp(appCommand);
+        // Make normal react app into MFE container
+        await utility_1.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(`${constants_1.INFO_MESSAGE.CREATE_APP}${mfeName}\n`);
+            const mfeInfo = await inquirer_1.default.prompt([
+                {
+                    message: `${constants_1.QUESTION.PATH}${mfeName} as microfront end\ne.g:\n for windows os: G:/workspace/sample-mfe ,\n for macOS/Linux: /Users/Me/workspace/sample-mfe\n:`,
+                    type: "input",
+                    name: "path",
+                },
+                constants_1.PROMPT.CONDITIONAL.FORM_MANAGEMENT,
+                ...constants_1.PROMPT.COMMON,
+            ]);
+            // store working dir
+            const mfeFullPath = path_1.default.join(mfeInfo.path, mfeName);
+            workingDirectories.push(mfeFullPath);
+            // Go inside user specified mfe dir
+            process.chdir(mfeInfo.path);
+            const mfeAppCommand = utility_1.utils.getLanguageTemplate(mfeName, isTypeScript);
+            // Create mfe react app
+            await utility_1.utils.createReactApp(mfeAppCommand);
+            // Make normal react app into MFE container
+            await utility_1.utils.configureMfe({ ...mfeInfo, projectName: projectInfo.projectName, isTypeScript }, mfeName, i);
+        }
+        utility_1.mfeGenLogger.successLog(`${constants_1.INFO_MESSAGE.SUCCESS.NEW_PRO}\n${constants_1.INFO_MESSAGE.HAPPY_CODING}`);
+    }
+    catch (e) {
+        utility_1.mfeGenLogger.ErrorLog(`Error: ${e}`);
+        utility_1.utils.cleanupProject(workingDirectories);
+    }
+};
+exports.default = newProjectCreation;

package/dist/creation/single-mfe-creation.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const inquirer_1 = __importDefault(require("inquirer"));
+const constants_1 = require("../constants/constants");
+const utility_1 = require("../utils/utility");
+const path_1 = __importDefault(require("path"));
+const singleMfeCreation = async (language) => {
+    // To store different working dir
+    const workingDirectories = [];
+    try {
+        // Get typescript flag
+        const isTypeScript = language === constants_1.CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
+        const { mfeName, mfeDescription } = await inquirer_1.default.prompt(constants_1.PROMPT.ONE_MFE);
+        console.log(`${constants_1.INFO_MESSAGE.CREATE_APP}${mfeName} as microfront end`);
+        const mfeInfo = await inquirer_1.default.prompt([
+            constants_1.PROMPT.CONDITIONAL.MFE_PATH,
+            ...constants_1.PROMPT.COMMON,
+            constants_1.PROMPT.CONDITIONAL.FORM_MANAGEMENT,
+        ]);
+        // store working dir
+        const mfepPath = path_1.default.join(mfeInfo.mfePath, mfeName);
+        workingDirectories.push(mfepPath);
+        // Go inside user specified dir
+        process.chdir(mfeInfo.mfePath);
+        // Array to store CRA command
+        const appCommand = utility_1.utils.getLanguageTemplate(mfeName, isTypeScript);
+        // Create container react app
+        await utility_1.utils.createReactApp(appCommand);
+        // Make normal react app into MFE container
+        await utility_1.utils.configureMfe({ ...mfeInfo, projectName: mfeName, mfeDescription, isTypeScript }, mfeName, 0);
+        utility_1.mfeGenLogger.successLog(`${constants_1.INFO_MESSAGE.SUCCESS.ONE_MFE}\n${constants_1.INFO_MESSAGE.HAPPY_CODING}`);
+    }
+    catch (e) {
+        utility_1.mfeGenLogger.ErrorLog(`Error: ${e}`);
+        utility_1.utils.cleanupProject(workingDirectories);
+    }
+};
+exports.default = singleMfeCreation;

package/dist/mfe-gen.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const inquirer_1 = __importDefault(require("inquirer"));
+const constants_1 = require("./constants/constants");
+const index_js_1 = require("./creation/index.js");
+const utility_1 = require("./utils/utility");
+const mfeGen = async () => {
+    utility_1.mfeGenLogger.notifyLog(constants_1.INFO_MESSAGE.DISCLAIMER);
+    const { typeOfAction, language } = await inquirer_1.default.prompt(constants_1.PROMPT.USER_NEED);
+    switch (typeOfAction) {
+        case constants_1.CHOICE_CONSTANTS.ACTION.NEW_PROJECT:
+            (0, index_js_1.newProjectCreation)(language);
+            break;
+        case constants_1.CHOICE_CONSTANTS.ACTION.CONTAINER:
+            (0, index_js_1.containerCreation)(language);
+            break;
+        case constants_1.CHOICE_CONSTANTS.ACTION.SINGLE_MFE:
+            (0, index_js_1.singleMfeCreation)(language);
+            break;
+    }
+};
+mfeGen();

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppContent = void 0;
+const getAppContent = (containerName = 'container') => {
+    return `import ${containerName} from "./${containerName}";
+
+function App() {
+  return <${containerName} />;
+}
+
+export default App;
+`;
+};
+exports.getAppContent = getAppContent;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContainerCompContent = void 0;
+const utility_1 = require("../../utils/utility");
+const getContainerCompContent = (containerCompName, mfes) => {
+    let containerComp = `import React from "react";\n`;
+    for (let i = 0; i < mfes.length; i++) {
+        containerComp += `import {${utility_1.utils.toCompName(mfes[i])}} from "./microfrontends/${utility_1.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 += `      <${utility_1.utils.toCompName(mfes[i])} name={"${utility_1.utils.toCompName(mfes[i])}"} host={getMfeOrigin(process.env.REACT_APP_${mfes[i].toUpperCase()})} />\n`;
+    }
+    containerComp += `</div>
+  );
+};
+
+export default ${containerCompName};`;
+    return containerComp;
+};
+exports.getContainerCompContent = getContainerCompContent;

package/dist/templates/container/env-template.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEnvContent = void 0;
+const getEnvContent = (mfes) => {
+    let envTemplate = "";
+    for (let i = 0; i < mfes.length; i++) {
+        envTemplate += `REACT_APP_${mfes[i].toUpperCase()} = 900${i}\n`;
+    }
+    return envTemplate;
+};
+exports.getEnvContent = getEnvContent;

package/dist/templates/container/heart-template.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHeartContent = void 0;
+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;
+`;
+};
+exports.getHeartContent = getHeartContent;

package/dist/templates/container/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMfeCompContent = exports.getHeartContent = exports.getEnvContent = exports.getContainerCompContent = exports.getAppContent = void 0;
+const app_comp_template_js_1 = require("./app-comp-template.js");
+Object.defineProperty(exports, "getAppContent", { enumerable: true, get: function () { return app_comp_template_js_1.getAppContent; } });
+const container_comp_template_js_1 = require("./container-comp-template.js");
+Object.defineProperty(exports, "getContainerCompContent", { enumerable: true, get: function () { return container_comp_template_js_1.getContainerCompContent; } });
+const env_template_js_1 = require("./env-template.js");
+Object.defineProperty(exports, "getEnvContent", { enumerable: true, get: function () { return env_template_js_1.getEnvContent; } });
+const heart_template_js_1 = require("./heart-template.js");
+Object.defineProperty(exports, "getHeartContent", { enumerable: true, get: function () { return heart_template_js_1.getHeartContent; } });
+const mfe_comp_template_js_1 = require("./mfe-comp-template.js");
+Object.defineProperty(exports, "getMfeCompContent", { enumerable: true, get: function () { return mfe_comp_template_js_1.getMfeCompContent; } });

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMfeCompContent = void 0;
+const getMfeCompContent = (mfeName, isTypeScript) => {
+    return `import MicroFrontend from "../MicroFrontend";
+
+export const ${mfeName} = (props${isTypeScript ? ": any" : ""}) => {
+  return <MicroFrontend name={props.name} host={props.host} />;
+};
+`;
+};
+exports.getMfeCompContent = getMfeCompContent;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMfeAppContent = void 0;
+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;
+`;
+};
+exports.getMfeAppContent = getMfeAppContent;