__
                        /\ \__
  ___  _ __   __     __ \ \ ,_\    __
 /'___/\`'__/'__`\ /'__`\\ \ \/  /'__`\
/\ \__\ \ \/\  __//\ \L\.\\ \ \_/\  __/
\ \____\ \_\ \____\ \__/.\_\ \__\ \____\
 \/____/\/_/\/____/\/__/\/_/\/__/\/____/
  ___      __  __  __  __
/' _ `\  /'__`/\ \/\ \/\ \
/\ \/\ \/\  __\ \ \_/ \_/ \
\ \_\ \_\ \____\ \___x___/'
 \/_/\/_/\/____/\/__//__/
   __    _____   _____    By: The Qodesmith
 /'__`\ /\ '__`\/\ '__`\
/\ \L\.\\ \ \L\ \ \ \L\ \
\ \__/.\_\ \ ,__/\ \ ,__/
 \/__/\/_/\ \ \/  \ \ \/
           \ \_\   \ \_\
            \/_/    \/_/

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. Excellent choice.

Create React App is awesome, no doubt, but your app needs an API - so you look to Express. 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. But CRA doesn't give you all of this out of the box. What's a developer to do?

Create New App, that's what you do!

It's just like CRA but with full stack options - and more! You get a Webpack development server, a build which ties all-the-things together, the fancy new React Fast Refresh, and a custom SCSS utility library named Sassyons - atomic CSS anyone? Optionally include React Router, Express, and MongoDB. 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

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 <app-name>
^^^ #Boom. Your app is running on http://localhost:8080.

Want the full control of all the options? No problem:

create-new-app <app-name> [options]

# Shorthand:
cna <app-name> [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:

cna <app-name> --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

# 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, 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 is autoprefixing our styles, smartly grouping media queries together, combining redudant selectors, removing comments, minifying color names, and sorting properties for better gzip compression! It's also purging unused css (see below).

Purgecss

Automatically removes unused CSS! 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 to prevent CSS from 3rd party tools being removed that you want to keep.

CleanWebpackPlugin

CleanWebpackPlugin 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 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.

HtmlWebpackPlugin

HtmlWebpackPlugin generates the index.html file. Dynamically creates a <style> tag in the <head> of the document and a <script> tag before the closing <body> tag, referencing the build assets.

Options

React Router

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.

package.json options

Information-only

Other options