Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
freshpack
Advanced tools
Readme
Command line tool for a quick development start of React apps. freshpack creates minimal boilerplates and installs latest versions of all required dependencies.
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!
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
$ freshpack <project-directory>
install
$ freshpack <project-directory> [--install, -i]
quiet
$ freshpack <project-directory> [--quiet, -q]
router
$ freshpack <project-directory> [--router, -o]
redux
$ freshpack <project-directory> [--redux, -r]
mobx
$ freshpack <project-directory> [--mobx, -m]
sass
$ freshpack <project-directory> [--sass, -a]
lint
$ freshpack <project-directory> [--lint, -l]
test
$ freshpack <project-directory> [--test, -t]
flow
$ freshpack <project-directory> [--flow, -f]
styled
$ freshpack <project-directory> [--styled, -y]
dev
$ freshpack <project-directory> [--dev, -d]
# .. shorthand for
$ freshpack <project-directory> --flow --lint --test
Available after usage with option --lint
$ yarn lint
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
Available after usage with option --flow
$ yarn flow
$ yarn start
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.
$ freshpack <project-directory>
├── .babelrc
├── .editorconfig
├── package.json
├── src
│ ├── components
│ │ └── app
│ │ ├── App.js
│ │ └── style.css
│ ├── index.html
│ └── index.js
├── webpack.config.js
└── yarn.lock
$ 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
$ 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
© 2017 - 2018 Uli Preuss, BSD-3-Clause
* Header from 'Build Yourself a Redux' by Justin Deal.
FAQs
Command line scaffolding tool for react apps
The npm package freshpack receives a total of 117 weekly downloads. As such, freshpack popularity was classified as not popular.
We found that freshpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.