Skip to content

Latest commit

 

History

History
196 lines (166 loc) · 20.7 KB

README.md

File metadata and controls

196 lines (166 loc) · 20.7 KB
Raw

front-end-stack

Starter kit for building single-page app using modern front-end stack.

Getting Started

  • Install the following tools:-

    • Node.js.
    • Yarn because it is still much faster than NPM v5.

  • In Chrome, install the following dev tool extensions:-

  • If you are using JetBrains products (ex: IntelliJ IDEA, WebStorm):-

    • Install and configure 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