1 | # freshpack
|
2 |
|
3 | [![npm](https://img.shields.io/npm/v/freshpack.svg)](https://www.npmjs.com/package/freshpack) [![Build Status](https://travis-ci.org/freshpack/freshpack.svg?branch=master)](https://travis-ci.org/freshpack/freshpack) ![dependencies](https://img.shields.io/david/freshpack/freshpack.svg) ![issues](https://img.shields.io/github/issues-raw/freshpack/freshpack.svg) ![BSD Licensed](https://img.shields.io/badge/license-MIT-blue.svg)
|
4 |
|
5 | ### Wire Things up the Automatic Way*
|
6 |
|
7 | Command line tool for a quick development start of React apps. freshpack creates minimal boilerplates and installs **latest versions** of all required dependencies.
|
8 |
|
9 | ## Table of Contents
|
10 | * [**About**](#about)
|
11 | * [**Installation**](#installation)
|
12 | * [**Usage**](#usage)
|
13 | * [**Commands**](#commands)
|
14 | * [**Structure**](#structure)
|
15 |
|
16 | ## About
|
17 | [Create-react-app](https://github.com/facebookincubator/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.
|
18 |
|
19 | In contrast, freshpack works _à-la-carte_ and provides options for commonly used tools:
|
20 |
|
21 | * [ESLint](http://eslint.org/)
|
22 | * [Flow](https://flow.org/)
|
23 | * [Jest](https://facebook.github.io/jest/)
|
24 | * [Enzyme](http://airbnb.io/enzyme/)
|
25 | * [Sass](http://sass-lang.com/)
|
26 | * [Styled Components](https://www.styled-components.com/)
|
27 | * [React Router](https://reacttraining.com/react-router/)
|
28 | * [Redux](http://redux.js.org/)
|
29 | * [Mobx](https://mobx.js.org/)
|
30 |
|
31 | Includes all required dependencies, configuration files, minimal sample applications and original tool commands in the scripts section of package.json (instead of react-scripts).
|
32 |
|
33 | 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](https://webpack.js.org/) updates. [rollup](https://rollupjs.org/guide/en) and other tools affect the development of webpack (tree shaking, inlining, options instead of configuration files, ..) and so the wheel spins on and on.
|
34 |
|
35 | 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.**
|
36 |
|
37 | >If you get an error after generating an react app with freshpack, please report an issue on the github page!
|
38 |
|
39 |
|
40 | ## Installation
|
41 | Node v10.16.0 or later and Yarn are required
|
42 |
|
43 | **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+)
|
44 |
|
45 | ```bash
|
46 | $ yarn global add freshpack
|
47 | ```
|
48 |
|
49 | ## Usage
|
50 |
|
51 | ### Basic features
|
52 | ```bash
|
53 | $ freshpack <project-directory>
|
54 | ```
|
55 | * Generates a minimal React app skeleton ('Hello World')
|
56 | * Generates webpack configuration file
|
57 | * Generates babel configuration file
|
58 | * Generates editor configuration file (.editorConfig)
|
59 | * Generates package.json file
|
60 | * Adds start script for development ('yarn start')
|
61 | * Retrieves the last version numbers of all necessary dependencies and saved them in package.json file.
|
62 | * Enables hot reloading
|
63 | * Displays info when new freshpack version available
|
64 |
|
65 | ### Option `install`
|
66 | ```bash
|
67 | $ freshpack <project-directory> [--install, -i]
|
68 | ```
|
69 | * Installs dependencies automatically (yarn install)
|
70 |
|
71 | ### Option `quiet`
|
72 | ```bash
|
73 | $ freshpack <project-directory> [--quiet, -q]
|
74 | ```
|
75 | * Disable verbose logging
|
76 |
|
77 | ### Option `router`
|
78 | ```bash
|
79 | $ freshpack <project-directory> [--router, -o]
|
80 | ```
|
81 | * Generates skeleton with router example ('Navigation')
|
82 | * Installs all required 'router' dependencies
|
83 | * Adds router tests
|
84 |
|
85 | ### Option `redux`
|
86 | ```bash
|
87 | $ freshpack <project-directory> [--redux, -r]
|
88 | ```
|
89 | * Generates skeleton with redux example ('Counter')
|
90 | * Installs all required 'redux' dependencies
|
91 | * Adds redux tests
|
92 |
|
93 | ### Option `mobx`
|
94 | ```bash
|
95 | $ freshpack <project-directory> [--mobx, -m]
|
96 | ```
|
97 | * Generates skeleton with mobx example ('Counter')
|
98 | * Installs all required 'mobx' dependencies
|
99 | * Adds mobx dev tools to index file
|
100 |
|
101 | ### Option `sass`
|
102 | ```bash
|
103 | $ freshpack <project-directory> [--sass, -a]
|
104 | ```
|
105 | * Generates skeleton with example 'App.sass' file (instead of css)
|
106 | * Installs all required 'sass' dependencies
|
107 | * Adds 'sass-loader' to webpack configuration
|
108 |
|
109 | ### Option `lint`
|
110 | ```bash
|
111 | $ freshpack <project-directory> [--lint, -l]
|
112 | ```
|
113 | * Generates 'eslint' configuration (.eslintrc.yaml)
|
114 | * Adds lint script ('yarn lint')
|
115 | * Installs all required 'eslint' dependencies
|
116 | * Installs 'airbnb code style' configuration
|
117 |
|
118 | ### Option `test`
|
119 | ```bash
|
120 | $ freshpack <project-directory> [--test, -t]
|
121 | ```
|
122 | * Generates example 'App.spec.js' file
|
123 | * Generates 'jest' configuration (.jestrc)
|
124 | * Adds test script ('yarn test')
|
125 | * Installs all required 'jest' and 'enzyme' dependencies
|
126 |
|
127 | ### Option `flow`
|
128 | ```bash
|
129 | $ freshpack <project-directory> [--flow, -f]
|
130 | ```
|
131 | * Generates skeleton with 'flow' example(s)
|
132 | * Installs all required 'flow' dependencies
|
133 | * Adds 'flow-typed' files
|
134 | * Adds Visual Studio Code settings file
|
135 |
|
136 | ### Option `styled`
|
137 | ```bash
|
138 | $ freshpack <project-directory> [--styled, -y]
|
139 | ```
|
140 | * Generates skeleton with 'styled-components' example(s)
|
141 | * Installs required 'styled-components' dependency
|
142 | * Adds 'styled-components' files
|
143 |
|
144 | ### Option `dev`
|
145 | ```bash
|
146 | $ freshpack <project-directory> [--dev, -d]
|
147 | # .. shorthand for
|
148 | $ freshpack <project-directory> --flow --lint --test
|
149 | ```
|
150 | * Combine all dev options
|
151 |
|
152 | ## Commands
|
153 |
|
154 | ### Lint
|
155 | Available after usage with option --lint
|
156 | ```bash
|
157 | $ yarn lint
|
158 | ```
|
159 |
|
160 | ### Test
|
161 | Available after usage with option --test
|
162 | ```bash
|
163 | $ yarn test
|
164 | $ yarn test:watch
|
165 | $ yarn test:watch:all
|
166 | $ yarn test:coverage
|
167 | ```
|
168 |
|
169 | Available after usage with options --test and --lint (or --dev)
|
170 |
|
171 | ```bash
|
172 | $ yarn test:all
|
173 | ```
|
174 |
|
175 | ### Run flow status
|
176 | Available after usage with option --flow
|
177 | ```bash
|
178 | $ yarn flow
|
179 | ```
|
180 |
|
181 | ### Run app in dev mode
|
182 | ```bash
|
183 | $ yarn start
|
184 | ```
|
185 |
|
186 | ## Structure
|
187 |
|
188 | Here are some **examples** of the generated boilerplate file systems, which differ from each other according to selected options.
|
189 |
|
190 | 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.
|
191 |
|
192 | 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.
|
193 |
|
194 | This structure is, of course, a matter of taste as well as the application case and easy to change in the generated boilerplate.
|
195 |
|
196 | ### Minimal React Skeleton
|
197 | ```bash
|
198 | $ freshpack <project-directory>
|
199 |
|
200 | ├── .babelrc
|
201 | ├── .editorconfig
|
202 | ├── package.json
|
203 | ├── src
|
204 | │ ├── components
|
205 | │ │ └── app
|
206 | │ │ ├── App.js
|
207 | │ │ └── style.css
|
208 | │ ├── index.html
|
209 | │ └── index.js
|
210 | ├── webpack.config.js
|
211 | └── yarn.lock
|
212 | ```
|
213 |
|
214 | ### React + Flow + ESLint + Test + Redux + Sass
|
215 | ```bash
|
216 | $ freshpack <project-directory> -dra
|
217 |
|
218 | ├── .babelrc
|
219 | ├── .editorconfig
|
220 | ├── .eslintrc.yml
|
221 | ├── .flowConfig
|
222 | ├── .mocks
|
223 | │ └── empty-module.js
|
224 | ├── .vscode
|
225 | │ └── settings.json
|
226 | ├── flow-typed
|
227 | │ ├── prop-types.js
|
228 | │ ├── react-redux.js
|
229 | │ └── redux.js
|
230 | ├── package.json
|
231 | ├── src
|
232 | │ ├── components
|
233 | │ │ └── app
|
234 | │ │ ├── App.js
|
235 | │ │ ├── spec.js
|
236 | │ │ ├── state.js
|
237 | │ │ └── style.scss
|
238 | │ ├── index.html
|
239 | │ ├── index.js
|
240 | │ └── store.js
|
241 | ├── webpack.config.js
|
242 | └── yarn.lock
|
243 | ```
|
244 | ### React + Flow + ESLint + Test + Redux + Styled Components
|
245 |
|
246 | ```bash
|
247 | $ freshpack <project-directory> -dry
|
248 |
|
249 | ├── .babelrc
|
250 | ├── .editorconfig
|
251 | ├── .eslintrc.yml
|
252 | ├── .flowConfig
|
253 | ├── .vscode
|
254 | │ └── settings.json
|
255 | ├── flow-typed
|
256 | │ ├── prop-types.js
|
257 | │ ├── react-redux.js
|
258 | │ ├── redux.js
|
259 | │ └── styled-components.js
|
260 | ├── package.json
|
261 | ├── src
|
262 | │ ├── components
|
263 | │ │ └── app
|
264 | │ │ ├── App.js
|
265 | │ │ ├── spec.js
|
266 | │ │ ├── state.js
|
267 | │ │ └── styled.js
|
268 | │ ├── index.html
|
269 | │ ├── index.js
|
270 | │ └── store.js
|
271 | ├── webpack.config.js
|
272 | └── yarn.lock
|
273 | ```
|
274 |
|
275 | ## Copyright & License
|
276 | © 2017 - 2018 Uli Preuss, BSD-3-Clause
|
277 |
|
278 | \* Header from '[Build Yourself a Redux](https://zapier.com/engineering/how-to-build-redux/)' by Justin Deal.
|