Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.


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 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


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 -
@babel/plugin-proposal-export-default-from Babel -
@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
├──                -> Change logs
├──                  -> License, if needed
├── package.json                -> NPM scripts and dependencies
├── postcss.config.js           -> To fix "No PostCSS Config found" error
├──                   -> 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
├──       -> Development Webpack config
└── yarn.lock                   -> Dependency versions lock file used by Yarn


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


Starter kit for building single-page app using React, Redux, RxJS, Reselect, Material UI, Immer, Prettier and Webpack.





No packages published