Nomadic People Migration
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

create-new-app

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

Create New App · npm version

You want to make apps. You want to make apps with React. Excellent choice.

Create React App is awesome, no doubt, but you find yourself constantly tweaking files to get SCSS included. And wouldn't you know it? 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, and a custom SCSS utility library named Sassyons. Optionally include React Router, Redux, 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, being asked up to 5 questions:

  1. Enter a name for your app
  2. Would you like to include Redux?
  3. Would you like to include React Router?
  4. Would you like to include an Express server?
  5. 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 4!!! 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 3000. Make changes to your JS or SCSS files and let 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

Write ES6+ and beyond. Babel 7 is integrated so you'll get ES5 once you run a build. Be sure to check out the entry.js file and see if you need @babel/polyfill or not.

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, 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

Redux option

Option Alias Type Description Default
--redux -x Boolean Includes Redux in your application, completely wired up & ready to go. Store, reducers, middleware... all that good stuff.

Examples:
--redux
-x
false

React Router option

Option Alias Type Description Default
--router -r Boolean Includes React Router in your application, completely wired up & ready to go. Enjoy the widely supported go-to router of choice in the React ecosystem!

Examples:
--router
-r
false

API server options

When you need a back end for your app, you need an API server. The purpose of an API server is to receive proxied requests from Webpack's development server. If you have a pre-existing api already, simply use the --api option. Otherwise, an Express server will be set up for you with either the --express or --mongo options.

Option Alias Type Description Default
--api - String Sets the key value to devServer.proxy[api] in webpack.config.js. Used when you have a local back-end you'd like to proxy requests to while developing.

Examples:
--api /api
--api=/api
/
--apiPort - Number Port number to the api server.

Examples:
--apiPort 5000
--apiPort=5000
3000
--devServerPort - Number Port number to the development server.
Note: The `apiPort` takes priority over the `devServerPort`. In the event that they are both the same, `devServerPort` will be incremented by 1.

Examples:
--devServerPort 2000
--devServerPort=2000
8080
--express -e Boolean Set up a local Express api server with Node.

Examples:
--express
-e
false
--mongo -m Boolean Set up MongoDB with a local Express api server on Node.

Examples:
--mongo
-m
false

package.json options

Option Type Description Default
--author String Populates package.json field name of the same value. ''
--description String Populates package.json field name of the same value. ''
--email String Populates package.json field name of the same value. ''
--keywords String Populates package.json field name of the same value. []

Other options

Option Alias Type Description Default
--offline -o Boolean Forces npm to use cache when installing. Great if you don't want npm hogging your data. Tethering, anyone?

Examples:
--offline
-o
false
--title -t String Sets the webpage title generated by Webpack's HtmlWebpackPlugin.

Examples:
--title 'JavaScript Rules'
--title='JavaScript Rules'
-t 'JavaScript Rules'
-t='JavaScript Rules'
Title-cased version of the app name.
--sandbox -s Boolean Creates a "sandbox" app which consists of 3 simple files:
  • index.html
  • styles.css
  • main.js
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.

Examples:
--sandbox
-s
false

TODO's

  • Include Redux as an option (or default?)
  • Include redux-first-router React Router as an option
  • Implement PWA's by default with CLI option to disable
  • Implement Jest Cypress along with a test for the generated components
  • Create man documentation for use in package.json - https://goo.gl/64HeiV

install

npm i create-new-app

Downloadsweekly downloads

1,829

version

3.16.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability