Added the 4 CLI Packages that ease anyones MERN Stack Journey by shaantanu9 · Pull Request #486 · codemistic/Web-Development · GitHub
Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions CLI-Tools-MERN-Stack-beginners/.gitignore
10 changes: 10 additions & 0 deletions CLI-Tools-MERN-Stack-beginners/configure-react/.gitignore
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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");

Original file line number Diff line number Diff line change
@@ -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
Loading