From 8969a38acead6c9d208f65e94bc8ab2a67c78161 Mon Sep 17 00:00:00 2001 From: Qodesmith Date: Mon, 15 Dec 2025 07:01:20 -0500 Subject: [PATCH 001/451] Resetting the project to a blank canvas --- .gitignore | 33 +- .npmignore | 1 - .prettierignore | 1 - .watchmanconfig | 1 - README.md | 443 ---- checkDependencies.js | 88 - file-creators/dotEnv.js | 119 - file-creators/gitignore.js | 33 - file-creators/packageJson.js | 184 -- file-creators/webpackConfig.js | 43 - files/README.md | 1 - files/after-compile-plugin.js | 93 - files/api/home.js | 24 - files/api/utilities/catchy.js | 8 - files/api/utilities/errorUtil.js | 32 - files/api/utilities/handleErrors.js | 62 - files/api/utilities/logMongoAuthWarning.js | 50 - files/api/utilities/mongo.js | 62 - files/dist/favicon.ico | Bin 4150 -> 0 bytes files/dist/robots.txt | 0 files/example-mongo-endpoint.js | 11 - files/gitignore.txt | 72 - files/helpers/commonHelpers.js | 37 - files/helpers/reduxHelpers.js | 9 - files/postcss.config.js | 39 - files/prettierignore.txt | 7 - files/prettierrc.txt | 19 - files/router/Home.jsx | 22 - files/router/NotFound.jsx | 14 - files/router/entry.jsx | 29 - files/sandbox/index.html | 11 - files/sandbox/main.js | 9 - files/sandbox/styles.css | 9 - files/server-mongo.js | 118 - files/server.js | 80 - files/src/assets/.gitkeep | 0 files/src/components/App.jsx | 40 - files/src/entry.jsx | 22 - files/src/hooks/useUpdatingClock.js | 27 - files/src/index.ejs | 30 - files/src/styles/global.scss | 24 - files/src/styles/styles.scss | 19 - files/webpack.config.js | 536 ----- main.js | 591 ----- modules/adjustEntryFile.js | 25 - modules/adjustPkgJson.js | 41 - modules/badName.js | 19 - modules/browserslist.js | 7 - modules/copySafe.js | 49 - modules/createBorderedCenteredComment.js | 36 - modules/createNewerVersionMessage.js | 36 - modules/dependencies.js | 103 - modules/getVersion.js | 6 - modules/indentFromZero.js | 35 - modules/indentToNum.js | 13 - modules/initializeGit.js | 21 - modules/isOnline.js | 34 - modules/keepOldFileContent.js | 56 - modules/makeTable.js | 146 -- modules/noName.js | 26 - modules/portValidator.js | 26 - modules/prompts.js | 69 - modules/removeAnsiChars.js | 10 - modules/run.js | 34 - modules/safeToCreateDir.js | 25 - modules/showHelp.js | 62 - modules/showMongoHelp.js | 71 - modules/showVersion.js | 9 - package.json | 69 +- removeTestFolders.js | 40 - tests/e2e/01-vanilla-react.test.js | 217 -- tests/e2e/02-react-rrouter.test.js | 213 -- tests/e2e/03-vanilla-react-express.test.js | 242 --- tests/e2e/04-react-express-rrouter.test.js | 242 --- tests/e2e/05-vanilla-react-mongo.test.js | 261 --- tests/e2e/06-react-mongo-rrouter.test.js | 264 --- .../01-vanilla-react.test.js.snap | 994 --------- .../02-react-rrouter.test.js.snap | 1546 ------------- .../03-vanilla-react-express.test.js.snap | 1712 --------------- .../04-react-express-rrouter.test.js.snap | 1719 --------------- .../05-vanilla-react-mongo.test.js.snap | 1913 ---------------- .../06-react-mongo-rrouter.test.js.snap | 1920 ----------------- tests/e2e/__snapshots__/sandbox.test.js.snap | 42 - tests/e2e/config/dependencies.js | 105 - tests/e2e/config/extends.js | 40 - tests/e2e/config/filesAndFolders.js | 76 - tests/e2e/helpers/folderFileHelper.js | 87 - tests/e2e/helpers/jsFilesAreValid.js | 34 - tests/e2e/sandbox.test.js | 39 - .../__snapshots__/adjustPkgJson.test.js.snap | 14 - tests/unit/__snapshots__/badName.test.js.snap | 15 - .../__snapshots__/dependencies.test.js.snap | 653 ------ .../keepOldFileContent.test.js.snap | 89 - .../unit/__snapshots__/showHelp.test.js.snap | 49 - .../__snapshots__/showMongoHelp.test.js.snap | 64 - tests/unit/adjustEntryFile.test.js | 20 - tests/unit/adjustPkgJson.test.js | 45 - tests/unit/badName.test.js | 21 - tests/unit/browsersList.test.js | 8 - .../createBorderedCenteredComment.test.js | 27 - tests/unit/dependencies.test.js | 125 -- tests/unit/e2eFolderFileHelper.test.js | 144 -- tests/unit/indentFromZero.test.js | 85 - tests/unit/indentToNum.test.js | 25 - tests/unit/keepOldFileContent.test.js | 79 - tests/unit/makeTable.test.js | 159 -- tests/unit/packageJson.test.js | 123 -- tests/unit/portValidator.test.js | 48 - tests/unit/safeToCreateDir.test.js | 43 - .../sample-folder-dont-delete/.a-dot-file | 0 .../sample-folder-dont-delete/a/a-a/.gitkeep | 0 .../a/a-b/a-b-a/empty.html | 0 .../unit/sample-folder-dont-delete/a/index.js | 0 .../b/b-a/b-a-a/empty.css | 0 tests/unit/sample-folder-dont-delete/empty.js | 0 tests/unit/showHelp.test.js | 18 - tests/unit/showMongoHelp.test.js | 16 - tests/unit/showVersion.test.js | 20 - versionCheck.js | 30 - 119 files changed, 36 insertions(+), 17671 deletions(-) delete mode 100644 .npmignore delete mode 100644 .prettierignore delete mode 100644 .watchmanconfig delete mode 100644 checkDependencies.js delete mode 100644 file-creators/dotEnv.js delete mode 100644 file-creators/gitignore.js delete mode 100644 file-creators/packageJson.js delete mode 100644 file-creators/webpackConfig.js delete mode 100644 files/README.md delete mode 100644 files/after-compile-plugin.js delete mode 100644 files/api/home.js delete mode 100644 files/api/utilities/catchy.js delete mode 100644 files/api/utilities/errorUtil.js delete mode 100644 files/api/utilities/handleErrors.js delete mode 100644 files/api/utilities/logMongoAuthWarning.js delete mode 100644 files/api/utilities/mongo.js delete mode 100644 files/dist/favicon.ico delete mode 100644 files/dist/robots.txt delete mode 100644 files/example-mongo-endpoint.js delete mode 100644 files/gitignore.txt delete mode 100644 files/helpers/commonHelpers.js delete mode 100644 files/helpers/reduxHelpers.js delete mode 100644 files/postcss.config.js delete mode 100644 files/prettierignore.txt delete mode 100644 files/prettierrc.txt delete mode 100644 files/router/Home.jsx delete mode 100644 files/router/NotFound.jsx delete mode 100644 files/router/entry.jsx delete mode 100644 files/sandbox/index.html delete mode 100644 files/sandbox/main.js delete mode 100644 files/sandbox/styles.css delete mode 100644 files/server-mongo.js delete mode 100644 files/server.js delete mode 100644 files/src/assets/.gitkeep delete mode 100644 files/src/components/App.jsx delete mode 100644 files/src/entry.jsx delete mode 100644 files/src/hooks/useUpdatingClock.js delete mode 100644 files/src/index.ejs delete mode 100644 files/src/styles/global.scss delete mode 100644 files/src/styles/styles.scss delete mode 100644 files/webpack.config.js delete mode 100755 main.js delete mode 100644 modules/adjustEntryFile.js delete mode 100644 modules/adjustPkgJson.js delete mode 100644 modules/badName.js delete mode 100644 modules/browserslist.js delete mode 100644 modules/copySafe.js delete mode 100644 modules/createBorderedCenteredComment.js delete mode 100644 modules/createNewerVersionMessage.js delete mode 100644 modules/dependencies.js delete mode 100644 modules/getVersion.js delete mode 100644 modules/indentFromZero.js delete mode 100644 modules/indentToNum.js delete mode 100644 modules/initializeGit.js delete mode 100644 modules/isOnline.js delete mode 100644 modules/keepOldFileContent.js delete mode 100644 modules/makeTable.js delete mode 100644 modules/noName.js delete mode 100644 modules/portValidator.js delete mode 100644 modules/prompts.js delete mode 100644 modules/removeAnsiChars.js delete mode 100644 modules/run.js delete mode 100644 modules/safeToCreateDir.js delete mode 100644 modules/showHelp.js delete mode 100644 modules/showMongoHelp.js delete mode 100644 modules/showVersion.js delete mode 100644 removeTestFolders.js delete mode 100644 tests/e2e/01-vanilla-react.test.js delete mode 100644 tests/e2e/02-react-rrouter.test.js delete mode 100644 tests/e2e/03-vanilla-react-express.test.js delete mode 100644 tests/e2e/04-react-express-rrouter.test.js delete mode 100644 tests/e2e/05-vanilla-react-mongo.test.js delete mode 100644 tests/e2e/06-react-mongo-rrouter.test.js delete mode 100644 tests/e2e/__snapshots__/01-vanilla-react.test.js.snap delete mode 100644 tests/e2e/__snapshots__/02-react-rrouter.test.js.snap delete mode 100644 tests/e2e/__snapshots__/03-vanilla-react-express.test.js.snap delete mode 100644 tests/e2e/__snapshots__/04-react-express-rrouter.test.js.snap delete mode 100644 tests/e2e/__snapshots__/05-vanilla-react-mongo.test.js.snap delete mode 100644 tests/e2e/__snapshots__/06-react-mongo-rrouter.test.js.snap delete mode 100644 tests/e2e/__snapshots__/sandbox.test.js.snap delete mode 100644 tests/e2e/config/dependencies.js delete mode 100644 tests/e2e/config/extends.js delete mode 100644 tests/e2e/config/filesAndFolders.js delete mode 100644 tests/e2e/helpers/folderFileHelper.js delete mode 100644 tests/e2e/helpers/jsFilesAreValid.js delete mode 100644 tests/e2e/sandbox.test.js delete mode 100644 tests/unit/__snapshots__/adjustPkgJson.test.js.snap delete mode 100644 tests/unit/__snapshots__/badName.test.js.snap delete mode 100644 tests/unit/__snapshots__/dependencies.test.js.snap delete mode 100644 tests/unit/__snapshots__/keepOldFileContent.test.js.snap delete mode 100644 tests/unit/__snapshots__/showHelp.test.js.snap delete mode 100644 tests/unit/__snapshots__/showMongoHelp.test.js.snap delete mode 100644 tests/unit/adjustEntryFile.test.js delete mode 100644 tests/unit/adjustPkgJson.test.js delete mode 100644 tests/unit/badName.test.js delete mode 100644 tests/unit/browsersList.test.js delete mode 100644 tests/unit/createBorderedCenteredComment.test.js delete mode 100644 tests/unit/dependencies.test.js delete mode 100644 tests/unit/e2eFolderFileHelper.test.js delete mode 100644 tests/unit/indentFromZero.test.js delete mode 100644 tests/unit/indentToNum.test.js delete mode 100644 tests/unit/keepOldFileContent.test.js delete mode 100644 tests/unit/makeTable.test.js delete mode 100644 tests/unit/packageJson.test.js delete mode 100644 tests/unit/portValidator.test.js delete mode 100644 tests/unit/safeToCreateDir.test.js delete mode 100644 tests/unit/sample-folder-dont-delete/.a-dot-file delete mode 100644 tests/unit/sample-folder-dont-delete/a/a-a/.gitkeep delete mode 100644 tests/unit/sample-folder-dont-delete/a/a-b/a-b-a/empty.html delete mode 100644 tests/unit/sample-folder-dont-delete/a/index.js delete mode 100644 tests/unit/sample-folder-dont-delete/b/b-a/b-a-a/empty.css delete mode 100644 tests/unit/sample-folder-dont-delete/empty.js delete mode 100644 tests/unit/showHelp.test.js delete mode 100644 tests/unit/showMongoHelp.test.js delete mode 100644 tests/unit/showVersion.test.js delete mode 100644 versionCheck.js diff --git a/.gitignore b/.gitignore index 47599b54..a0c70585 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,31 @@ -node_modules/ +# dependencies (bun install) +node_modules + +# output +out +dist +*.tgz + +# code coverage +coverage +*.lcov + +# logs +logs +_.log +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# Environment variable files +.env +.env.** + +# caches +.eslintcache +.cache +*.tsbuildinfo + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) folder config .DS_Store -**/*test -package-lock.json diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 26eb2ca2..00000000 --- a/.npmignore +++ /dev/null @@ -1 +0,0 @@ -mongo-development-helpers diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index d01835b4..00000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -./files/api/utilities/logMongoAuthWarning.js diff --git a/.watchmanconfig b/.watchmanconfig deleted file mode 100644 index 0967ef42..00000000 --- a/.watchmanconfig +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/README.md b/README.md index b0f258ba..d974d448 100644 --- a/README.md +++ b/README.md @@ -21,446 +21,3 @@ ``` # Create New App · [![npm version](https://badge.fury.io/js/create-new-app.svg)](https://badge.fury.io/js/create-new-app) - -Create full-stack React applications! All the tech you've come to know and love - React, Express, & MongoDB. Use some, use none, but _always_ use React ;) - -## The Why - -You want to make apps. You want to make apps with [React](https://reactjs.org/). Excellent choice. - -[Create React App](https://github.com/facebookincubator/create-react-app) is awesome, no doubt, but your app needs an API - so you look to [Express](https://expressjs.com/). Heck, you might _already have_ an API! But how to integrate it? And to top it off, you like using JavaScript up and down the stack, so your persistence layer is [MongoDB](https://mongodb.github.io/node-mongodb-native/). But CRA doesn't give you all of this out of the box. What's a developer to do? - -**[Create New App](https://github.com/qodesmith/create-new-app)**, _that's_ what you do! - -It's just like CRA but with full stack options - and more! You get a [Webpack](https://webpack.js.org/configuration/) development server, a build which ties all-the-things together, the fancy new [React Fast Refresh](https://medium.com/javascript-in-plain-english/what-is-react-fast-refresh-f3d1e8401333), and a custom SCSS utility library named [Sassyons](https://github.com/qodesmith/sassyons) - atomic CSS anyone? Optionally include [React Router](https://reacttraining.com/react-router/), [Express](https://expressjs.com/), and [MongoDB](https://mongodb.github.io/node-mongodb-native/). Don't need some of the goodies included? No worries! A few CLI flags and you're off to the web development races with whatever it is you _do_ need. No ejecting either. Everything is set up for you, loaded with comments and links, and ready for your tweaking - or not. You're gonna like this. I promise. - -## Installation - -```shell -npm install -g create-new-app -``` - -## Usage - -### Guided Process - -It couldn't be easier to use Create New App. Simply type `create-new-app` (or `cna` for short) and you'll start the guided process: - -1. Enter a name for your app -2. Would you like to include React Router? -3. Would you like to include an Express server? -4. Would you like to include MongoDB? - -### Manual Options - -Simplest example: `create-new-app `
-^^^ #Boom. Your app is running on `http://localhost:8080`. - -Want the full control of all the options? No problem: - -```shell -create-new-app [options] - -# Shorthand: -cna [options] -``` - -### Sandbox Project - -Sometimes you simply want a quick sandbox project to test something real quick. Maybe in order to test a simple function or some CSS. Create New App has you covered: - -```shell -cna --sandbox -``` - -This will generate 3 files for you, tied together in `index.html`: - -1. index.html -2. main.js -3. styles.css - -Simple, no? Let's look at some other examples... - -## Other Examples - -```shell -# Let the guided process walk you through it: -create-new-app - -# You already have a local API built & running at `localhost:1234`: -create-new-app awesomeness --api / --apiPort 1234 - -# Perhaps all requests to that local api are behind the `/api` flag: -create-new-app awesomeness --api /api --apiPort 1234 - -# You've decided you want a new API. Express is set up for you: -create-new-app awesomeness -e - -# You want a new API with MongoDB wired up & ready to go: -create-new-app awesomeness -m -``` - -## Webpack Magic - -**Webpack 5!!!** While Webpack certainly seems like magic, let's just go over what that "magic" is doing for you in this project. - -### Development Server - -This is an obvious one. You're developing, right? Well, you're in luck. Webpack is running a development server that defaults to port 8080. Visit `http://localhost:8080`, make changes to your JS or SCSS files, and watch Webpack refresh that screen. - -### Tree Shaking / Minification - -Delivers super-sexy minified JavaScript without those dead branches! Your CSS is purged & minified as well. #Bandwidth - -### Babel / Polyfilling - -Write ES6+ and beyond. Babel 7 is integrated and CNA is tweaked to support modern browsers. If you need to support older browsers, simply adjust the `browserslist` field in the `package.json` file. `@babel/polyfill` has been [deprecated](http://bit.ly/2DTXGpe), but fear not! `core-js` to the rescue. Check it out at the top of `entry.js`. - -### Postcss - -SCSS is included and get's compiled down to CSS. But that's half the magic. [Postcss](https://github.com/postcss/postcss) is [autoprefixing](https://github.com/postcss/autoprefixer) our styles, smartly grouping [media queries](https://github.com/hail2u/node-css-mqpacker) together, [combining](https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors) redudant selectors, [removing](https://github.com/ben-eb/postcss-discard-comments) comments, minifying [color names](https://www.npmjs.com/package/postcss-colormin), and [sorting](https://github.com/Siilwyn/css-declaration-sorter) properties for better gzip compression! It's also [purging](https://github.com/FullHuman/postcss-purgecss) unused css (see below). - -### Purgecss - -Automatically [removes unused CSS](https://www.purgecss.com/)! It's only triggered when you run a build for production, so you can still hack away in Chrome's console and have access to all your styles. Also included is the [purgecss-whitelister](https://github.com/qodesmith/purgecss-whitelister) to prevent CSS from 3rd party tools being removed that you want to keep. - -### CleanWebpackPlugin - -[CleanWebpackPlugin](http://bit.ly/2WEalXF) is used to clean the `dist` folder when running a build. It's the folder that will contain your app's bundled assets. - -### MiniCssExtractPlugin - -[MiniCssExtractPlugin](http://bit.ly/2YYiAvg) removes the CSS data that's in the JS bundle and extracts it into a CSS file. This is the recommended plugin to use instead of the old [extract text webpack plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). - -### HtmlWebpackPlugin - -[HtmlWebpackPlugin](http://bit.ly/2WBxaLR) generates the `index.html` file. Dynamically creates a `