# create-new-app > Easily generate a new React application, optionally with Express & MongoDB. Latest version **7.5.0** (published 2021-05-22) · MIT license · 0 weekly downloads ## Install ```sh npm install create-new-app pnpm add create-new-app yarn add create-new-app bun add create-new-app ``` Provides the commands `cna`, `create-new-app`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 7.5.0 | | Published | 2021-05-22 | | First published | 2017-10-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=10.13.0 | | Dependencies | 6 | | Unpacked size | 593.3 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | GitHub stars | 26 | | Author | Qodesmith | | Maintainers | qodesmith | | Keywords | react, react-router, webpack, scss, sassyons, express, mongo, mongodb, generator, generate, scaffold, scaffolding, development, app, cli, tool, template, MERN, MERN stack | ## Links - npm: https://www.npmjs.com/package/create-new-app - Repository: https://github.com/qodesmith/create-new-app - Issues: https://github.com/qodesmith/create-new-app/issues - npm.io page: https://npm.io/package/create-new-app ## Dependencies (6) - [chalk](https://npm.io/package/chalk.md) ^4.1.0 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1 - [command-line-args](https://npm.io/package/command-line-args.md) ^5.1.1 - [npm-registry-fetch](https://npm.io/package/npm-registry-fetch.md) ^9.0.0 - [validate-npm-package-name](https://npm.io/package/validate-npm-package-name.md) ^3.0.0 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads ## Recent versions - 7.5.0 (latest) — 2021-05-22 - 0.0.1 (beta) — 2017-10-24 - 7.4.0 — 2021-02-21 - 7.3.5 — 2021-02-21 - 7.3.4 — 2021-02-21 - 7.3.3 — 2021-02-21 - 7.3.2 — 2021-02-21 - 7.3.1 — 2021-02-21 - 7.3.0 — 2021-02-21 - 7.2.1 — 2021-02-06 - 7.2.0 — 2021-01-23 - 7.1.0 — 2021-01-23 - 7.0.0 — 2021-01-18 - 6.4.0 — 2021-01-17 - 6.3.1 — 2021-01-12 - … 125 more at https://npm.io/package/create-new-app/versions ## README ```text __ /\ \__ ___ _ __ __ __ \ \ ,_\ __ /'___/\`'__/'__`\ /'__`\\ \ \/ /'__`\ /\ \__\ \ \/\ __//\ \L\.\\ \ \_/\ __/ \ \____\ \_\ \____\ \__/.\_\ \__\ \____\ \/____/\/_/\/____/\/__/\/_/\/__/\/____/ ___ __ __ __ __ /' _ `\ /'__`/\ \/\ \/\ \ /\ \/\ \/\ __\ \ \_/ \_/ \ \ \_\ \_\ \____\ \___x___/' \/_/\/_/\/____/\/__//__/ __ _____ _____ By: The Qodesmith /'__`\ /\ '__`\/\ '__`\ /\ \L\.\\ \ \L\ \ \ \L\ \ \ \__/.\_\ \ ,__/\ \ ,__/ \/__/\/_/\ \ \/ \ \ \/ \ \_\ \ \_\ \/_/ \/_/ ``` # 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 `