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

  • React Developer Tools
  • Redux DevTools

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

Dependencies

Dev Dependencies

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