Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/choonchernlim/front-end-stack
Starter kit for building single-page app using React, Redux, RxJS, Reselect, Material UI, Immer, Prettier and Webpack.
https://github.com/choonchernlim/front-end-stack
ecmascript2016 eslint flowtype immer javascript material-ui prettier react redux rxjs webpack yarn
Last synced: 3 months ago
JSON representation
Starter kit for building single-page app using React, Redux, RxJS, Reselect, Material UI, Immer, Prettier and Webpack.
- Host: GitHub
- URL: https://github.com/choonchernlim/front-end-stack
- Owner: choonchernlim
- License: mit
- Created: 2016-02-04T00:12:30.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:46:31.000Z (about 2 years ago)
- Last Synced: 2024-04-10T20:44:14.224Z (10 months ago)
- Topics: ecmascript2016, eslint, flowtype, immer, javascript, material-ui, prettier, react, redux, rxjs, webpack, yarn
- Language: JavaScript
- Homepage:
- Size: 9.51 MB
- Stars: 11
- Watchers: 1
- Forks: 4
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# front-end-stack
Starter kit for building single-page app using modern front-end stack.
## Getting Started
- Install the following tools:-
- [Node.js](https://github.com/creationix/nvm).
- [Yarn](https://yarnpkg.com/en/docs/install) because it is still much faster than NPM v5.
- In Chrome, install the following dev tool extensions:-
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- If you are using JetBrains products (ex: IntelliJ IDEA, WebStorm):-
- Install and configure [File Watcher](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher) to format code on save using Prettier.
- Enable "ESLint" in your IDE, which will pick up `.eslintrc` from the project and enforce it.
- Clone or download/unzip this project template.
- Run `yarn` to install dependencies.
- To start app development, run `yarn start`.
- This command will:-
- Start Webpack Dev Server.
- Open default browser.
- Open `https://localhost:8080`.
- When you modify the source code, the configured Hot Module Replacement will automatically refresh the browser content.
- Since HTTPS is used, Chrome will prompt warning regarding untrusted security certificate. To disable this check:-
- In Chrome, go to `chrome://flags/#allow-insecure-localhost`.
- Click "Enable".
- Click "Relaunch Now".
- To package for production, run `yarn build`.
- This script will clean the distribution directory and create minified bundle files.
- To package for production with a different context root than the one defined in `package.json`, run `CONTEXT_ROOT=/new-context-root yarn build`.
- To configure as Jenkins job, run `yarn ci`.
- This script will create test result and code coverage files.
## Commands
These commands are cross-platform compatible.
| Command | Description |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `yarn test` | Format code, static type check, lint src/test files and run entire tests |
| `yarn test <./path>` | Format code, static type check, lint src/test files and run only tests within `<./path>` |
| `yarn test:watch` | Watch for changes in all test files and rerun `yarn test` |
| `yarn test:watch <./path>` | Watch for changes in selected test files and rerun `yarn test <./path>` |
| `yarn build` | Build production bundle (compressed cache busting asset files) |
| `yarn ci` | Remove report dir, format code, static type check, lint src/test files, run tests, run code coverage and generate result files for CI |
| `yarn reinstall` | Remove `node_module` and install modules listed in `package.json` |
| `yarn start` | Start Node.js Express server with Hot Module Replacement |
| `yarn stats` | Create `stats.json` that be loaded to http://webpack.github.io/analyse/ to visualize build |
| `yarn flow` | Run Flow static type check |
| `yarn flow:restart` | Restart Flow server before running static type check |
| `yarn prettier` | Format code |
## Dependencies
| Dependency | Description |
| ---------------------- | ------------------------------------------------------------ |
| @material-ui/core | UI - Google's material design UI components built with React |
| @material-ui/icons | UI - Google Material icons |
| @material-ui/styles | UI - Style hooks |
| classnames | UI - Conditionally joining classNames together |
| connected-react-router | React - Router with Redux integration |
| date-fns | Parse, validate, manipulate and display dates |
| history | Managing browser history |
| immer | Handling immutable objects |
| prop-types | React - Runtime type checking for React props |
| react | React - Core |
| react-dom | React - DOM |
| react-redux | React - Redux integration |
| react-router-dom | React - Router |
| recompose | React - Useful utility function components and HOCs. |
| redux | Redux - Core |
| redux-observable | Redux - Side Effects middleware using RxJS' Observables |
| reselect | Memoized selector for React components |
| rxjs | Handling async actions |
| typeface-roboto | UI - Roboto font, adhering to Google Material Design spec |
## Dev Dependencies
| Dependency | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| @babel/cli | Babel - CLI commands |
| @babel/core | Babel - Core compiler |
| @babel/plugin-proposal-class-properties | Babel - https://babeljs.io/docs/en/babel-plugin-proposal-class-properties |
| @babel/plugin-proposal-export-default-from | Babel - https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from |
| @babel/polyfill | Babel - Emulate a full ES2015+ environment |
| @babel/preset-env | Babel - To use latest JavaScript |
| @babel/preset-flow | Babel - Flow preset |
| @babel/preset-react | Babel - React preset |
| @babel/register | Babel - Provide `require` hook |
| autoprefixer | Webpack - Add vendor prefixes in CSS |
| babel-eslint | Babel - For linting ES7 syntax... ex: `static` properties |
| babel-loader | Babel - Loader for transpiling |
| babel-plugin-istanbul | Babel - Istanbul instrumentation to ES6 code. Used in conjunction with `nyc`. |
| chai | Test - Expect lib |
| chai-as-promised | Test - Fluent approach to test promises |
| clean-webpack-plugin | Webpack - Clean output dir between builds |
| compression-webpack-plugin | Webpack - Generate GZip asset files |
| css-loader | Webpack - CSS loader |
| enzyme | Test - Testing utilities for React |
| enzyme-adapter-react-16 | Test - Enzyme adapter that targets React 16 |
| eslint | ESLint - For enforcing coding style |
| eslint-config-airbnb | ESLint - Using Airbnb's coding style |
| eslint-config-prettier | Prettier - Turns off unnecessary ESLint rules or might conflict with Prettier |
| eslint-loader | Webpack - ESLint loader |
| eslint-plugin-flowtype | ESLint - Flow type linting |
| eslint-plugin-import | ESLint - Linting of ES2015+ (ES6+) import/export syntax |
| eslint-plugin-jsx-a11y | ESLint - Static AST checker for accessibility rules on JSX elements |
| eslint-plugin-prettier | ESLint - Runs Prettier as an ESLint rule |
| eslint-plugin-react | ESLint - React specific linting rules |
| file-loader | Webpack - File loader |
| flow-bin | Flow - Static type checker for JavaScript |
| html-webpack-plugin | Webpack - Generates `index.html` using hash filenames for cache busting |
| husky | Git - Provides Git hooks to run Prettier |
| image-webpack-loader | Webpack - Image loader and handling compression |
| jsdom | Test - A JavaScript implementation of the WHATWG DOM and HTML standards |
| lint-staged | Git - Run Prettier on staged files |
| mini-css-extract-plugin | Webpack - Extract CSS into separate files |
| mocha | Test - JS test framework |
| mocha-junit-reporter | Test - Creating JUnit result file for Jenkins |
| nock | Test - HTTP mocking and expectations library |
| nodemon | Test - Monitor test files and rerun tests. Needed due to cross-platform test runner because `mocha --watch` doesn't produce run results when executed from `require('child_process').exec` |
| nyc | Test - Istanbul CLI for code coverage |
| postcss-loader | Webpack - Post CSS loader to run autoprefixer |
| prettier | Prettier - Opinionated code formatter |
| react-test-renderer | Test - Works in conjunction with Enzyme |
| rimraf | Util - `rm -rf` for both Unix and Windows world |
| sinon | Test - Standalone test spies, stubs and mocks |
| url-loader | Webpack - URL loader |
| webpack | Webpack - Core |
| webpack-cli | Webpack - CLI |
| webpack-dev-server | Webpack - Node.js Express server |
## Project Structure
```
.
├── dist -> Distribution dir - Production bundle, including index.html
│ └── ...
├── node_modules -> Installed modules dir
│ └── ...
├── reports -> Reports dir - Generated reports for Jenkins
│ └── ...
├── scripts -> Scripts dir - Cross-platform NPM scripts
│ └── ...
├── src -> Dir for actual source files and test files
│ └── ...
├── .babelrc -> Babel configuration
├── .editorconfig -> Coding style for different editors
├── .eslintignore -> ESLint ignore list
├── .eslintrc -> ESLint configuration
├── .flowconfig -> Flow configuration
├── .gitattributes -> Custom Git configuration
├── .gitignore -> Git ignore list
├── .huskyrc -> Husky configuration
├── .lintstagedrc -> Lint staged configuration
├── .nycrc -> Istanbul CLI configuration
├── .prettierignore -> Prettier ignore list
├── .prettierrc -> Prettier configuration
├── CHANGELOG.md -> Change logs
├── LICENSE.md -> License, if needed
├── package.json -> NPM scripts and dependencies
├── postcss.config.js -> To fix "No PostCSS Config found" error
├── README.md -> Readme file for the app
├── stats.json -> Generated file when running `yarn stats`
├── webpack.base.config.js -> Common Webpack config
├── webpack.config.js -> Production Webpack config
├── webpack.dev.config.js -> Development Webpack config
└── yarn.lock -> Dependency versions lock file used by Yarn
```
## Troubleshooting
### Error: dyld: Library not loaded
When running `yarn start`, you get this error...
```
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
Referenced from: /path/to/front-end-stack/node_modules/mozjpeg/vendor/cjpeg
Reason: image not found
```
To fix it, run `brew install libpng` ... [see here for more info](https://github.com/tcoopman/image-webpack-loader/issues/51)