freshpack
Wire Things up the Automatic Way*
Command line tool for a quick development start of React apps. freshpack creates minimal boilerplates and installs latest versions of all required dependencies.
Table of Contents
About
Create-react-app is a comfortable way to get started on a new React project. But unfortunately, standard tools are not selectable and have to be installed (or removed) later.
In contrast, freshpack works à-la-carte and provides options for commonly used tools:
Includes all required dependencies, configuration files, minimal sample applications and original tool commands in the scripts section of package.json (instead of react-scripts).
The tools of modern web development are constantly changing and expanding. This does not lastly affect configuration files and who does not know problems after webpack updates. rollup and other tools affect the development of webpack (tree shaking, inlining, options instead of configuration files, ..) and so the wheel spins on and on.
Of course, this is critical for freshpack, which always loads the latest versions of various components and assembles them without the ability to test. So no guarantee for a proper interaction of all necessary dependencies in the latest versions.
If you get an error after generating an react app with freshpack, please report an issue on the github page!
Installation
Node v10.16.0 or later and Yarn are required
Note: If you are using the --lint option, please update your Node version: the newest versions of eslint '5.x.x' needs a current Node release (Node v10+)
$ yarn global add freshpackUsage
Basic features
$ freshpack <project-directory>- Generates a minimal React app skeleton ('Hello World')
- Generates webpack configuration file
- Generates babel configuration file
- Generates editor configuration file (.editorConfig)
- Generates package.json file
- Adds start script for development ('yarn start')
- Retrieves the last version numbers of all necessary dependencies and saved them in package.json file.
- Enables hot reloading
- Displays info when new freshpack version available
Option install
$ freshpack <project-directory> [--install, -i]- Installs dependencies automatically (yarn install)
Option quiet
$ freshpack <project-directory> [--quiet, -q]- Disable verbose logging
Option router
$ freshpack <project-directory> [--router, -o]- Generates skeleton with router example ('Navigation')
- Installs all required 'router' dependencies
- Adds router tests
Option redux
$ freshpack <project-directory> [--redux, -r]- Generates skeleton with redux example ('Counter')
- Installs all required 'redux' dependencies
- Adds redux tests
Option mobx
$ freshpack <project-directory> [--mobx, -m]- Generates skeleton with mobx example ('Counter')
- Installs all required 'mobx' dependencies
- Adds mobx dev tools to index file
Option sass
$ freshpack <project-directory> [--sass, -a]- Generates skeleton with example 'App.sass' file (instead of css)
- Installs all required 'sass' dependencies
- Adds 'sass-loader' to webpack configuration
Option lint
$ freshpack <project-directory> [--lint, -l]- Generates 'eslint' configuration (.eslintrc.yaml)
- Adds lint script ('yarn lint')
- Installs all required 'eslint' dependencies
- Installs 'airbnb code style' configuration
Option test
$ freshpack <project-directory> [--test, -t]- Generates example 'App.spec.js' file
- Generates 'jest' configuration (.jestrc)
- Adds test script ('yarn test')
- Installs all required 'jest' and 'enzyme' dependencies
Option flow
$ freshpack <project-directory> [--flow, -f]- Generates skeleton with 'flow' example(s)
- Installs all required 'flow' dependencies
- Adds 'flow-typed' files
- Adds Visual Studio Code settings file
Option styled
$ freshpack <project-directory> [--styled, -y]- Generates skeleton with 'styled-components' example(s)
- Installs required 'styled-components' dependency
- Adds 'styled-components' files
Option dev
$ freshpack <project-directory> [--dev, -d]# .. shorthand for $ freshpack <project-directory> --flow --lint --test- Combine all dev options
Commands
Lint
Available after usage with option --lint
$ yarn lintTest
Available after usage with option --test
$ yarn test$ yarn test:watch$ yarn test:watch:all$ yarn test:coverageAvailable after usage with options --test and --lint (or --dev)
$ yarn test:allRun flow status
Available after usage with option --flow
$ yarn flowRun app in dev mode
$ yarn startStructure
Here are some examples of the generated boilerplate file systems, which differ from each other according to selected options.
The source folder is not sorted according to functionalities (folders for all components, containers, reducers, tests, etc.), but bundles all module-related files (scripts, styles, state, spec and types) in module folders.
Redux components (actions, action creators and reducers) are stored together in a single "state" file in the module folder and not in different folders or files.
This structure is, of course, a matter of taste as well as the application case and easy to change in the generated boilerplate.
Minimal React Skeleton
$ freshpack <project-directory> ├── .babelrc├── .editorconfig├── package.json├── src│ ├── components│ │ └── app│ │ ├── App.js│ │ └── style.css│ ├── index.html│ └── index.js├── webpack.config.js└── yarn.lockReact + Flow + ESLint + Test + Redux + Sass
$ freshpack <project-directory> -dra ├── .babelrc├── .editorconfig├── .eslintrc.yml├── .flowConfig├── .mocks│ └── empty-module.js├── .vscode│ └── settings.json├── flow-typed│ ├── prop-types.js│ ├── react-redux.js│ └── redux.js├── package.json├── src│ ├── components│ │ └── app│ │ ├── App.js│ │ ├── spec.js│ │ ├── state.js│ │ └── style.scss│ ├── index.html│ ├── index.js│ └── store.js├── webpack.config.js└── yarn.lockReact + Flow + ESLint + Test + Redux + Styled Components
$ freshpack <project-directory> -dry ├── .babelrc├── .editorconfig├── .eslintrc.yml├── .flowConfig├── .vscode│ └── settings.json├── flow-typed│ ├── prop-types.js│ ├── react-redux.js│ ├── redux.js│ └── styled-components.js├── package.json├── src│ ├── components│ │ └── app│ │ ├── App.js│ │ ├── spec.js│ │ ├── state.js│ │ └── styled.js│ ├── index.html│ ├── index.js│ └── store.js├── webpack.config.js└── yarn.lockCopyright & License
© 2017 - 2018 Uli Preuss, BSD-3-Clause
* Header from 'Build Yourself a Redux' by Justin Deal.