Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qodesmith/create-new-app
Easily generate a new fully-equiped React project, optionally with Redux, React Router, Express, or MongoDB.
https://github.com/qodesmith/create-new-app
cli express generator mongodb react react-router redux sassyons scaffolding scss webpack
Last synced: about 1 month ago
JSON representation
Easily generate a new fully-equiped React project, optionally with Redux, React Router, Express, or MongoDB.
- Host: GitHub
- URL: https://github.com/qodesmith/create-new-app
- Owner: qodesmith
- Created: 2017-10-15T00:20:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-08-08T13:02:14.000Z (over 2 years ago)
- Last Synced: 2024-11-09T01:04:25.382Z (2 months ago)
- Topics: cli, express, generator, mongodb, react, react-router, redux, sassyons, scaffolding, scss, webpack
- Language: JavaScript
- Homepage:
- Size: 682 KB
- Stars: 26
- Watchers: 3
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```text
__
/\ \__
___ _ __ __ __ \ \ ,_\ __
/'___/\`'__/'__`\ /'__`\\ \ \/ /'__`\
/\ \__\ \ \/\ __//\ \L\.\\ \ \_/\ __/
\ \____\ \_\ \____\ \__/.\_\ \__\ \____\
\/____/\/_/\/____/\/__/\/_/\/__/\/____/
___ __ __ __ __
/' _ `\ /'__`/\ \/\ \/\ \
/\ \/\ \/\ __\ \ \_/ \_/ \
\ \_\ \_\ \____\ \___x___/'
\/_/\/_/\/____/\/__//__/
__ _____ _____ By: The Qodesmith
/'__`\ /\ '__`\/\ '__`\
/\ \L\.\\ \ \L\ \ \ \L\ \
\ \__/.\_\ \ ,__/\ \ ,__/
\/__/\/_/\ \ \/ \ \ \/
\ \_\ \ \_\
\/_/ \/_/
```
# Create New App · [](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 `` tag in the `<head>` of the document and a `<script>` tag before the closing `<body>` tag, referencing the build assets.
## Options
### React Router
<table>
<thead>
<tr>
<th>Option</th>
<th>Alias</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td width="125px"><code>--router</code></td>
<td align="center"><code>-r</code></td>
<td>Boolean</td>
<td>
Includes <a href="https://github.com/ReactTraining/react-router">React Router</a> in your application, completely wired up & ready to go. Enjoy the widely supported go-to router of choice in the React ecosystem!
<br><br>
<em>Examples:</em>
<br><code>--router</code>
<br><code>-r</code>
</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
### Server - Express, MongoDB, API
If you're developing a fullstack app we've got you covered with Express and MongoDB. If you _already have_ an existing server that you'd like to connect to - these options are for you too.
<table>
<thead>
<tr>
<th>Option</th>
<th>Alias</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td width="180px"><code>--express</code></td>
<td width="80px" align="center"><code>-e</code></td>
<td>Boolean</td>
<td>
Set's up a Node server running Express.
<br><br>
<em>Examples:</em>
<br><code>--express</code>
<br><code>-e</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td ><code>--api</code></td>
<td align="center">-</td>
<td>String</td>
<td>
Sets the key value to <code>devServer.proxy[api]</code> in <code>webpack.config.js</code>. Used when you have a local back-end you'd like to proxy requests to while developing. For example, set this to <code>/api</code> if your backend responds to calls at <code>/api/some-endpoint</code>.
<br><br>
<em>Examples:</em>
<br><code>--api /api</code>
<br><code>--api=/api</code>
</td>
<td><code>"/api"</code></td>
</tr>
<tr>
<td><code>--mongo</code></td>
<td align="center"><code>-m</code></td>
<td>Boolean</td>
<td>
Set's up MongoDB with a Node server running Express, all wired up & ready to go! If you use this option, no need to also use `--express`.
<br><br>
<em>Examples:</em>
<br><code>--mongo</code>
<br><code>-m</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>--devServerPort</code></td>
<td align="center">-</td>
<td>Number</td>
<td>
Port number to the webpack development server. You'll visit the app locally at <code>http://localhost:<devServerPort></code>.
<br>Note: <code>apiPort</code> takes priority over <code>devServerPort</code>. In the event they are both the same, <code>devServerPort</code> will automatically be adjusted.
<br><br>
<em>Examples:</em>
<br><code>--devServerPort 1234</code>
<br><code>--devServerPort=1234</code>
</td>
<td><code>8080</code></td>
</tr>
<tr>
<td><code>--apiPort</code></td>
<td align="center">-</td>
<td>Number</td>
<td>
Port number to the webpack development server. You'll visit the app locally at <code>http://localhost:<devServerPort></code>.
<br><br>
<em>Examples:</em>
<br><code>--devServerPort 1234</code>
<br><code>--devServerPort=1234</code>
</td>
<td><code>3000</code></td>
</tr>
<tr>
<td><code>--mongoPort</code></td>
<td align="center"><code>--mp</code></td>
<td>Number</td>
<td>
Port number that MongoDB connects on. If you haven't <span style="font-style: italic;">specifically</span> set MongoDB's port when you installed it locally, simply leave this alone and use the default value.
<br><br>
<em>Examples:</em>
<br><code>--mongoPort 30123</code>
<br><code>--mongoPort=30123</code>
<br><code>--mp 30123</code>
<br><code>--mp=30123</code>
</td>
<td><code>27017</code></td>
</tr>
<tr>
<td><code>--mongoPortProd</code></td>
<td align="center"><code>--mpp</code></td>
<td>Number</td>
<td>
Port number that MongoDB connects to <span style="font-style: italic;"><strong>in production</strong></span>. This value <span style="font-style: italic;">should</span> be different than the default value when using MongoDB in production. It defaults to <code>27017</code> in case you didn't change the port in your production environment. But for security reasons, do yourself the favor and don't use the default value in production.
<br><br>
<em>Examples:</em>
<br><code>--mongoPortProd 30123</code>
<br><code>--mongoPortProd=30123</code>
<br><code>--mpp 30123</code>
<br><code>--mpp=30123</code>
</td>
<td><code>27017</code></td>
</tr>
<tr>
<td><code>--mongoUser</code></td>
<td align="center"><code>--mu</code></td>
<td>String</td>
<td>
CNA is set up to to use authentication in production with MongoDB. This sets the user value. You will also need to set a user password, but there's no cli option. Nobody should type a password into a cli! The variable <code>MONGO_USER_PASSWORD</code> will be available in the <code>.env</code> file, but will not be set. Set it manually. See <code>cna --mongoHelp</code> for more information.
<br><br>
<em>Examples:</em>
<br><code>--mongoUser mongo_master</code>
<br><code>--mongoUser=mongo_master</code>
<br><code>--mu mongo_master</code>
<br><code>--mu=mongo_master</code>
</td>
<td>-</td>
</tr>
<tr>
<td><code>--mongoAuthSource</code></td>
<td align="center"><code>--mas</code></td>
<td>String</td>
<td>
CNA is set up to to use authentication in production with MongoDB. This sets the database name for MongoDB to authenticate against. See <code>cna --mongoHelp</code> for more information.
<br><br>
<em>Examples:</em>
<br><code>--mongoAuthSource admin</code>
<br><code>--mongoAuthSource=admin</code>
<br><code>--mas admin</code>
<br><code>--mas=admin</code>
</td>
<td>-</td>
</tr>
</tbody>
</table>
### package.json options
<table>
<thead>
<tr>
<th>Option</th>
<th>Alias</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td width="160px"><code>--author</code></td>
<td width="90px" align="center">-</td>
<td>String</td>
<td>Populates package.json field name of the same value.</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>--description</code></td>
<td align="center">-</td>
<td>String</td>
<td>Populates package.json field name of the same value.</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>--email</code></td>
<td align="center">-</td>
<td>String</td>
<td>Populates package.json field name of the same value.</td>
<td><code>''</code></td>
</tr>
<tr>
<td><code>--keywords</code></td>
<td align="center">-</td>
<td>Array</td>
<td>Populates package.json field name of the same value.<br>Example:<br><code>--keywords one two three</code></td>
<td><code>[]</code></td>
</tr>
<tr>
<td><code>--browserslist</code></td>
<td><code>--bl</code></td>
<td>Array</td>
<td>Populates package.json field name of the same value. This field is used by <a href="https://babeljs.io/docs/en/babel-preset-env#browserslist-integration">@babel/preset-env</a> and <a href="https://github.com/postcss/autoprefixer#browsers">autoprefixer</a>.The default value is aimed at supporting modern browsers only. Also, using <code>last 2 versions</code> <a href="http://bit.ly/2Z5pejA">might not do what you think.</a></td>
<td><code>['>0.25%', 'not ie 11', 'not op_mini all']</code></td>
</tr>
<tr>
<td><code>--repository</code></td>
<td><code>--repo</code></td>
<td>Array</td>
<td>Populates package.json field name of the same value.</td>
<td><code>''</code></td>
</tr>
</tbody>
</table>
### Information-only
| Option | Alias | Description |
| ------------- | ------ | ------------------------------------------------------------------------------- |
| `--help` | `-h` | Outputs the help screen, showing all the above documented options. |
| `--mongoHelp` | `--mh` | Outputs some helpful information about getting MongoDB prepared for production. |
| `--version` | `-v` | Outputs the version of CNA that you're using to the terminal. |
### Other options
<table>
<thead>
<tr>
<th>Option</th>
<th>Alias</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td width="125px"><code>--offline</code></td>
<td><code>-o</code></td>
<td>Boolean</td>
<td>
Forces npm to use cache when installing. Great if you don't want npm hogging your data. Tethering, anyone?
<br><br>
<em>Examples:</em>
<br><code>--offline</code>
<br><code>-o</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>--force</code></td>
<td><code>-f</code></td>
<td>Boolean</td>
<td>
Want to install an app in a pre-existing folder? Use this. But be warned! There's a possibility you can overwrite files if the names conflict!
<br><br>
<em>Examples:</em>
<br><code>--force</code>
<br><code>-f</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>--noGit</code></td>
<td>-</td>
<td>Boolean</td>
<td>
Don't want a git repo? This is for you. Keep in mind CNA won't initialize a git repo if the `--force` or `--repository` options are used.
<br><br>
<em>Examples:</em>
<br><code>--noGit</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>--sandbox</code></td>
<td><code>-s</code></td>
<td>Boolean</td>
<td>
Creates a "sandbox" app which consists of 3 simple files:
<ul>
<li>index.html</li>
<li>styles.css</li>
<li>main.js</li>
</ul>
If you use this option, everything else will be ignored. This option is perfect for whipping up a quick directory with some files to play in.
<br><br>
<em>Examples:</em>
<br><code>--sandbox</code>
<br><code>-s</code>
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>--title</code></td>
<td><code>-t</code></td>
<td>String</td>
<td>
Sets the webpage title generated by Webpack's <code>HtmlWebpackPlugin</code>.
<br><br>
<em>Examples:</em>
<br><code>--title 'JavaScript Rules'</code>
<br><code>--title='JavaScript Rules'</code>
<br><code>-t 'JavaScript Rules'</code>
<br><code>-t='JavaScript Rules'</code>
</td>
<td>Title-cased version of the app name.</td>
</tr>
</tbody>
</table>