Added the 4 CLI Packages that ease anyones MERN Stack Journey

CLI-Tools-MERN-Stack-beginners/.gitignore

@@ -0,0 +1,60 @@
+node_modules
+.DS_Store
+.dart_tool/
+.packages
+build/
+pubspec.lock
+
+doc/api/
+
+.env*
+
+*.dart.js
+*.info.json      # Produced by the --dump-info flag.
+*.js             # When generated by dart2js. Don't specify *.js if your
+                 # project includes source files written in JavaScript.
+*.js_
+*.js.deps
+*.js.map
+
+.flutter-plugins
+.flutter-plugins-dependencies
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+*.class
+
+*.log
+
+*.ctxt
+
+.mtj.tmp/
+
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+hs_err_pid*
+replay_pid*
+
+/coverage
+/build
+npm-debug.log*

CLI-Tools-MERN-Stack-beginners/configure-react/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+DS_Store
+npm-debug.log
+yarn-error.log
+yarn-debug.log
+.env
+.env.local
+.env.development.local
+.env.test
+.env.production.local

CLI-Tools-MERN-Stack-beginners/configure-react/commands/basic-react-app.command.js

@@ -0,0 +1,90 @@
+const shell = require("shelljs");
+const path = require("path");
+const details = require("configure-react/commands/details.json");
+const fs = require("fs");
+// console.log(details.reactApp.appJsData.join("\n"))
+
+const installreactRouter = () => {
+  shell.exec(`npm i react-router-dom`);
+  shell.exec(`npm i react-dom`);
+};
+
+const editRouterJs = () => {
+  routerFileCode = details.reactApp.routerFileCode.join("\n");
+  fs.writeFileSync(
+    path.join(shell.pwd() + "/src/router/RoutesLink.js"),
+    routerFileCode,
+    (err, data) => {}
+  );
+};
+
+const createRouterFolder = () => {
+  shell.exec("mkdir " + path.join(shell.pwd() + "/src/router"));
+  shell.exec("mkdir " + path.join(shell.pwd() + "/src/components"));
+
+  shell.exec("touch " + path.join(shell.pwd() + "/src/router/index.js"));
+  shell.exec("touch " + path.join(shell.pwd() + "/src/router/RoutesLink.js"));
+  editRouterJs();
+};
+
+const editAppJs = () => {
+  appJsData = details.reactApp.appJsFileCode.join("\n");
+
+  shell.exec("rm -rf " + path.join(shell.pwd() + "/src/App.css"));
+  fs.writeFileSync(
+    path.join(shell.pwd() + "/src/App.js"),
+    appJsData,
+    (err, data) => {}
+  );
+  installreactRouter();
+  createRouterFolder();
+  shell.exec("npm run start");
+};
+
+const runBuild = () => {
+  editAppJs();
+};
+
+const editTaiwindConfig = () => {
+  tailwindReactConfigData = details.tailwindReactConfigData.join("\n");
+
+  srcIndexCSSData = details.srcIndexCSSData.join("\n");
+
+  fs.writeFileSync(
+    path.join(shell.pwd() + "/tailwind.config.js"),
+    tailwindReactConfigData,
+    (err, data) => {}
+  );
+  fs.writeFileSync(
+    path.join(shell.pwd() + "/src/index.css"),
+    srcIndexCSSData,
+    (err, data) => {}
+  );
+
+  runBuild();
+};
+
+const configureForTailwind = () => {
+  shell.exec("npm install -D tailwindcss postcss autoprefixer");
+  shell.touch("tailwind.config.js");
+
+  editTaiwindConfig();
+};
+
+const createTailwindReactApp = (name) => {
+  const projectExist = require("configure-react/commands/projectExist");
+  if (projectExist(name) == true) {
+    shell.exit();
+  }
+
+  try {
+    shell.exec(`npx create-react-app ${name}`);
+    shell.cd(name);
+    configureForTailwind();
+  } catch (err) {
+    console.log(err.message);
+    shell.exit();
+  }
+};
+
+module.exports = createTailwindReactApp;

CLI-Tools-MERN-Stack-beginners/configure-react/commands/basic-react-app/basic-react-app.command.js

@@ -0,0 +1,63 @@
+const shell = require("shelljs");
+const path = require("path");
+const fs = require("fs");
+const wrapTagAround = require("configure-react/utils/wrapTagAround");
+const importAtTop = require("configure-react/utils/importAtTop");
+
+const settingReactRouter = () => {
+  // Create Routes
+  shell.exec("npx configure-react create-routes");
+};
+
+const settingRedux = () => {
+  // Create Redux
+  shell.exec("npx configure-react create-redux");
+};
+
+const settingFormik = () => {
+  // Create Formik
+};
+
+const settingAxios = () => {
+  // Create Axios
+
+
+
+
+};
+
+const startCreateReactApp = () => {
+  shell.exec(
+    "npm i react-router-dom react-router redux react-redux redux-thunk formik yup axios react-toastify react-icons "
+  );
+  settingReactRouter();
+  settingRedux();
+  settingFormik();
+  settingYup();
+  settingAxios();
+  settingReactToastify();
+  settingReactIcons();
+};
+
+const basicReactApp = (projectName) => {
+  if (projectName[0] !== ".")
+    return console.log(
+      "Please go to the project directory root where package.json and react install and run the command"
+    );
+  const currentPath = process.cwd();
+  const packageJsonPath = path.join(currentPath, "./package.json");
+  const packageJsonData = fs.readFileSync(packageJsonPath, "utf8");
+  const packageJsonDataObject = JSON.parse(packageJsonData);
+  const packageJsonDataObjectScripts = packageJsonDataObject.scripts;
+  if (
+    packageJsonDataObjectScripts["start"] !== "react-scripts start" ||
+    packageJsonData.dependencies.react === undefined
+  ) {
+    return console.log(
+      "Please install react and run the command from the project directory root where package.json and react install"
+    );
+  }
+  startCreateReactApp();
+};
+
+module.exports = basicReactApp;

CLI-Tools-MERN-Stack-beginners/configure-react/commands/basic-react-app/create-routes.js

@@ -0,0 +1,7 @@
+const path = require("path");
+const fs = require("fs");
+const shell = require("shelljs");
+const sameFileExist = require("configure-react/utils/sameFileExist");
+const makeCodePritter = require("configure-react/utils/makeCodePritter");
+const wrapTagAround = require("configure-react/utils/wrapTagAround");
+

CLI-Tools-MERN-Stack-beginners/configure-react/commands/chakraUi.command.js

@@ -0,0 +1,42 @@
+const { wrapTagAround, ifNotDot } = require("configure-react/utils");
+
+const shell = require("shelljs");
+const path = require("path");
+const fs = require("fs");
+
+const editIndexJs = (currentPath) => {
+  const indexJsPath = path.join(currentPath, "./src/index.js");
+  wrapTagAround(
+    "ChakraProvider",
+    indexJsPath,
+    "ChakraProvider",
+    "@chakra-ui/react"
+  );
+};
+
+const editPackageJson = () => {
+  console.log("editPackageJson function called");
+  const currentPath = process.cwd();
+  // const packageJsonPath = path.join(currentPath, "./package.json");
+  // const packageJson = require("./package.json");
+  console.log(currentPath);
+  editIndexJs(currentPath);
+  // editIndexJs();
+};
+const chakraUi = async ([projectName]) => {
+  function run() {
+    ifNotDot(projectName);
+    editPackageJson();
+  }
+  run();
+
+  // ifNotDot(projectName);
+  // editPackageJson();
+};
+
+module.exports = chakraUi;
+
+// Language: javascript
+
+// ======================= Add Provider in index.js =======================   // add provider in index.js file
+// Add the provider in index.js file keeping the other code as it is

CLI-Tools-MERN-Stack-beginners/configure-react/commands/createAxios.command.js

@@ -0,0 +1,106 @@
+const shell = require("shelljs");
+const path = require("path");
+const fs = require("fs");
+const wrapTagAround = require("configure-react/utils/wrapTagAround");
+const importAtTop = require("configure-react/utils/importAtTop");
+
+const detail = require("configure-react/commands/details.json");
+
+const {
+  editReadme,
+  createDotEnv,
+  createComponent,
+  checkIfRoot,
+  makeCodePritter,
+  endingScreen,
+} = require("configure-react/utils");
+
+const createAxios = (args) => {
+  if (!checkIfRoot(args)) {
+    return console.log(
+      "You are not in the root of a react app. Please run this command in the root of a react app."
+    );
+  }
+  const currentPath = process.cwd();
+  startCreatingAxios(currentPath);
+  endingScreen();
+};
+
+const startCreatingAxios = (currentPath) => {
+  shell.exec("npm i axios");
+
+  const readmePath = path.join(currentPath, "./README.md");
+  editReadme(readmePath, "axios");
+  shell.mkdir("-p", path.join(currentPath, "./src/api")); // -p flag creates parent directories if they don't exist
+  // create file if not exist
+  const env = path.join(currentPath, "./.env");
+  const componentPath = path.join(currentPath, "./src/components");
+  // if (!fs.existsSync(env)) {
+  createDotEnv(env);
+  createComponent(componentPath);
+  // }
+
+  shell.touch(path.join(currentPath, "./src/api/index.js"));
+  shell.touch(path.join(currentPath, "./src/api/login.js"));
+  shell.touch(path.join(currentPath, "./src/api/register.js"));
+  shell.touch(path.join(currentPath, "./src/api/getData.js"));
+  shell.touch(path.join(currentPath, "./src/api/postData.js"));
+
+  const indexFilePath = path.join(currentPath, "./src/api/index.js");
+  const loginFilePath = path.join(currentPath, "./src/api/login.js");
+  const registerFilePath = path.join(currentPath, "./src/api/register.js");
+  const getDataFilePath = path.join(currentPath, "./src/api/getData.js");
+  const postDataFilePath = path.join(currentPath, "./src/api/postData.js");
+
+  // edit index.js
+  const apiIndex = detail.apiIndexData.join("\n");
+  fs.writeFileSync(indexFilePath, makeCodePritter(apiIndex), "utf8", (err) => {
+    if (err) throw err;
+  });
+
+  // edit login.js
+  const loginApiData = detail.loginApiData.join("\n");
+  fs.writeFileSync(
+    loginFilePath,
+    makeCodePritter(loginApiData),
+    "utf8",
+    (err) => {
+      if (err) throw err;
+    }
+  );
+
+  // edit register.js
+  const registerApiData = detail.registerApiData.join("\n");
+  fs.writeFileSync(
+    registerFilePath,
+    makeCodePritter(registerApiData),
+    "utf8",
+    (err) => {
+      if (err) throw err;
+    }
+  );
+
+  // edit getData.js
+  const getApiData = detail.getApiData.join("\n");
+  fs.writeFileSync(
+    getDataFilePath,
+    makeCodePritter(getApiData),
+    "utf8",
+    (err) => {
+      if (err) throw err;
+    }
+  );
+
+  // edit postData.js
+  const postApiData = detail.postApiData.join("\n");
+  fs.writeFileSync(
+    postDataFilePath,
+    makeCodePritter(postApiData),
+    "utf8",
+    (err) => {
+      if (err) throw err;
+    }
+  );
+};
+
+module.exports = createAxios;