Includes only the latest and greatest web technologies (dependencies updated at 15 June 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
- Using plain ES2015/16/17. Minimizing use of experimental Stage-X javascript features. Only stage-3/4 features are supported, because they're relatively stable
- Using tests (by jest, example)
- Using linting (by airbnb eslint config)
- Using git pre-push hook to force run tests and linting before push
- Using visual analyzing tools for inspecting the bundle to always control its content and size
- Education
- Small pet projects/prototypes
- Production
If you don't need some library then just don't use it. Its source code will NOT be included in the final bundle
| Name | Library Type | Original Description | Example Config | Notes |
|---|---|---|---|---|
| react | View layer | A javascript library for building user interfaces | ||
| react-router | Routing | Declarative routing for React | ||
| redux | Data management | Predictable state container for JavaScript apps | ||
| react-redux | Data management | Official React bindings for Redux | ||
| redux-thunk | Data management | Thunk middleware for Redux | ||
| redux-saga | Data management | An alternative side effect model for Redux apps | An alternative to redux-thunk. You need to import "regenerator-runtime/runtime"; for using generators/yield |
|
| redux-logger | Utils | Logger for Redux | ||
| jest | Test framework | Painless JavaScript Testing | ||
| webpack 2 | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | webpack.config.js | Loaders: babel-loader, eslint-loader, sass-loader |
| webpack-bundle-analyzer | Build/Bundler | Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap | ||
| babel | Transpiler | ES2015/2016/2017 support | .babelrc | Plugins: transform-object-rest-spread (spreads are currently at STAGE 3) |
| eslint | Linter | The pluggable linting utility for JavaScript and JSX | .eslintrc.js | |
| sass | CSS Preprocessor | CSS with superpowers | ||
| isomorphic-fetch | Polyfill | Isomorphic WHATWG Fetch API, for Node & Browserify | whatwg-fetch from GitHub on client, node-fetch on server | |
| yarn | Package management | Fast, reliable, and secure dependency management |
-
install dependencies with:
yarn -
run in development mode (watch changes in the files and refresh your browser automatically):
yarn start(then go http://localhost:8080/ and you should see this) -
would like to publish the project as a website? Then make a distribution build by generating static files:
yarn dist(then go todistfolder) -
would like to see analytics for the bundle?:
yarn dist:analyze -
run tests:
yarn test -
run linting:
yarn lint
If you have problems with running it please file an issue or contact me on Facebook. Thanks!
- examples/react - trivial hello world using React
- examples/redux/one-file - the simplest redux example, all in one file (for fast prototyping)
- examples/redux/separate-files - counter example with
reduxandredux-saga