freshpack

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
• Installation
• Usage
• Commands
• Structure

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:

• ESLint
• Flow
• Jest
• Enzyme
• Sass
• Styled Components
• React Router
• Redux
• Mobx

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 freshpack

Usage

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 lint

Test

Available after usage with option --test

$ yarn test
$ yarn test:watch
$ yarn test:watch:all
$ yarn test:coverage

Available after usage with options --test and --lint (or --dev)

$ yarn test:all

Run flow status

Available after usage with option --flow

$ yarn flow

Run app in dev mode

$ yarn start

Structure

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

React + 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.lock

React + 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.lock

Copyright & License

© 2017 - 2018 Uli Preuss, BSD-3-Clause

* Header from 'Build Yourself a Redux' by Justin Deal.