react-mfe-gen 1.0.2 → 1.0.5

package/creation/container-creation.js

@@ -1,75 +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;
+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

@@ -1,5 +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 };
+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

@@ -1,109 +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;
+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

@@ -1,49 +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;
+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

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

package/mfe-gen.js

@@ -1,22 +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;
+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

@@ -1,6 +1,6 @@
 {
   "name": "react-mfe-gen",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "CLI tool for react Microfront end initial setup",
   "main": "index.js",
   "scripts": {

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

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

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

@@ -1,28 +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;
-};
+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

@@ -1,8 +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;
+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;
 };