react-mfe-gen 1.0.7 → 1.1.0

package/constants.js

@@ -15,9 +15,9 @@ export const QUESTION = {
   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:",
+    "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: G:\\workspace\\sample-mfe\n:",
+    "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 ",
 };
 export const CHOICE_CONSTANTS = {

package/creation/container-creation.js

@@ -4,7 +4,7 @@ import utils from "../utility.js";
 
 const containerCreation = async (language) => {
   // To store different working dir
-  const wrokingDirectories = [];
+  const workingDirectories = [];
   try {
     // Get typescript flag
     const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
@@ -41,9 +41,12 @@ const containerCreation = async (language) => {
     ]);
 
     // store working dir
-    wrokingDirectories.push(
-      `${commonInfo.containerPath}\\${containerName}`
+    // store working dir
+    const containerFullPath = path.join(
+      commonInfo.containerPath,
+      containerName
     );
+    workingDirectories.push(containerFullPath);
 
     // Go inside user specified dir
     process.chdir(commonInfo.containerPath);
@@ -70,7 +73,7 @@ const containerCreation = async (language) => {
       `${INFO_MESSAGE.SUCCESS.CONTAINER}\n${INFO_MESSAGE.HAPPY_CODING}`
     );
   } catch {
-    utils.cleanupProject(wrokingDirectories);
+    utils.cleanupProject(workingDirectories);
   }
 };
 

package/creation/new-pro-creation.js

@@ -1,3 +1,4 @@
+import path from "path";
 import inquirer from "inquirer";
 import {
   PROMPT,
@@ -9,7 +10,7 @@ import utils from "../utility.js";
 
 const newProjectCreation = async (language) => {
   // To store different working dir
-  const wrokingDirectories = [];
+  const workingDirectories = [];
   try {
     // Get typescript flag
     const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
@@ -47,9 +48,11 @@ const newProjectCreation = async (language) => {
     ]);
 
     // store working dir
-    wrokingDirectories.push(
-      `${commonInfo.containerPath}\\${projectInfo.projectName}`
+    const containerFullPath = path.join(
+      commonInfo.containerPath,
+      projectInfo.projectName
     );
+    workingDirectories.push(containerFullPath);
     // Go inside user specified dir
     process.chdir(commonInfo.containerPath);
 
@@ -76,7 +79,7 @@ const newProjectCreation = async (language) => {
 
       const mfeInfo = await inquirer.prompt([
         {
-          message: `${QUESTION.PATH}${mfeName} as microfront end\ne.g: G:\\workspace\\sample-mfe\n:`,
+          message: `${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",
         },
@@ -84,10 +87,9 @@ const newProjectCreation = async (language) => {
         ...PROMPT.COMMON,
       ]);
       // store working dir
-      wrokingDirectories.push(
-        `${mfeInfo.path}\\${mfeName}`
-      );
-      // Go inside user specified mfe dir
+      const mfeFullPath = path.join(mfeInfo.path, mfeName);
+      workingDirectories.push(mfeFullPath);
+       // Go inside user specified mfe dir
       process.chdir(mfeInfo.path);
       const mfeAppCommand = utils.getLanguageTemplate(mfeName, isTypeScript);
 
@@ -106,7 +108,7 @@ const newProjectCreation = async (language) => {
       `${INFO_MESSAGE.SUCCESS.NEW_PRO}\n${INFO_MESSAGE.HAPPY_CODING}`
     );
   } catch {
-    utils.cleanupProject(wrokingDirectories);
+    utils.cleanupProject(workingDirectories);
   }
 };
 

package/creation/single-mfe-creation.js

@@ -4,7 +4,7 @@ import utils from "../utility.js";
 
 const singleMfeCreation = async (language) => {
   // To store different working dir
-  const wrokingDirectories = [];
+  const workingDirectories = [];
   try {
     // Get typescript flag
     const isTypeScript = language === CHOICE_CONSTANTS.LANGUAGE.TYPE_SCRIPT;
@@ -19,10 +19,9 @@ const singleMfeCreation = async (language) => {
       PROMPT.CONDITIONAL.FORM_MANAGEMENT,
     ]);
 
-        // store working dir
-    wrokingDirectories.push(
-      `${mfeInfo.mfePath}\\${mfeName}`
-    );
+    // store working dir
+    const mfepPath = path.join(mfeInfo.mfePath, mfeName);
+    workingDirectories.push(mfepPath);
 
     // Go inside user specified dir
     process.chdir(mfeInfo.mfePath);
@@ -35,7 +34,7 @@ const singleMfeCreation = async (language) => {
 
     // Make normal react app into MFE container
     await utils.configureMfe(
-      { ...mfeInfo, projectName: mfeName, isTypeScript },
+      { ...mfeInfo, projectName: mfeName,mfeDescription, isTypeScript },
       mfeName,
       0
     );
@@ -44,7 +43,7 @@ const singleMfeCreation = async (language) => {
       `${INFO_MESSAGE.SUCCESS.ONE_MFE}\n${INFO_MESSAGE.HAPPY_CODING}`
     );
   } catch {
-    utils.cleanupProject(wrokingDirectories)
+    utils.cleanupProject(workingDirectories);
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-mfe-gen",
-  "version": "1.0.7",
-  "description": "CLI tool for react Microfront end initial setup",
+  "version": "1.1.0",
+  "description": "Generate React micro-frontends, containers, and projects using a simple CLI with runtime integration support.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -31,8 +31,16 @@
   "keywords": [
     "react",
     "microfrontend",
+    "micro-frontend",
     "mfe",
     "cli",
-    "generator"
+    "generator",
+    "react-cli",
+    "project-generator",
+    "react-microfrontend",
+    "microfrontend-generator",
+    "react-setup",
+    "react-boilerplate",
+    "runtime-integration"
   ]
 }

package/utility.js

@@ -1,3 +1,4 @@
+import path from "path";
 import { Spinner } from "cli-spinner";
 import { execa } from "execa";
 import {
@@ -19,6 +20,7 @@ import {
   getMfeAppContent,
   getmfeIndexContent,
 } from "./templates/mfe/index.js";
+
 class utils {
   static async runTask(logMessage, task) {
     const spinner = new Spinner(logMessage + "%s");
@@ -33,16 +35,18 @@ class utils {
       throw err;
     }
   }
+
   static async cleanupProject(dirs) {
-    console.log(`Cleaning up the project directory: ${dirs}`);
     try {
       for (let i = 0; i < dirs.length; i++) {
+        console.log(`Cleaning up the project directory: ${dirs[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, () =>
@@ -52,6 +56,7 @@ class utils {
       throw err;
     }
   }
+
   static async installPackages(packages, isDev = false) {
     try {
       let message = INFO_MESSAGE.i_DEPENDENCIES;
@@ -66,6 +71,7 @@ class utils {
       throw err;
     }
   }
+
   static getLanguageTemplate(appName, isTs) {
     return isTs ? [appName, "--template", "typescript"] : [appName];
   }
@@ -73,15 +79,18 @@ class utils {
   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");
@@ -90,8 +99,8 @@ class utils {
 
     await writeFile(dir, JSON.stringify(packageJSON, null, 2), "utf8");
   }
+
   static async configureContainer(info, mfeNames) {
-    // Destructure inputs
     const {
       projectName,
       projectDescription,
@@ -101,17 +110,15 @@ class utils {
     } = info;
 
     // Go inside src
-    process.chdir(`${process.cwd()}\\${projectName}\\src`);
+    const srcPath = path.join(process.cwd(), projectName, "src");
+    process.chdir(srcPath);
 
-    // 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),
@@ -119,7 +126,6 @@ class utils {
       )
     );
 
-    // Modify App.jsx or .tsx file
     await utils.runTask(INFO_MESSAGE.CONFIGURE_CONTAINER, () =>
       writeFile(
         utils.withExt("App", isTypeScript),
@@ -127,17 +133,14 @@ class utils {
       )
     );
 
-    // 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`);
+    const mfeFolderPath = path.join(process.cwd(), "microfrontends");
+    process.chdir(mfeFolderPath);
 
-    // Run loop and create number of mfe components
     for (let i = 0; i < mfeNames.length; i++) {
       const mfeCompName = utils.toCompName(mfeNames[i]);
       await writeFile(
@@ -146,12 +149,10 @@ class utils {
       );
     }
 
-    // Go to root
-    process.chdir("../../");
-    // Create env file with specified MFE default ports
+    process.chdir(path.resolve(srcPath, ".."));
+
     await writeFile(".env", getEnvContent(mfeNames));
 
-    // Install common and user defined packages
     const packagesList = [
       ...DEFAULT_DEPENDENCIES,
       ...LIBRARY_PAIR.STYLING[styling],
@@ -159,44 +160,40 @@ class utils {
     ];
     await utils.installPackages(packagesList);
 
-    // Create readme
     await writeFile("README.md", `# ${projectName}\n${projectDescription}`);
 
     console.log(`${projectName} created ✅\n`);
   }
+
   static async configureMfe(info, mfeName, index) {
-    // Destructure inputs
     const {
       projectName,
       formManagement,
       styling,
       stateManagement,
+      mfeDescription = "",
       isTypeScript,
     } = info;
-    // Go inside src
-    process.chdir(`${process.cwd()}\\${mfeName}\\src`);
 
-    // Modify App.jsx or .tsx file
+    const mfeSrcPath = path.join(process.cwd(), mfeName, "src");
+    process.chdir(mfeSrcPath);
+
     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("../");
+    process.chdir(path.resolve(mfeSrcPath, ".."));
 
-    // add config override file
     await writeFile("config-overrides.js", getConfigOverridesContent());
 
     const updatedScript = {
@@ -206,10 +203,11 @@ class utils {
       eject: "react-app-rewired eject",
     };
 
-    // modify package.json scripts
-    utils.updateScripts(`${process.cwd()}\\package.json`, updatedScript);
+    await utils.updateScripts(
+      path.join(process.cwd(), "package.json"),
+      updatedScript
+    );
 
-    // Install common and user defined packages
     const packagesList = [
       ...DEFAULT_DEPENDENCIES,
       ...LIBRARY_PAIR.STYLING[styling],
@@ -218,11 +216,9 @@ class utils {
     ];
 
     await utils.installPackages(packagesList);
-
     await utils.installPackages(DEFAULT_DEV_DEPENDENCIES, true);
 
-    // Create readme
-    await writeFile("README.md", `# ${mfeName}`);
+    await writeFile("README.md", `# ${mfeName}\n##${mfeDescription}`);
 
     console.log(`${mfeName} created ✅`);
   }