├── .gitignore ├── builder ├── index.js └── index.ts ├── img ├── s01.png ├── s02.png ├── s03.png ├── s04.png └── s05.png ├── index.js ├── index.ts ├── package-lock.json ├── package.json ├── readme.md ├── source ├── InputModules │ ├── ReadCurrentDirName │ │ ├── index.js │ │ └── index.ts │ ├── getLanguages │ │ ├── index.js │ │ └── index.ts │ ├── getNavigatedDirPath │ │ ├── index.js │ │ └── index.ts │ ├── getProjectName │ │ ├── index.js │ │ └── index.ts │ ├── getStyleLibrary │ │ ├── index.js │ │ └── index.ts │ └── getTemplate │ │ ├── index.js │ │ └── index.ts ├── scripts.js ├── scripts.ts └── stylePrint │ ├── index.js │ └── index.ts ├── templates ├── javascript+webpack+react+chakraui │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── app.css │ │ ├── index.css │ │ └── index.js │ └── webpack.config.js ├── javascript+webpack+react+mui │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── app.css │ │ ├── index.css │ │ └── index.js │ └── webpack.config.js ├── javascript+webpack+react+scss │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── app.css │ │ ├── index.css │ │ └── index.js │ └── webpack.config.js ├── javascript+webpack+react+tailwindCSS │ ├── .gitignore │ ├── .postcssrc │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── app.css │ │ ├── index.css │ │ └── index.js │ ├── tailwind.config.js │ └── webpack.config.js ├── typescript+webpack+react+chakraui │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.tsx │ │ ├── app.css │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── typescript+webpack+react+mui │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.tsx │ │ ├── app.css │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js ├── typescript+webpack+react+scss │ ├── .gitignore │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.tsx │ │ ├── app.css │ │ └── index.tsx │ ├── tsconfig.json │ └── webpack.config.js └── typescript+webpack+react+tailwindCSS │ ├── .gitignore │ ├── .postcssrc │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── App.tsx │ ├── app.css │ ├── index.css │ └── index.tsx │ ├── tailwind.config.js │ ├── tsconfig.json │ └── webpack.config.js ├── tsconfig.json └── utils ├── constants.js ├── constants.ts ├── types.js └── types.ts /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /builder/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const fs_extra_1 = require("fs-extra"); 4 | const path_1 = require("path"); 5 | exports.default = async (payload) => { 6 | try { 7 | const { projectNameResponse, languageNameResponse, styleLibraryResponse, templateNameResponse, } = payload; 8 | const templateName = [ 9 | languageNameResponse, 10 | "webpack", 11 | templateNameResponse, 12 | styleLibraryResponse, 13 | ]; 14 | const templatePath = (0, path_1.resolve)(__dirname, "../templates", templateName.join("+")); 15 | let destinationPath; 16 | if (projectNameResponse.isNew) { 17 | destinationPath = (0, path_1.resolve)(process.cwd(), projectNameResponse.ProjectName); 18 | (0, fs_extra_1.mkdirSync)(destinationPath); 19 | } 20 | else { 21 | destinationPath = process.cwd(); 22 | } 23 | (0, fs_extra_1.copySync)(templatePath, destinationPath); 24 | const packageJsonPath = (0, path_1.resolve)(destinationPath, "package.json"); 25 | const packageJson = (0, fs_extra_1.readJsonSync)(packageJsonPath); 26 | packageJson.name = projectNameResponse.ProjectName; 27 | // Write the modified package.json back to the destination 28 | (0, fs_extra_1.writeJsonSync)(packageJsonPath, packageJson, { spaces: 2 }); 29 | } 30 | catch (err) { 31 | console.log("Oops! Something went wrong."); 32 | console.log("Internal Error:", err); 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /builder/index.ts: -------------------------------------------------------------------------------- 1 | import { copySync, mkdirSync, readJsonSync, writeJsonSync } from "fs-extra"; 2 | import { resolve } from "path"; 3 | 4 | interface BuilderInterface { 5 | projectNameResponse: { 6 | ProjectName?: string; 7 | PathName?: string; 8 | isNew: boolean; 9 | }; 10 | languageNameResponse: string; 11 | templateNameResponse: string; 12 | styleLibraryResponse: string; // Corrected typo in variable name 13 | } 14 | 15 | export default async (payload: BuilderInterface) => { 16 | try { 17 | const { 18 | projectNameResponse, 19 | languageNameResponse, 20 | styleLibraryResponse, 21 | templateNameResponse, 22 | } = payload; 23 | 24 | const templateName = [ 25 | languageNameResponse, 26 | "webpack", 27 | templateNameResponse, 28 | styleLibraryResponse, 29 | ]; 30 | 31 | const templatePath = resolve( 32 | __dirname, 33 | "../templates", 34 | templateName.join("+") 35 | ); 36 | 37 | let destinationPath: string; 38 | 39 | if (projectNameResponse.isNew) { 40 | destinationPath = resolve( 41 | process.cwd(), 42 | projectNameResponse.ProjectName as string 43 | ); 44 | mkdirSync(destinationPath); 45 | } else { 46 | destinationPath = process.cwd(); 47 | } 48 | 49 | copySync(templatePath, destinationPath); 50 | 51 | const packageJsonPath = resolve(destinationPath, "package.json"); 52 | const packageJson = readJsonSync(packageJsonPath); 53 | packageJson.name = projectNameResponse.ProjectName; 54 | 55 | // Write the modified package.json back to the destination 56 | writeJsonSync(packageJsonPath, packageJson, { spaces: 2 }); 57 | } catch (err) { 58 | console.log("Oops! Something went wrong."); 59 | console.log("Internal Error:", err); 60 | } 61 | }; 62 | -------------------------------------------------------------------------------- /img/s01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/img/s01.png -------------------------------------------------------------------------------- /img/s02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/img/s02.png -------------------------------------------------------------------------------- /img/s03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/img/s03.png -------------------------------------------------------------------------------- /img/s04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/img/s04.png -------------------------------------------------------------------------------- /img/s05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/img/s05.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | "use strict"; 3 | var __importDefault = (this && this.__importDefault) || function (mod) { 4 | return (mod && mod.__esModule) ? mod : { "default": mod }; 5 | }; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | const scripts_1 = __importDefault(require("./source/scripts")); 8 | const stylePrint_1 = __importDefault(require("./source/stylePrint")); 9 | // Function to handle interruption (Ctrl + C) 10 | const handleInterrupt = () => { 11 | process.exit(1); 12 | }; 13 | // Set up the interrupt event listener 14 | process.on("SIGINT", handleInterrupt); 15 | // Your Enquirer prompt 16 | const ScriptIntruption = async () => { 17 | try { 18 | await (0, scripts_1.default)(); 19 | } 20 | catch (error) { 21 | (0, stylePrint_1.default)(` 22 | Oh, Ok 23 | hope See you again! ❣️`); 24 | } 25 | finally { 26 | // Remove the event listener when the prompt is completed 27 | process.removeListener("SIGINT", handleInterrupt); 28 | } 29 | }; 30 | // Call the function 31 | ScriptIntruption(); 32 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import scriptsRunner from "./source/scripts"; 3 | import stylishPrint from "./source/stylePrint"; 4 | 5 | // Function to handle interruption (Ctrl + C) 6 | const handleInterrupt = () => { 7 | process.exit(1); 8 | }; 9 | 10 | // Set up the interrupt event listener 11 | process.on("SIGINT", handleInterrupt); 12 | 13 | // Your Enquirer prompt 14 | const ScriptIntruption = async () => { 15 | try { 16 | await scriptsRunner(); 17 | } catch (error) { 18 | stylishPrint( 19 | ` 20 | Oh, Ok 21 | hope See you again! ❣️` 22 | ); 23 | } finally { 24 | // Remove the event listener when the prompt is completed 25 | process.removeListener("SIGINT", handleInterrupt); 26 | } 27 | }; 28 | 29 | // Call the function 30 | ScriptIntruption(); 31 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-app-init", 3 | "version": "1.0.9", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "web-app-init", 9 | "version": "1.0.9", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/clear": "^0.1.4", 13 | "clear": "^0.1.0", 14 | "enquirer": "^2.4.1", 15 | "fs-extra": "^11.2.0", 16 | "shelljs": "^0.8.5", 17 | "ts-node": "^10.9.2" 18 | }, 19 | "bin": { 20 | "web-app-init": "index.js" 21 | }, 22 | "devDependencies": { 23 | "@types/fs-extra": "^11.0.4", 24 | "@types/node": "^20.11.4", 25 | "@types/shelljs": "^0.8.15", 26 | "typescript": "^5.3.3" 27 | } 28 | }, 29 | "node_modules/@cspotcode/source-map-support": { 30 | "version": "0.8.1", 31 | "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", 32 | "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", 33 | "dependencies": { 34 | "@jridgewell/trace-mapping": "0.3.9" 35 | }, 36 | "engines": { 37 | "node": ">=12" 38 | } 39 | }, 40 | "node_modules/@jridgewell/resolve-uri": { 41 | "version": "3.1.1", 42 | "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", 43 | "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", 44 | "engines": { 45 | "node": ">=6.0.0" 46 | } 47 | }, 48 | "node_modules/@jridgewell/sourcemap-codec": { 49 | "version": "1.4.15", 50 | "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", 51 | "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" 52 | }, 53 | "node_modules/@jridgewell/trace-mapping": { 54 | "version": "0.3.9", 55 | "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", 56 | "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", 57 | "dependencies": { 58 | "@jridgewell/resolve-uri": "^3.0.3", 59 | "@jridgewell/sourcemap-codec": "^1.4.10" 60 | } 61 | }, 62 | "node_modules/@tsconfig/node10": { 63 | "version": "1.0.9", 64 | "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", 65 | "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==" 66 | }, 67 | "node_modules/@tsconfig/node12": { 68 | "version": "1.0.11", 69 | "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", 70 | "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==" 71 | }, 72 | "node_modules/@tsconfig/node14": { 73 | "version": "1.0.3", 74 | "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", 75 | "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==" 76 | }, 77 | "node_modules/@tsconfig/node16": { 78 | "version": "1.0.4", 79 | "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", 80 | "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==" 81 | }, 82 | "node_modules/@types/clear": { 83 | "version": "0.1.4", 84 | "resolved": "https://registry.npmjs.org/@types/clear/-/clear-0.1.4.tgz", 85 | "integrity": "sha512-4nJjoilJPTbYF7Q4y5+F7JFDK8QdcwOItzwVv3RDEMWALT9Mx9UzfxCiUfpbFK05REhieXTCvhbNkiDW/Wfejw==" 86 | }, 87 | "node_modules/@types/fs-extra": { 88 | "version": "11.0.4", 89 | "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz", 90 | "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==", 91 | "dev": true, 92 | "license": "MIT", 93 | "dependencies": { 94 | "@types/jsonfile": "*", 95 | "@types/node": "*" 96 | } 97 | }, 98 | "node_modules/@types/glob": { 99 | "version": "7.2.0", 100 | "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", 101 | "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==", 102 | "dev": true, 103 | "dependencies": { 104 | "@types/minimatch": "*", 105 | "@types/node": "*" 106 | } 107 | }, 108 | "node_modules/@types/jsonfile": { 109 | "version": "6.1.4", 110 | "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.4.tgz", 111 | "integrity": "sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==", 112 | "dev": true, 113 | "license": "MIT", 114 | "dependencies": { 115 | "@types/node": "*" 116 | } 117 | }, 118 | "node_modules/@types/minimatch": { 119 | "version": "5.1.2", 120 | "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz", 121 | "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==", 122 | "dev": true 123 | }, 124 | "node_modules/@types/node": { 125 | "version": "20.11.4", 126 | "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.4.tgz", 127 | "integrity": "sha512-6I0fMH8Aoy2lOejL3s4LhyIYX34DPwY8bl5xlNjBvUEk8OHrcuzsFt+Ied4LvJihbtXPM+8zUqdydfIti86v9g==", 128 | "dev": true, 129 | "license": "MIT", 130 | "dependencies": { 131 | "undici-types": "~5.26.4" 132 | } 133 | }, 134 | "node_modules/@types/shelljs": { 135 | "version": "0.8.15", 136 | "resolved": "https://registry.npmjs.org/@types/shelljs/-/shelljs-0.8.15.tgz", 137 | "integrity": "sha512-vzmnCHl6hViPu9GNLQJ+DZFd6BQI2DBTUeOvYHqkWQLMfKAAQYMb/xAmZkTogZI/vqXHCWkqDRymDI5p0QTi5Q==", 138 | "dev": true, 139 | "dependencies": { 140 | "@types/glob": "~7.2.0", 141 | "@types/node": "*" 142 | } 143 | }, 144 | "node_modules/acorn": { 145 | "version": "8.11.3", 146 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", 147 | "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", 148 | "bin": { 149 | "acorn": "bin/acorn" 150 | }, 151 | "engines": { 152 | "node": ">=0.4.0" 153 | } 154 | }, 155 | "node_modules/acorn-walk": { 156 | "version": "8.3.2", 157 | "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz", 158 | "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==", 159 | "engines": { 160 | "node": ">=0.4.0" 161 | } 162 | }, 163 | "node_modules/ansi-colors": { 164 | "version": "4.1.3", 165 | "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", 166 | "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", 167 | "license": "MIT", 168 | "engines": { 169 | "node": ">=6" 170 | } 171 | }, 172 | "node_modules/ansi-regex": { 173 | "version": "5.0.1", 174 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", 175 | "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", 176 | "license": "MIT", 177 | "engines": { 178 | "node": ">=8" 179 | } 180 | }, 181 | "node_modules/arg": { 182 | "version": "4.1.3", 183 | "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", 184 | "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==" 185 | }, 186 | "node_modules/balanced-match": { 187 | "version": "1.0.2", 188 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", 189 | "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" 190 | }, 191 | "node_modules/brace-expansion": { 192 | "version": "1.1.11", 193 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 194 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 195 | "dependencies": { 196 | "balanced-match": "^1.0.0", 197 | "concat-map": "0.0.1" 198 | } 199 | }, 200 | "node_modules/clear": { 201 | "version": "0.1.0", 202 | "resolved": "https://registry.npmjs.org/clear/-/clear-0.1.0.tgz", 203 | "integrity": "sha512-qMjRnoL+JDPJHeLePZJuao6+8orzHMGP04A8CdwCNsKhRbOnKRjefxONR7bwILT3MHecxKBjHkKL/tkZ8r4Uzw==", 204 | "engines": { 205 | "node": "*" 206 | } 207 | }, 208 | "node_modules/concat-map": { 209 | "version": "0.0.1", 210 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 211 | "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" 212 | }, 213 | "node_modules/create-require": { 214 | "version": "1.1.1", 215 | "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", 216 | "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==" 217 | }, 218 | "node_modules/diff": { 219 | "version": "4.0.2", 220 | "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", 221 | "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", 222 | "engines": { 223 | "node": ">=0.3.1" 224 | } 225 | }, 226 | "node_modules/enquirer": { 227 | "version": "2.4.1", 228 | "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", 229 | "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", 230 | "license": "MIT", 231 | "dependencies": { 232 | "ansi-colors": "^4.1.1", 233 | "strip-ansi": "^6.0.1" 234 | }, 235 | "engines": { 236 | "node": ">=8.6" 237 | } 238 | }, 239 | "node_modules/fs-extra": { 240 | "version": "11.2.0", 241 | "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", 242 | "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==", 243 | "license": "MIT", 244 | "dependencies": { 245 | "graceful-fs": "^4.2.0", 246 | "jsonfile": "^6.0.1", 247 | "universalify": "^2.0.0" 248 | }, 249 | "engines": { 250 | "node": ">=14.14" 251 | } 252 | }, 253 | "node_modules/fs.realpath": { 254 | "version": "1.0.0", 255 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 256 | "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" 257 | }, 258 | "node_modules/function-bind": { 259 | "version": "1.1.2", 260 | "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", 261 | "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", 262 | "funding": { 263 | "url": "https://github.com/sponsors/ljharb" 264 | } 265 | }, 266 | "node_modules/glob": { 267 | "version": "7.2.3", 268 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", 269 | "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", 270 | "dependencies": { 271 | "fs.realpath": "^1.0.0", 272 | "inflight": "^1.0.4", 273 | "inherits": "2", 274 | "minimatch": "^3.1.1", 275 | "once": "^1.3.0", 276 | "path-is-absolute": "^1.0.0" 277 | }, 278 | "engines": { 279 | "node": "*" 280 | }, 281 | "funding": { 282 | "url": "https://github.com/sponsors/isaacs" 283 | } 284 | }, 285 | "node_modules/graceful-fs": { 286 | "version": "4.2.11", 287 | "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", 288 | "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", 289 | "license": "ISC" 290 | }, 291 | "node_modules/hasown": { 292 | "version": "2.0.0", 293 | "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", 294 | "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", 295 | "dependencies": { 296 | "function-bind": "^1.1.2" 297 | }, 298 | "engines": { 299 | "node": ">= 0.4" 300 | } 301 | }, 302 | "node_modules/inflight": { 303 | "version": "1.0.6", 304 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 305 | "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", 306 | "dependencies": { 307 | "once": "^1.3.0", 308 | "wrappy": "1" 309 | } 310 | }, 311 | "node_modules/inherits": { 312 | "version": "2.0.4", 313 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 314 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" 315 | }, 316 | "node_modules/interpret": { 317 | "version": "1.4.0", 318 | "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", 319 | "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", 320 | "engines": { 321 | "node": ">= 0.10" 322 | } 323 | }, 324 | "node_modules/is-core-module": { 325 | "version": "2.13.1", 326 | "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", 327 | "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", 328 | "dependencies": { 329 | "hasown": "^2.0.0" 330 | }, 331 | "funding": { 332 | "url": "https://github.com/sponsors/ljharb" 333 | } 334 | }, 335 | "node_modules/jsonfile": { 336 | "version": "6.1.0", 337 | "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", 338 | "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", 339 | "license": "MIT", 340 | "dependencies": { 341 | "universalify": "^2.0.0" 342 | }, 343 | "optionalDependencies": { 344 | "graceful-fs": "^4.1.6" 345 | } 346 | }, 347 | "node_modules/make-error": { 348 | "version": "1.3.6", 349 | "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", 350 | "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==" 351 | }, 352 | "node_modules/minimatch": { 353 | "version": "3.1.2", 354 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", 355 | "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", 356 | "dependencies": { 357 | "brace-expansion": "^1.1.7" 358 | }, 359 | "engines": { 360 | "node": "*" 361 | } 362 | }, 363 | "node_modules/once": { 364 | "version": "1.4.0", 365 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 366 | "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", 367 | "dependencies": { 368 | "wrappy": "1" 369 | } 370 | }, 371 | "node_modules/path-is-absolute": { 372 | "version": "1.0.1", 373 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 374 | "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", 375 | "engines": { 376 | "node": ">=0.10.0" 377 | } 378 | }, 379 | "node_modules/path-parse": { 380 | "version": "1.0.7", 381 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", 382 | "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" 383 | }, 384 | "node_modules/rechoir": { 385 | "version": "0.6.2", 386 | "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", 387 | "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", 388 | "dependencies": { 389 | "resolve": "^1.1.6" 390 | }, 391 | "engines": { 392 | "node": ">= 0.10" 393 | } 394 | }, 395 | "node_modules/resolve": { 396 | "version": "1.22.8", 397 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", 398 | "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", 399 | "dependencies": { 400 | "is-core-module": "^2.13.0", 401 | "path-parse": "^1.0.7", 402 | "supports-preserve-symlinks-flag": "^1.0.0" 403 | }, 404 | "bin": { 405 | "resolve": "bin/resolve" 406 | }, 407 | "funding": { 408 | "url": "https://github.com/sponsors/ljharb" 409 | } 410 | }, 411 | "node_modules/shelljs": { 412 | "version": "0.8.5", 413 | "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", 414 | "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", 415 | "dependencies": { 416 | "glob": "^7.0.0", 417 | "interpret": "^1.0.0", 418 | "rechoir": "^0.6.2" 419 | }, 420 | "bin": { 421 | "shjs": "bin/shjs" 422 | }, 423 | "engines": { 424 | "node": ">=4" 425 | } 426 | }, 427 | "node_modules/strip-ansi": { 428 | "version": "6.0.1", 429 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", 430 | "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", 431 | "license": "MIT", 432 | "dependencies": { 433 | "ansi-regex": "^5.0.1" 434 | }, 435 | "engines": { 436 | "node": ">=8" 437 | } 438 | }, 439 | "node_modules/supports-preserve-symlinks-flag": { 440 | "version": "1.0.0", 441 | "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", 442 | "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", 443 | "engines": { 444 | "node": ">= 0.4" 445 | }, 446 | "funding": { 447 | "url": "https://github.com/sponsors/ljharb" 448 | } 449 | }, 450 | "node_modules/ts-node": { 451 | "version": "10.9.2", 452 | "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", 453 | "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", 454 | "dependencies": { 455 | "@cspotcode/source-map-support": "^0.8.0", 456 | "@tsconfig/node10": "^1.0.7", 457 | "@tsconfig/node12": "^1.0.7", 458 | "@tsconfig/node14": "^1.0.0", 459 | "@tsconfig/node16": "^1.0.2", 460 | "acorn": "^8.4.1", 461 | "acorn-walk": "^8.1.1", 462 | "arg": "^4.1.0", 463 | "create-require": "^1.1.0", 464 | "diff": "^4.0.1", 465 | "make-error": "^1.1.1", 466 | "v8-compile-cache-lib": "^3.0.1", 467 | "yn": "3.1.1" 468 | }, 469 | "bin": { 470 | "ts-node": "dist/bin.js", 471 | "ts-node-cwd": "dist/bin-cwd.js", 472 | "ts-node-esm": "dist/bin-esm.js", 473 | "ts-node-script": "dist/bin-script.js", 474 | "ts-node-transpile-only": "dist/bin-transpile.js", 475 | "ts-script": "dist/bin-script-deprecated.js" 476 | }, 477 | "peerDependencies": { 478 | "@swc/core": ">=1.2.50", 479 | "@swc/wasm": ">=1.2.50", 480 | "@types/node": "*", 481 | "typescript": ">=2.7" 482 | }, 483 | "peerDependenciesMeta": { 484 | "@swc/core": { 485 | "optional": true 486 | }, 487 | "@swc/wasm": { 488 | "optional": true 489 | } 490 | } 491 | }, 492 | "node_modules/typescript": { 493 | "version": "5.3.3", 494 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", 495 | "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", 496 | "dev": true, 497 | "license": "Apache-2.0", 498 | "bin": { 499 | "tsc": "bin/tsc", 500 | "tsserver": "bin/tsserver" 501 | }, 502 | "engines": { 503 | "node": ">=14.17" 504 | } 505 | }, 506 | "node_modules/undici-types": { 507 | "version": "5.26.5", 508 | "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", 509 | "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", 510 | "dev": true, 511 | "license": "MIT" 512 | }, 513 | "node_modules/universalify": { 514 | "version": "2.0.1", 515 | "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", 516 | "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", 517 | "license": "MIT", 518 | "engines": { 519 | "node": ">= 10.0.0" 520 | } 521 | }, 522 | "node_modules/v8-compile-cache-lib": { 523 | "version": "3.0.1", 524 | "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", 525 | "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==" 526 | }, 527 | "node_modules/wrappy": { 528 | "version": "1.0.2", 529 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 530 | "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" 531 | }, 532 | "node_modules/yn": { 533 | "version": "3.1.1", 534 | "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", 535 | "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", 536 | "engines": { 537 | "node": ">=6" 538 | } 539 | } 540 | } 541 | } 542 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@types/fs-extra": "^11.0.4", 4 | "@types/node": "^20.11.4", 5 | "@types/shelljs": "^0.8.15", 6 | "typescript": "^5.3.3" 7 | }, 8 | "dependencies": { 9 | "@types/clear": "^0.1.4", 10 | "clear": "^0.1.0", 11 | "enquirer": "^2.4.1", 12 | "fs-extra": "^11.2.0", 13 | "shelljs": "^0.8.5", 14 | "ts-node": "^10.9.2" 15 | }, 16 | "name": "web-app-init", 17 | "version": "1.1.0", 18 | "description": "This is officially designed to install templates based on latest web technology!", 19 | "main": "index.js", 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/Deepumandal/react-webpack-configuration.git" 23 | }, 24 | "keywords": [ 25 | "webpack", 26 | "react", 27 | "scss", 28 | "react", 29 | "react-dom", 30 | "typescript", 31 | "babel" 32 | ], 33 | "author": "Deepak Mandal", 34 | "license": "ISC", 35 | "bugs": { 36 | "url": "https://github.com/Deepumandal/react-webpack-configuration/issues" 37 | }, 38 | "homepage": "https://github.com/Deepumandal/react-webpack-configuration#readme", 39 | "bin": { 40 | "web-app-init": "./index.js" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Web App Init 2 | 3 | **Command Line Interface (CLI) for Bootstrapping React Templates** 4 | 5 | Web App Init is a powerful and user-friendly CLI tool that allows you to quickly bootstrap new React applications with different templates, configurations, and styling options. It simplifies the process of setting up a new project by providing a streamlined interface for selecting your preferred stack. 6 | 7 | ## Features 8 | 9 | - 🚀 **Effortless Installation**: Get started with your project in seconds. Simply run `npx web-app-init` to initiate the installation process. 10 | - 🛠 **Template Customization**: Choose from a variety of React templates, including TypeScript and JavaScript, and customize your project based on your specific needs. 11 | 12 | - 🎨 **Styling Options**: Tailwind CSS, MUI, Chakra UI, CSS, or SCSS – select the styling library that best suits your project requirements. 13 | 14 | - ⚙️ **Webpack Configuration**: Open up the webpack configuration to tailor your project for production. Customize to your heart's content for advanced optimization and performance tweaks. 15 | 16 | - 💻 **Beautiful Terminal Prompts**: Enjoy an interactive and visually appealing input experience using the `enquirer` library. 17 | 18 | ## Usage 19 | 20 | 1. **Run the Installer**: 21 | 22 | - Install `web-app-init` as a global dependency. 23 | ```bash 24 | npm i -g web-app-init 25 | ``` 26 | - Run the following command: 27 | ```bash 28 | web-app-init 29 | ``` 30 | - Alternatively, you can use `npx` directly: 31 | ```bash 32 | npx web-app-init 33 | ``` 34 | 35 | 2. **Follow the Prompts:** 36 | 37 | - Select your directory to use. 38 | 39 | ![Image 1](./img/s01.png) 40 | ![Image 3](./img/s03.png) 41 | 42 | - Select your preferred template (TypeScript or JavaScript). 43 | 44 | ![Image 4](./img/s04.png) 45 | 46 | - Choose your styling library (Tailwind CSS, MUI, Chakra UI, CSS, or SCSS). 47 | 48 | ![Image 5](./img/s05.png) 49 | 50 | 3. **Hooray, Ready to Use!** 51 | 52 | ```bash 53 | cd folder-name 54 | npm i 55 | npm start 56 | ``` 57 | 58 | ## Contributors 59 | 60 | A big thank you to the contributors who have made this project possible: 61 | 62 | - [Deepak Mandal](https://github.com/deepumandal) 63 | 64 | ## License 65 | 66 | This project is licensed under the **MIT** License. 67 | -------------------------------------------------------------------------------- /source/InputModules/ReadCurrentDirName/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const path_1 = require("path"); 4 | exports.default = async () => { 5 | const fullPath = __dirname; 6 | const fileName = (0, path_1.basename)(fullPath, (0, path_1.extname)(fullPath)); 7 | return { 8 | directoryName: fileName, 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /source/InputModules/ReadCurrentDirName/index.ts: -------------------------------------------------------------------------------- 1 | import { DirectoryInterface } from "../../../utils/types"; 2 | import { basename, extname } from "path"; 3 | 4 | export default async (): Promise => { 5 | const fullPath = __dirname; 6 | const fileName = basename(fullPath, extname(fullPath)); 7 | return { 8 | directoryName: fileName, 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /source/InputModules/getLanguages/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const enquirer_1 = require("enquirer"); 4 | const constants_1 = require("../../../utils/constants"); 5 | exports.default = async () => { 6 | const lang = (0, enquirer_1.prompt)({ 7 | type: "select", 8 | name: "PackageName", 9 | message: "Choose a language:", 10 | choices: constants_1.languagesOption, 11 | }); 12 | return (await lang).PackageName; 13 | }; 14 | -------------------------------------------------------------------------------- /source/InputModules/getLanguages/index.ts: -------------------------------------------------------------------------------- 1 | import { prompt } from "enquirer"; 2 | import { languagesOption } from "../../../utils/constants"; 3 | import { PackageInterface } from "../../../utils/types"; 4 | 5 | export default async (): Promise => { 6 | const lang = prompt({ 7 | type: "select", 8 | name: "PackageName", 9 | message: "Choose a language:", 10 | choices: languagesOption, 11 | }); 12 | 13 | return (await lang).PackageName; 14 | }; 15 | -------------------------------------------------------------------------------- /source/InputModules/getNavigatedDirPath/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // import { readdirSync, statSync } from "fs"; 3 | // import { basename, join } from "path"; 4 | // import { prompt } from "enquirer"; 5 | // import { DirectoryInterface } from "../../../utils/types"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | // interface FolderStructure { 8 | // name: string; 9 | // content: FolderStructure[]; 10 | // } 11 | // function readFolderStructure(dir: string): FolderStructure { 12 | // const files = readdirSync(dir); 13 | // const folderStructure: FolderStructure = { 14 | // name: basename(dir), 15 | // content: [], 16 | // }; 17 | // files.forEach((file, index) => { 18 | // if (index == 0) { 19 | // folderStructure.content.push({ name: "Go Back", content: [] }); 20 | // folderStructure.content.push({ name: "Select", content: [] }); 21 | // } 22 | // const filePath = join(dir, file); 23 | // const isDirectory = statSync(filePath).isDirectory(); 24 | // if (isDirectory && file !== "node_modules" && file !== ".git") { 25 | // const subFolderStructure = readFolderStructure(filePath); 26 | // folderStructure.content.push(subFolderStructure); 27 | // } 28 | // // Ignore files in this version 29 | // }); 30 | // return folderStructure; 31 | // } 32 | // let currentPath: string[] = []; 33 | // const getDirectoryPath = async (Paths: FolderStructure) => { 34 | // let folderStructure: FolderStructure = Paths; 35 | // while (true) { 36 | // const choices = folderStructure.content.map((item) => item.name); 37 | // // choices.push("Go back"); 38 | // // choices.push("Select"); 39 | // const selectedDirectory = await prompt({ 40 | // type: "select", 41 | // message: `Selected : ${currentPath[currentPath.length - 1]}`, 42 | // choices, 43 | // name: "directoryName", 44 | // }); 45 | // if (selectedDirectory.directoryName === "Select") { 46 | // break; 47 | // } 48 | // if (selectedDirectory.directoryName === "Go back") { 49 | // currentPath.pop(); 50 | // let tempStructure = Paths; 51 | // for (const directory of currentPath) { 52 | // const index = tempStructure.content.findIndex( 53 | // (item) => item.name === directory 54 | // ); 55 | // if (index !== -1) { 56 | // tempStructure = tempStructure.content[index]; 57 | // } else { 58 | // // Handle invalid path if needed 59 | // break; 60 | // } 61 | // } 62 | // folderStructure = tempStructure; 63 | // } else { 64 | // currentPath.push(`/${selectedDirectory.directoryName}`); 65 | // const ChosenIndex = folderStructure.content.findIndex( 66 | // (item) => item.name === selectedDirectory.directoryName 67 | // ); 68 | // folderStructure = folderStructure.content[ChosenIndex]; 69 | // } 70 | // // Break the loop if the selected directory has no content (leaf node) 71 | // if (!folderStructure || folderStructure.content.length === 0) { 72 | // break; 73 | // } 74 | // } 75 | // }; 76 | // export default async (): Promise => { 77 | // const result: FolderStructure = readFolderStructure(process.cwd()); 78 | // await getDirectoryPath(result); 79 | // return currentPath.join(""); 80 | // }; 81 | -------------------------------------------------------------------------------- /source/InputModules/getNavigatedDirPath/index.ts: -------------------------------------------------------------------------------- 1 | // import { readdirSync, statSync } from "fs"; 2 | // import { basename, join } from "path"; 3 | // import { prompt } from "enquirer"; 4 | // import { DirectoryInterface } from "../../../utils/types"; 5 | 6 | // interface FolderStructure { 7 | // name: string; 8 | // content: FolderStructure[]; 9 | // } 10 | 11 | // function readFolderStructure(dir: string): FolderStructure { 12 | // const files = readdirSync(dir); 13 | 14 | // const folderStructure: FolderStructure = { 15 | // name: basename(dir), 16 | // content: [], 17 | // }; 18 | 19 | // files.forEach((file, index) => { 20 | // if (index == 0) { 21 | // folderStructure.content.push({ name: "Go Back", content: [] }); 22 | // folderStructure.content.push({ name: "Select", content: [] }); 23 | // } 24 | // const filePath = join(dir, file); 25 | // const isDirectory = statSync(filePath).isDirectory(); 26 | 27 | // if (isDirectory && file !== "node_modules" && file !== ".git") { 28 | // const subFolderStructure = readFolderStructure(filePath); 29 | // folderStructure.content.push(subFolderStructure); 30 | // } 31 | // // Ignore files in this version 32 | // }); 33 | 34 | // return folderStructure; 35 | // } 36 | 37 | // let currentPath: string[] = []; 38 | 39 | // const getDirectoryPath = async (Paths: FolderStructure) => { 40 | // let folderStructure: FolderStructure = Paths; 41 | 42 | // while (true) { 43 | // const choices = folderStructure.content.map((item) => item.name); 44 | // // choices.push("Go back"); 45 | // // choices.push("Select"); 46 | 47 | // const selectedDirectory = await prompt({ 48 | // type: "select", 49 | // message: `Selected : ${currentPath[currentPath.length - 1]}`, 50 | // choices, 51 | // name: "directoryName", 52 | // }); 53 | 54 | // if (selectedDirectory.directoryName === "Select") { 55 | // break; 56 | // } 57 | // if (selectedDirectory.directoryName === "Go back") { 58 | // currentPath.pop(); 59 | 60 | // let tempStructure = Paths; 61 | // for (const directory of currentPath) { 62 | // const index = tempStructure.content.findIndex( 63 | // (item) => item.name === directory 64 | // ); 65 | // if (index !== -1) { 66 | // tempStructure = tempStructure.content[index]; 67 | // } else { 68 | // // Handle invalid path if needed 69 | // break; 70 | // } 71 | // } 72 | // folderStructure = tempStructure; 73 | // } else { 74 | // currentPath.push(`/${selectedDirectory.directoryName}`); 75 | 76 | // const ChosenIndex = folderStructure.content.findIndex( 77 | // (item) => item.name === selectedDirectory.directoryName 78 | // ); 79 | 80 | // folderStructure = folderStructure.content[ChosenIndex]; 81 | // } 82 | 83 | // // Break the loop if the selected directory has no content (leaf node) 84 | // if (!folderStructure || folderStructure.content.length === 0) { 85 | // break; 86 | // } 87 | // } 88 | // }; 89 | // export default async (): Promise => { 90 | // const result: FolderStructure = readFolderStructure(process.cwd()); 91 | // await getDirectoryPath(result); 92 | // return currentPath.join(""); 93 | // }; 94 | -------------------------------------------------------------------------------- /source/InputModules/getProjectName/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const enquirer_1 = require("enquirer"); 7 | const ReadCurrentDirName_1 = __importDefault(require("../ReadCurrentDirName")); 8 | const constants_1 = require("../../../utils/constants"); 9 | exports.default = async () => { 10 | try { 11 | // Ask directory options 12 | const dirOptions = await (0, enquirer_1.prompt)({ 13 | type: "select", 14 | name: "directoryName", 15 | message: "What's your directory,", 16 | choices: constants_1.directoryOptions, 17 | }); 18 | // conditional operation based on the chosen directory 19 | switch (dirOptions.directoryName) { 20 | case constants_1.CONTINUE_WITH_CURRENT_DIR: { 21 | const FileName = await (0, ReadCurrentDirName_1.default)(); 22 | return { 23 | PathName: FileName.directoryName, 24 | isNew: false, 25 | }; 26 | } 27 | case constants_1.PROJECT_NAME: { 28 | const projectNameResponse = await (0, enquirer_1.prompt)({ 29 | type: "input", 30 | name: "ProjectName", 31 | message: "Enter project name:", 32 | }); 33 | return { 34 | ProjectName: projectNameResponse.ProjectName, 35 | isNew: true, 36 | }; 37 | } 38 | default: { 39 | throw new Error("Invalid dirOptions"); 40 | } 41 | } 42 | } 43 | finally { 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /source/InputModules/getProjectName/index.ts: -------------------------------------------------------------------------------- 1 | import { prompt } from "enquirer"; 2 | import { DirectoryInterface, ProjectInterface } from "../../../utils/types"; 3 | import ReadCurrentFileName from "../ReadCurrentDirName"; 4 | import { 5 | CONTINUE_WITH_CURRENT_DIR, 6 | PROJECT_NAME, 7 | directoryOptions, 8 | } from "../../../utils/constants"; 9 | 10 | interface functionResInterface { 11 | ProjectName?: string; 12 | PathName?: string; 13 | isNew: boolean; 14 | } 15 | 16 | export default async (): Promise => { 17 | try { 18 | // Ask directory options 19 | const dirOptions = await prompt({ 20 | type: "select", 21 | name: "directoryName", 22 | message: "What's your directory,", 23 | choices: directoryOptions, 24 | }); 25 | 26 | // conditional operation based on the chosen directory 27 | switch (dirOptions.directoryName) { 28 | case CONTINUE_WITH_CURRENT_DIR: { 29 | const FileName = await ReadCurrentFileName(); 30 | return { 31 | PathName: FileName.directoryName, 32 | isNew: false, 33 | }; 34 | } 35 | case PROJECT_NAME: { 36 | const projectNameResponse = await prompt({ 37 | type: "input", 38 | name: "ProjectName", 39 | message: "Enter project name:", 40 | }); 41 | 42 | return { 43 | ProjectName: projectNameResponse.ProjectName as string, 44 | isNew: true, 45 | }; 46 | } 47 | default: { 48 | throw new Error("Invalid dirOptions"); 49 | } 50 | } 51 | } finally { 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /source/InputModules/getStyleLibrary/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const enquirer_1 = require("enquirer"); 4 | const constants_1 = require("../../../utils/constants"); 5 | exports.default = async () => { 6 | const stylelibraryResponse = await (0, enquirer_1.prompt)({ 7 | type: "select", 8 | name: "PackageName", 9 | message: "Choose a stylling library:", 10 | choices: constants_1.stylelibraryOption, 11 | }); 12 | return stylelibraryResponse.PackageName; 13 | }; 14 | -------------------------------------------------------------------------------- /source/InputModules/getStyleLibrary/index.ts: -------------------------------------------------------------------------------- 1 | import { prompt } from "enquirer"; 2 | import { PackageInterface } from "../../../utils/types"; 3 | import { stylelibraryOption } from "../../../utils/constants"; 4 | 5 | export default async () => { 6 | const stylelibraryResponse = await prompt({ 7 | type: "select", 8 | name: "PackageName", 9 | message: "Choose a stylling library:", 10 | choices: stylelibraryOption, 11 | }); 12 | return stylelibraryResponse.PackageName; 13 | }; 14 | -------------------------------------------------------------------------------- /source/InputModules/getTemplate/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const enquirer_1 = require("enquirer"); 4 | const constants_1 = require("../../../utils/constants"); 5 | exports.default = async () => { 6 | const templateNameResponse = await (0, enquirer_1.prompt)({ 7 | type: "select", 8 | choices: constants_1.templateChoices, 9 | name: "PackageName", 10 | message: "Select template", 11 | }); 12 | return templateNameResponse.PackageName; 13 | }; 14 | -------------------------------------------------------------------------------- /source/InputModules/getTemplate/index.ts: -------------------------------------------------------------------------------- 1 | import { prompt } from "enquirer"; 2 | import { PackageInterface } from "../../../utils/types"; 3 | import { templateChoices } from "../../../utils/constants"; 4 | 5 | 6 | export default async () => { 7 | const templateNameResponse = await prompt({ 8 | type: "select", 9 | choices: templateChoices, 10 | name: "PackageName", 11 | message: "Select template", 12 | }); 13 | return templateNameResponse.PackageName; 14 | }; 15 | -------------------------------------------------------------------------------- /source/scripts.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const getProjectName_1 = __importDefault(require("./InputModules/getProjectName")); 7 | const getLanguages_1 = __importDefault(require("./InputModules/getLanguages")); 8 | const getTemplate_1 = __importDefault(require("./InputModules/getTemplate")); 9 | const getStyleLibrary_1 = __importDefault(require("./InputModules/getStyleLibrary")); 10 | const builder_1 = __importDefault(require("../builder")); 11 | const stylePrint_1 = __importDefault(require("./stylePrint")); 12 | const path_1 = require("path"); 13 | // package installer 14 | const scriptsRunner = async function () { 15 | const projectNameResponse = await (0, getProjectName_1.default)(); // Prompt for the project name 16 | const languageNameResponse = await (0, getLanguages_1.default)(); // Select language 17 | const templateNameResponse = await (0, getTemplate_1.default)(); // select library 18 | const styleLibraryResponse = await (0, getStyleLibrary_1.default)(); // select styling library 19 | await (0, builder_1.default)({ 20 | projectNameResponse, 21 | languageNameResponse, 22 | templateNameResponse, 23 | styleLibraryResponse, 24 | }); 25 | if (projectNameResponse.isNew) { 26 | (0, stylePrint_1.default)(` 27 | '${projectNameResponse.ProjectName}' is ready to go. 28 | Next steps: 29 | 30 | 📂 ${" "} cd ${projectNameResponse.ProjectName} 31 | 📂 ${" "} npm install 32 | 📂 ${" "} npm start 33 | 34 | Happy Hacking 🚀 35 | `, "white"); 36 | } 37 | else { 38 | (0, stylePrint_1.default)(` 39 | '${(0, path_1.basename)(process.cwd())}' is ready to go. 40 | Next steps: 41 | 42 | 📂 ${" "} npm install 43 | 📂 ${" "} npm start 44 | 45 | Happy Hacking 🚀 46 | `, "white"); 47 | } 48 | }; 49 | exports.default = scriptsRunner; 50 | -------------------------------------------------------------------------------- /source/scripts.ts: -------------------------------------------------------------------------------- 1 | import getProjectName from "./InputModules/getProjectName"; 2 | import getLanguages from "./InputModules/getLanguages"; 3 | import getTemplate from "./InputModules/getTemplate"; 4 | import getStyleLibrary from "./InputModules/getStyleLibrary"; 5 | import builder from "../builder"; 6 | import stylishPrint from "./stylePrint"; 7 | import { basename } from "path"; 8 | 9 | // package installer 10 | const scriptsRunner = async function () { 11 | const projectNameResponse = await getProjectName(); // Prompt for the project name 12 | const languageNameResponse = await getLanguages(); // Select language 13 | const templateNameResponse = await getTemplate(); // select library 14 | const styleLibraryResponse = await getStyleLibrary(); // select styling library 15 | 16 | await builder({ 17 | projectNameResponse, 18 | languageNameResponse, 19 | templateNameResponse, 20 | styleLibraryResponse, 21 | }); 22 | 23 | if (projectNameResponse.isNew) { 24 | stylishPrint( 25 | ` 26 | '${projectNameResponse.ProjectName}' is ready to go. 27 | Next steps: 28 | 29 | 📂 ${" "} cd ${projectNameResponse.ProjectName} 30 | 📂 ${" "} npm install 31 | 📂 ${" "} npm start 32 | 33 | Happy Hacking 🚀 34 | `, 35 | "white" 36 | ); 37 | } else { 38 | stylishPrint( 39 | ` 40 | '${basename(process.cwd())}' is ready to go. 41 | Next steps: 42 | 43 | 📂 ${" "} npm install 44 | 📂 ${" "} npm start 45 | 46 | Happy Hacking 🚀 47 | `, 48 | "white" 49 | ); 50 | } 51 | }; 52 | 53 | export default scriptsRunner; 54 | -------------------------------------------------------------------------------- /source/stylePrint/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | const shelljs_1 = require("shelljs"); 4 | function stylishPrint(message, color = "blue", fontSize = "medium") { 5 | const styles = { 6 | bold: "\x1b[1m", 7 | blue: "\x1b[34m", 8 | white: "\x1b[97m", 9 | reset: "\x1b[0m", 10 | small: "\x1b[2m", 11 | medium: "", 12 | large: "\x1b[3m", 13 | }; 14 | const chosenColor = styles[color] || styles.blue; // Default to blue if color is not recognized 15 | const chosenFontSize = styles[fontSize] || styles.medium; // Default to medium if font size is not recognized 16 | const styledMessage = `${styles.bold}${chosenColor}${chosenFontSize}${message}${styles.reset}`; 17 | (0, shelljs_1.echo)(styledMessage); 18 | } 19 | exports.default = stylishPrint; 20 | -------------------------------------------------------------------------------- /source/stylePrint/index.ts: -------------------------------------------------------------------------------- 1 | import { echo } from "shelljs"; 2 | 3 | type Color = "blue" | "white"; 4 | type FontSize = "small" | "medium" | "large"; 5 | 6 | function stylishPrint( 7 | message: string, 8 | color: Color = "blue", 9 | fontSize: FontSize = "medium" 10 | ): void { 11 | const styles = { 12 | bold: "\x1b[1m", 13 | blue: "\x1b[34m", 14 | white: "\x1b[97m", 15 | reset: "\x1b[0m", 16 | small: "\x1b[2m", 17 | medium: "", 18 | large: "\x1b[3m", 19 | }; 20 | 21 | const chosenColor = styles[color] || styles.blue; // Default to blue if color is not recognized 22 | const chosenFontSize = styles[fontSize] || styles.medium; // Default to medium if font size is not recognized 23 | 24 | const styledMessage = `${styles.bold}${chosenColor}${chosenFontSize}${message}${styles.reset}`; 25 | echo(styledMessage); 26 | } 27 | 28 | export default stylishPrint; 29 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@types/react": "^17.0.2", 20 | "@types/react-dom": "^18.2.18", 21 | "babel-loader": "^8.2.2", 22 | "css-loader": "^6.3.0", 23 | "file-loader": "^6.2.0", 24 | "html-webpack-plugin": "^5.3.2", 25 | "sass-loader": "^14.0.0", 26 | "style-loader": "^3.3.0" 27 | }, 28 | "dependencies": { 29 | "@chakra-ui/react": "^2.8.2", 30 | "@emotion/react": "^11.11.3", 31 | "@emotion/styled": "^11.11.0", 32 | "dotenv": "^16.3.1", 33 | "framer-motion": "^10.18.0", 34 | "react": "^18.2.0", 35 | "react-dom": "^18.2.0", 36 | "sass": "^1.70.0", 37 | "webpack": "^5.57.1", 38 | "webpack-cli": "^5.1.4", 39 | "webpack-dev-server": "^4.3.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/templates/javascript+webpack+react+chakraui/src/index.css -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | import { ChakraProvider } from "@chakra-ui/react"; 6 | 7 | const container = document.getElementById("root"); 8 | if (container) { 9 | const root = createRoot(container); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | } else { 16 | throw new Error("Target container is not dom element"); 17 | } 18 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+chakraui/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx"], 12 | }, 13 | entry: "./src/index.js", 14 | output: { 15 | path: path.resolve(__dirname, "build"), 16 | }, 17 | plugins: [ 18 | new htmlWebpackPlugin({ 19 | template: "./public/index.html", 20 | }), 21 | new webpack.DefinePlugin({ 22 | "process.env": JSON.stringify({ 23 | ...dotenv.parsed, 24 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 25 | }), 26 | }), 27 | ], 28 | module: { 29 | rules: [ 30 | { 31 | test: /.(js|jsx)$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: "babel-loader", 35 | options: { 36 | presets: ["@babel/preset-env", "@babel/preset-react"], 37 | }, 38 | }, 39 | }, 40 | { 41 | test: /\.(css|scss)$/, 42 | use: ["style-loader", "css-loader", "sass-loader"], 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)$/i, 46 | use: [ 47 | { 48 | loader: "file-loader", 49 | options: { 50 | name: "[name].[ext]", 51 | outputPath: "images", 52 | }, 53 | }, 54 | ], 55 | }, 56 | { 57 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 58 | use: [ 59 | { 60 | loader: "file-loader", 61 | options: { 62 | name: "[name].[ext]", 63 | outputPath: "fonts", 64 | }, 65 | }, 66 | ], 67 | }, 68 | ], 69 | }, 70 | devServer: { 71 | port: 3000, 72 | open: true, 73 | hot: true, 74 | }, 75 | }; 76 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@types/react": "^17.0.2", 20 | "@types/react-dom": "^18.2.18", 21 | "babel-loader": "^8.2.2", 22 | "css-loader": "^6.3.0", 23 | "html-webpack-plugin": "^5.3.2", 24 | "sass-loader": "^14.0.0", 25 | "style-loader": "^3.3.0" 26 | }, 27 | "dependencies": { 28 | "@emotion/react": "^11.11.3", 29 | "@emotion/styled": "^11.11.0", 30 | "@mui/material": "^5.15.5", 31 | "dotenv": "^16.3.1", 32 | "process": "^0.11.10", 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "sass": "^1.70.0", 36 | "webpack": "^5.57.1", 37 | "webpack-cli": "^5.1.4", 38 | "webpack-dev-server": "^4.3.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/templates/javascript+webpack+react+mui/src/index.css -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | const container = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+mui/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx"], 12 | }, 13 | entry: "./src/index.js", 14 | output: { 15 | path: path.resolve(__dirname, "build"), 16 | }, 17 | plugins: [ 18 | new htmlWebpackPlugin({ 19 | template: "./public/index.html", 20 | }), 21 | new webpack.DefinePlugin({ 22 | "process.env": JSON.stringify({ 23 | ...dotenv.parsed, 24 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 25 | }), 26 | }), 27 | ], 28 | module: { 29 | rules: [ 30 | { 31 | test: /.(js|jsx)$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: "babel-loader", 35 | options: { 36 | presets: ["@babel/preset-env", "@babel/preset-react"], 37 | }, 38 | }, 39 | }, 40 | { 41 | test: /\.(css|scss)$/, 42 | use: ["style-loader", "css-loader", "sass-loader"], 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)$/i, 46 | use: [ 47 | { 48 | loader: "file-loader", 49 | options: { 50 | name: "[name].[ext]", 51 | outputPath: "images", 52 | }, 53 | }, 54 | ], 55 | }, 56 | { 57 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 58 | use: [ 59 | { 60 | loader: "file-loader", 61 | options: { 62 | name: "[name].[ext]", 63 | outputPath: "fonts", 64 | }, 65 | }, 66 | ], 67 | }, 68 | ], 69 | }, 70 | devServer: { 71 | port: 3000, 72 | open: true, 73 | hot: true, 74 | }, 75 | }; 76 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@types/react": "^17.0.2", 20 | "@types/react-dom": "^18.2.18", 21 | "babel-loader": "^8.2.2", 22 | "css-loader": "^6.3.0", 23 | "html-webpack-plugin": "^5.3.2", 24 | "style-loader": "^3.3.0" 25 | }, 26 | "dependencies": { 27 | "dotenv": "^16.3.1", 28 | "process": "^0.11.10", 29 | "react": "^18.2.0", 30 | "react-dom": "^18.2.0", 31 | "webpack": "^5.57.1", 32 | "webpack-cli": "^5.1.4", 33 | "webpack-dev-server": "^4.3.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deepumandal/react-webpack-configuration/91576107f7d54818f587acacacba3a881744a032/templates/javascript+webpack+react+scss/src/index.css -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | const container = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+scss/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx"], 12 | }, 13 | entry: "./src/index.js", 14 | output: { 15 | path: path.resolve(__dirname, "build"), 16 | }, 17 | plugins: [ 18 | new htmlWebpackPlugin({ 19 | template: "./public/index.html", 20 | }), 21 | new webpack.DefinePlugin({ 22 | "process.env": JSON.stringify({ 23 | ...dotenv.parsed, 24 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 25 | }), 26 | }), 27 | ], 28 | module: { 29 | rules: [ 30 | { 31 | test: /.(js|jsx)$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: "babel-loader", 35 | options: { 36 | presets: ["@babel/preset-env", "@babel/preset-react"], 37 | }, 38 | }, 39 | }, 40 | { 41 | test: /\.(css|scss|sass|less)$/, 42 | use: ["style-loader", "css-loader"], 43 | }, 44 | , 45 | ], 46 | }, 47 | devServer: { 48 | port: 3000, 49 | open: true, 50 | hot: true, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum_name", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "webpack --mode production", 8 | "build:dev": "webpack --mode development", 9 | "build:start": "cd dist && PORT=7001 npx serve", 10 | "start": "webpack serve --open --mode development", 11 | "start:live": "webpack serve --open --mode development --live-reload --hot" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.23.7", 15 | "@babel/preset-env": "^7.15.8", 16 | "@babel/preset-react": "^7.14.5", 17 | "@types/react": "^17.0.2", 18 | "@types/react-dom": "^18.2.18", 19 | "babel-loader": "^8.2.2", 20 | "css-loader": "^6.3.0", 21 | "html-webpack-plugin": "^5.3.2", 22 | "postcss": "^8.4.33", 23 | "postcss-loader": "^8.0.0", 24 | "sass-loader": "^14.0.0", 25 | "style-loader": "^3.3.0", 26 | "tailwindcss": "^3.4.1", 27 | "file-loader": "^6.2.0" 28 | }, 29 | "dependencies": { 30 | "dotenv": "^16.3.1", 31 | 32 | "react": "^18.2.0", 33 | "react-dom": "^18.2.0", 34 | "sass": "^1.70.0", 35 | "webpack": "^5.57.1", 36 | "webpack-cli": "^5.1.4", 37 | "webpack-dev-server": "^4.3.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App"; 4 | import './index.css' 5 | 6 | const container = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{html,js,ts,jsx,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } -------------------------------------------------------------------------------- /templates/javascript+webpack+react+tailwindCSS/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx"], 12 | }, 13 | entry: "./src/index.js", 14 | output: { 15 | path: path.resolve(__dirname, "build"), 16 | }, 17 | plugins: [ 18 | new htmlWebpackPlugin({ 19 | template: "./public/index.html", 20 | }), 21 | new webpack.DefinePlugin({ 22 | "process.env": JSON.stringify({ 23 | ...dotenv.parsed, 24 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 25 | }), 26 | }), 27 | ], 28 | module: { 29 | rules: [ 30 | { 31 | test: /.(js|jsx)$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: "babel-loader", 35 | options: { 36 | presets: ["@babel/preset-env", "@babel/preset-react"], 37 | }, 38 | }, 39 | }, 40 | { 41 | test: /\.(css|scss)$/, 42 | use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"], 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)$/i, 46 | use: [ 47 | { 48 | loader: "file-loader", 49 | options: { 50 | name: "[name].[ext]", 51 | outputPath: "images", 52 | }, 53 | }, 54 | ], 55 | }, 56 | { 57 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 58 | use: [ 59 | { 60 | loader: "file-loader", 61 | options: { 62 | name: "[name].[ext]", 63 | outputPath: "fonts", 64 | }, 65 | }, 66 | ], 67 | }, 68 | ], 69 | }, 70 | devServer: { 71 | port: 3000, 72 | open: true, 73 | hot: true, 74 | }, 75 | }; -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.tsx", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@babel/preset-typescript": "^7.23.3", 20 | "@types/react": "^18.2.48", 21 | "@types/react-dom": "^18.2.18", 22 | "babel-loader": "^8.2.2", 23 | "css-loader": "^6.3.0", 24 | "html-webpack-plugin": "^5.3.2", 25 | "style-loader": "^3.3.0", 26 | "file-loader": "^6.2.0", 27 | "sass-loader": "^14.0.0" 28 | }, 29 | "dependencies": { 30 | "@chakra-ui/react": "^2.8.2", 31 | "@emotion/react": "^11.11.3", 32 | "@emotion/styled": "^11.11.0", 33 | "dotenv": "^16.3.1", 34 | "framer-motion": "^10.18.0", 35 | "process": "^0.11.10", 36 | "react": "^18.2.0", 37 | "react-dom": "^18.2.0", 38 | "webpack": "^5.57.1", 39 | "webpack-cli": "^5.1.4", 40 | "webpack-dev-server": "^4.3.1", 41 | "sass": "^1.70.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App: React.FC = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { ChakraProvider } from "@chakra-ui/react"; 4 | import App from "./App"; 5 | 6 | const container: HTMLElement | null = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render( 10 | 11 | {" "} 12 | 13 | 14 | ); 15 | } else { 16 | throw new Error("Target container is not dom element"); 17 | } 18 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | "jsx": "react-jsx", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | 26 | /* Modules */ 27 | "module": "commonjs", /* Specify what module code is generated. */ 28 | // "rootDir": "./", /* Specify the root folder within your source files. */ 29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 34 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 36 | // "resolveJsonModule": true, /* Enable importing .json files */ 37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 38 | 39 | /* JavaScript Support */ 40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 43 | 44 | /* Emit */ 45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 50 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 51 | // "removeComments": true, /* Disable emitting comments. */ 52 | // "noEmit": true, /* Disable emitting files from a compilation. */ 53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 61 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 68 | 69 | /* Interop Constraints */ 70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 75 | 76 | /* Type Checking */ 77 | "strict": true, /* Enable all strict type-checking options. */ 78 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 96 | 97 | /* Completeness */ 98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 99 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 100 | }, 101 | "include": ["src"], 102 | "exclude": ["node_modules"] 103 | } -------------------------------------------------------------------------------- /templates/typescript+webpack+react+chakraui/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx", ".ts", ".tsx"], 12 | }, 13 | entry: "./src/index.tsx", 14 | output: { 15 | path: path.resolve(__dirname, "dist"), 16 | publicPath: "http://localhost:3000/", 17 | }, 18 | plugins: [ 19 | new htmlWebpackPlugin({ 20 | template: "./public/index.html", 21 | }), 22 | new webpack.DefinePlugin({ 23 | "process.env": JSON.stringify({ 24 | ...dotenv.parsed, 25 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 26 | }), 27 | }), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /.(js|jsx|ts|tsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | options: { 37 | presets: [ 38 | "@babel/preset-env", 39 | "@babel/preset-react", 40 | "@babel/preset-typescript", 41 | ], 42 | }, 43 | }, 44 | }, 45 | { 46 | test: /\.(css|scss)$/, 47 | use: ["style-loader", "css-loader", "sass-loader"], 48 | }, 49 | { 50 | test: /\.(png|jpe?g|gif|svg)$/i, 51 | use: [ 52 | { 53 | loader: "file-loader", 54 | options: { 55 | name: "[name].[ext]", 56 | outputPath: "images", 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 63 | use: [ 64 | { 65 | loader: "file-loader", 66 | options: { 67 | name: "[name].[ext]", 68 | outputPath: "fonts", 69 | }, 70 | }, 71 | ], 72 | }, 73 | ], 74 | }, 75 | devServer: { 76 | port: 3000, 77 | open: true, 78 | hot: true, 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.tsx", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@babel/preset-typescript": "^7.23.3", 20 | "@types/react": "^18.2.48", 21 | "@types/react-dom": "^18.2.18", 22 | "babel-loader": "^8.2.2", 23 | "css-loader": "^6.3.0", 24 | "html-webpack-plugin": "^5.3.2", 25 | "style-loader": "^3.3.0", 26 | "file-loader": "^6.2.0", 27 | "sass-loader": "^14.0.0" 28 | }, 29 | "dependencies": { 30 | "@chakra-ui/react": "^2.8.2", 31 | "@emotion/react": "^11.11.3", 32 | "@emotion/styled": "^11.11.0", 33 | "dotenv": "^16.3.1", 34 | "framer-motion": "^10.18.0", 35 | "process": "^0.11.10", 36 | "react": "^18.2.0", 37 | "react-dom": "^18.2.0", 38 | "webpack": "^5.57.1", 39 | "webpack-cli": "^5.1.4", 40 | "webpack-dev-server": "^4.3.1", 41 | "sass": "^1.70.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App:React.FC = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const container: HTMLElement | null = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | "jsx": "react-jsx", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | 26 | /* Modules */ 27 | "module": "commonjs", /* Specify what module code is generated. */ 28 | // "rootDir": "./", /* Specify the root folder within your source files. */ 29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 34 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 36 | // "resolveJsonModule": true, /* Enable importing .json files */ 37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 38 | 39 | /* JavaScript Support */ 40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 43 | 44 | /* Emit */ 45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 50 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 51 | // "removeComments": true, /* Disable emitting comments. */ 52 | // "noEmit": true, /* Disable emitting files from a compilation. */ 53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 61 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 68 | 69 | /* Interop Constraints */ 70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 75 | 76 | /* Type Checking */ 77 | "strict": true, /* Enable all strict type-checking options. */ 78 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 96 | 97 | /* Completeness */ 98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 99 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 100 | }, 101 | "include": ["src"], 102 | "exclude": ["node_modules"] 103 | } -------------------------------------------------------------------------------- /templates/typescript+webpack+react+mui/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx", ".ts", ".tsx"], 12 | }, 13 | entry: "./src/index.tsx", 14 | output: { 15 | path: path.resolve(__dirname, "dist"), 16 | publicPath: "http://localhost:3000/", 17 | }, 18 | plugins: [ 19 | new htmlWebpackPlugin({ 20 | template: "./public/index.html", 21 | }), 22 | new webpack.DefinePlugin({ 23 | "process.env": JSON.stringify({ 24 | ...dotenv.parsed, 25 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 26 | }), 27 | }), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /.(js|jsx|ts|tsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | options: { 37 | presets: [ 38 | "@babel/preset-env", 39 | "@babel/preset-react", 40 | "@babel/preset-typescript", 41 | ], 42 | }, 43 | }, 44 | }, 45 | { 46 | test: /\.(css|scss)$/, 47 | use: ["style-loader", "css-loader", "sass-loader"], 48 | }, 49 | { 50 | test: /\.(png|jpe?g|gif|svg)$/i, 51 | use: [ 52 | { 53 | loader: "file-loader", 54 | options: { 55 | name: "[name].[ext]", 56 | outputPath: "images", 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 63 | use: [ 64 | { 65 | loader: "file-loader", 66 | options: { 67 | name: "[name].[ext]", 68 | outputPath: "fonts", 69 | }, 70 | }, 71 | ], 72 | }, 73 | ], 74 | }, 75 | devServer: { 76 | port: 3000, 77 | open: true, 78 | hot: true, 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.tsx", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "7.23.7", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@babel/preset-typescript": "^7.23.3", 20 | "@types/react": "^18.2.48", 21 | "@types/react-dom": "^18.2.18", 22 | "babel-loader": "^8.2.2", 23 | "css-loader": "^6.3.0", 24 | "file-loader": "^6.2.0", 25 | "html-webpack-plugin": "^5.3.2", 26 | "sass-loader": "^14.0.0", 27 | "style-loader": "^3.3.0" 28 | }, 29 | "dependencies": { 30 | "dotenv": "^16.3.1", 31 | "process": "^0.11.10", 32 | "react": "^18.2.0", 33 | "react-dom": "^18.2.0", 34 | "sass": "^1.70.0", 35 | "webpack": "^5.57.1", 36 | "webpack-cli": "^5.1.4", 37 | "webpack-dev-server": "^4.3.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App:React.FC = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const container: HTMLElement | null = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | "jsx": "react-jsx", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | 26 | /* Modules */ 27 | "module": "commonjs", /* Specify what module code is generated. */ 28 | // "rootDir": "./", /* Specify the root folder within your source files. */ 29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 34 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 36 | // "resolveJsonModule": true, /* Enable importing .json files */ 37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 38 | 39 | /* JavaScript Support */ 40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 43 | 44 | /* Emit */ 45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 50 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 51 | // "removeComments": true, /* Disable emitting comments. */ 52 | // "noEmit": true, /* Disable emitting files from a compilation. */ 53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 61 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 68 | 69 | /* Interop Constraints */ 70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 75 | 76 | /* Type Checking */ 77 | "strict": true, /* Enable all strict type-checking options. */ 78 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 96 | 97 | /* Completeness */ 98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 99 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 100 | }, 101 | "include": ["src"], 102 | "exclude": ["node_modules"] 103 | } -------------------------------------------------------------------------------- /templates/typescript+webpack+react+scss/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx", ".ts", ".tsx"], 12 | }, 13 | entry: "./src/index.tsx", 14 | output: { 15 | path: path.resolve(__dirname, "dist"), 16 | publicPath: "http://localhost:3000/", 17 | }, 18 | plugins: [ 19 | new htmlWebpackPlugin({ 20 | template: "./public/index.html", 21 | }), 22 | new webpack.DefinePlugin({ 23 | "process.env": JSON.stringify({ 24 | ...dotenv.parsed, 25 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 26 | }), 27 | }), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /.(js|jsx|ts|tsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | options: { 37 | presets: [ 38 | "@babel/preset-env", 39 | "@babel/preset-react", 40 | "@babel/preset-typescript", 41 | ], 42 | }, 43 | }, 44 | }, 45 | { 46 | test: /\.(css|scss)$/, 47 | use: ["style-loader", "css-loader", "sass-loader"], 48 | }, 49 | { 50 | test: /\.(png|jpe?g|gif|svg)$/i, 51 | use: [ 52 | { 53 | loader: "file-loader", 54 | options: { 55 | name: "[name].[ext]", 56 | outputPath: "images", 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 63 | use: [ 64 | { 65 | loader: "file-loader", 66 | options: { 67 | name: "[name].[ext]", 68 | outputPath: "fonts", 69 | }, 70 | }, 71 | ], 72 | }, 73 | ], 74 | }, 75 | devServer: { 76 | port: 3000, 77 | open: true, 78 | hot: true, 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "tailwindcss": {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custum", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.tsx", 6 | "author": "Deepak Mandal", 7 | "license": "ISC", 8 | "scripts": { 9 | "build": "webpack --mode production", 10 | "build:dev": "webpack --mode development", 11 | "build:start": "cd dist && PORT=7001 npx serve", 12 | "start": "webpack serve --open --mode development", 13 | "start:live": "webpack serve --open --mode development --live-reload --hot" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.15.8", 17 | "@babel/preset-env": "^7.15.8", 18 | "@babel/preset-react": "^7.14.5", 19 | "@babel/preset-typescript": "^7.23.3", 20 | "@types/react": "^18.2.48", 21 | "@types/react-dom": "^18.2.18", 22 | "babel-loader": "^8.2.2", 23 | "css-loader": "^6.3.0", 24 | "html-webpack-plugin": "^5.3.2", 25 | "postcss": "^8.4.33", 26 | "style-loader": "^3.3.0", 27 | "tailwindcss": "^3.4.1", 28 | "sass-loader": "^14.0.0" 29 | }, 30 | "dependencies": { 31 | "dotenv": "^16.3.1", 32 | "file-loader": "^6.2.0", 33 | "postcss-loader": "^8.0.0", 34 | "process": "^0.11.10", 35 | "react": "^18.2.0", 36 | "react-dom": "^18.2.0", 37 | "sass": "^1.70.0", 38 | "webpack": "^5.57.1", 39 | "webpack-cli": "^5.1.4", 40 | "webpack-dev-server": "^4.3.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./app.css"; 3 | const App: React.FC = () => { 4 | return ( 5 |
6 |
7 |

Your Web App

8 |

9 | Generate beautiful templates with ease using{" "} 10 | npx web-app-init 11 |

12 |
13 |
14 |
15 |

Get Started

16 |

Follow these simple steps to create your project:

17 | 
18 |             npx web-app-init
19 |
20 |
21 | 39 |
40 | 41 |
42 |

Created with ❤️ by Deepak

43 |
44 |
45 | ); 46 | }; 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/src/app.css: -------------------------------------------------------------------------------- 1 | /* App.css */ 2 | 3 | body, 4 | html { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .container { 10 | width: 100vw; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-between; 15 | } 16 | 17 | .header, 18 | .footer { 19 | --tw-bg-opacity: 1; 20 | background-color: rgb(31 41 55 / var(--tw-bg-opacity)); 21 | --tw-text-opacity: 1; 22 | color: rgb(255 255 255 / var(--tw-text-opacity)); 23 | text-align: center; 24 | padding-top: 1rem /* 16px */; 25 | padding-bottom: 1rem /* 16px */; 26 | } 27 | 28 | .title { 29 | font-size: 1.875rem /* 30px */; 30 | line-height: 2.25rem /* 36px */; 31 | } 32 | .main { 33 | max-width: 42rem /* 672px */; 34 | margin-left: auto; 35 | margin-right: auto; 36 | padding: 1rem /* 16px */; 37 | } 38 | .section-title { 39 | font-size: 1.5rem /* 24px */; 40 | line-height: 2rem /* 32px */; 41 | } 42 | 43 | .code-block { 44 | --tw-bg-opacity: 1; 45 | background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 46 | padding: 0.5rem /* 8px */; 47 | } 48 | 49 | .links-container { 50 | text-align: center; 51 | margin-top: 20px; 52 | } 53 | 54 | .link { 55 | display: inline-block; 56 | margin: 8px; 57 | padding: 8px 16px; 58 | text-decoration: none; 59 | color: #fff; 60 | background-color: #333; 61 | border-radius: 4px; 62 | } 63 | 64 | .link:hover { 65 | background-color: #555; 66 | } 67 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css" 4 | import App from "./App"; 5 | 6 | const container: HTMLElement | null = document.getElementById("root"); 7 | if (container) { 8 | const root = createRoot(container); 9 | root.render(); 10 | } else { 11 | throw new Error("Target container is not dom element"); 12 | } 13 | -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{html,js,ts,jsx,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | "jsx": "react-jsx", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | 26 | /* Modules */ 27 | "module": "commonjs", /* Specify what module code is generated. */ 28 | // "rootDir": "./", /* Specify the root folder within your source files. */ 29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 34 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 36 | // "resolveJsonModule": true, /* Enable importing .json files */ 37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 38 | 39 | /* JavaScript Support */ 40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 43 | 44 | /* Emit */ 45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 50 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 51 | // "removeComments": true, /* Disable emitting comments. */ 52 | // "noEmit": true, /* Disable emitting files from a compilation. */ 53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 61 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 68 | 69 | /* Interop Constraints */ 70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 75 | 76 | /* Type Checking */ 77 | "strict": true, /* Enable all strict type-checking options. */ 78 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 96 | 97 | /* Completeness */ 98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 99 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 100 | }, 101 | "include": ["src"], 102 | "exclude": ["node_modules"] 103 | } -------------------------------------------------------------------------------- /templates/typescript+webpack+react+tailwindCSS/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const htmlWebpackPlugin = require("html-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | // dotenv configuration settings 6 | const dotenv = require("dotenv").config({ path: __dirname + "/.env" }); 7 | const isProduction = process.env.NODE_ENV === "production"; 8 | 9 | module.exports = { 10 | resolve: { 11 | extensions: [".js", ".jsx", ".ts", ".tsx"], 12 | }, 13 | entry: "./src/index.tsx", 14 | output: { 15 | path: path.resolve(__dirname, "dist"), 16 | publicPath: "http://localhost:3000/", 17 | }, 18 | plugins: [ 19 | new htmlWebpackPlugin({ 20 | template: "./public/index.html", 21 | }), 22 | new webpack.DefinePlugin({ 23 | "process.env": JSON.stringify({ 24 | ...dotenv.parsed, 25 | NODE_ENV: JSON.stringify(isProduction ? "production" : "development"), 26 | }), 27 | }), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /.(js|jsx|ts|tsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: "babel-loader", 36 | options: { 37 | presets: [ 38 | "@babel/preset-env", 39 | "@babel/preset-react", 40 | "@babel/preset-typescript", 41 | ], 42 | }, 43 | }, 44 | }, 45 | { 46 | test: /\.(css|scss)$/, 47 | use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"], 48 | }, 49 | { 50 | test: /\.(png|jpe?g|gif|svg)$/i, 51 | use: [ 52 | { 53 | loader: "file-loader", 54 | options: { 55 | name: "[name].[ext]", 56 | outputPath: "images", 57 | }, 58 | }, 59 | ], 60 | }, 61 | { 62 | test: /\.(woff|woff2|eot|ttf|otf)$/i, 63 | use: [ 64 | { 65 | loader: "file-loader", 66 | options: { 67 | name: "[name].[ext]", 68 | outputPath: "fonts", 69 | }, 70 | }, 71 | ], 72 | }, 73 | ], 74 | }, 75 | devServer: { 76 | port: 3000, 77 | open: true, 78 | hot: true, 79 | }, 80 | }; 81 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2022", 4 | "module": "NodeNext", 5 | "moduleResolution": "NodeNext", 6 | "strict": true, 7 | // "lib": ["es2015"] 8 | }, 9 | "types": ["node"], 10 | "exclude": ["node_modules", "templates"] 11 | } 12 | -------------------------------------------------------------------------------- /utils/constants.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.directoryOptions = exports.stylelibraryOption = exports.languagesOption = exports.templateChoices = exports.PROJECT_NAME = exports.CONTINUE_WITH_CURRENT_DIR = exports.SCSS = exports.CHAKRAUI = exports.MUI = exports.TAILWINDCSS = exports.TYPESCRIPT = exports.JAVASCRIPT = exports.REACT = void 0; 4 | exports.REACT = "React"; 5 | exports.JAVASCRIPT = "JavaScript"; 6 | exports.TYPESCRIPT = "TypeScript"; 7 | exports.TAILWINDCSS = "tailwindCSS"; 8 | exports.MUI = "mui"; 9 | exports.CHAKRAUI = "chakraui"; 10 | exports.SCSS = "scss"; 11 | exports.CONTINUE_WITH_CURRENT_DIR = "Continue with current dir"; 12 | exports.PROJECT_NAME = "Project Name"; 13 | exports.templateChoices = [exports.REACT]; 14 | exports.languagesOption = [exports.JAVASCRIPT, exports.TYPESCRIPT]; 15 | exports.stylelibraryOption = [exports.TAILWINDCSS, exports.MUI, exports.CHAKRAUI, exports.SCSS]; 16 | exports.directoryOptions = [ 17 | exports.CONTINUE_WITH_CURRENT_DIR, 18 | exports.PROJECT_NAME, 19 | ]; 20 | -------------------------------------------------------------------------------- /utils/constants.ts: -------------------------------------------------------------------------------- 1 | export const REACT = "React"; 2 | export const JAVASCRIPT = "JavaScript"; 3 | export const TYPESCRIPT = "TypeScript"; 4 | export const TAILWINDCSS = "tailwindCSS"; 5 | export const MUI = "mui"; 6 | export const CHAKRAUI = "chakraui"; 7 | export const SCSS = "scss"; 8 | export const CONTINUE_WITH_CURRENT_DIR = "Continue with current dir"; 9 | export const PROJECT_NAME = "Project Name"; 10 | 11 | export const templateChoices: string[] = [REACT]; 12 | export const languagesOption: string[] = [JAVASCRIPT, TYPESCRIPT]; 13 | export const stylelibraryOption: string[] = [TAILWINDCSS, MUI, CHAKRAUI, SCSS]; 14 | export const directoryOptions: string[] = [ 15 | CONTINUE_WITH_CURRENT_DIR, 16 | 17 | PROJECT_NAME, 18 | ]; 19 | -------------------------------------------------------------------------------- /utils/types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | -------------------------------------------------------------------------------- /utils/types.ts: -------------------------------------------------------------------------------- 1 | export interface ProjectInterface { 2 | ProjectName: string; 3 | } 4 | export interface PackageInterface { 5 | PackageName: string; 6 | } 7 | export interface DirectoryInterface { 8 | directoryName: string; 9 | } 10 | --------------------------------------------------------------------------------