{"id":18378376,"url":"https://github.com/choonchernlim/front-end-stack","last_synced_at":"2025-04-06T22:32:18.578Z","repository":{"id":3829812,"uuid":"51040402","full_name":"choonchernlim/front-end-stack","owner":"choonchernlim","description":"Starter kit for building single-page app using React, Redux, RxJS, Reselect, Material UI, Immer, Prettier and Webpack.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:46:31.000Z","size":9974,"stargazers_count":11,"open_issues_count":27,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T07:42:47.121Z","etag":null,"topics":["ecmascript2016","eslint","flowtype","immer","javascript","material-ui","prettier","react","redux","rxjs","webpack","yarn"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/choonchernlim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-04T00:12:30.000Z","updated_at":"2020-09-07T21:39:12.000Z","dependencies_parsed_at":"2023-01-11T16:33:30.373Z","dependency_job_id":null,"html_url":"https://github.com/choonchernlim/front-end-stack","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choonchernlim%2Ffront-end-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choonchernlim%2Ffront-end-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choonchernlim%2Ffront-end-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choonchernlim%2Ffront-end-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/choonchernlim","download_url":"https://codeload.github.com/choonchernlim/front-end-stack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563901,"owners_count":20958971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecmascript2016","eslint","flowtype","immer","javascript","material-ui","prettier","react","redux","rxjs","webpack","yarn"],"created_at":"2024-11-06T00:33:21.265Z","updated_at":"2025-04-06T22:32:18.051Z","avatar_url":"https://github.com/choonchernlim.png","language":"JavaScript","readme":"# front-end-stack\n\nStarter kit for building single-page app using modern front-end stack.\n\n## Getting Started\n\n- Install the following tools:-\n\n - [Node.js](https://github.com/creationix/nvm).\n - [Yarn](https://yarnpkg.com/en/docs/install) because it is still much faster than NPM v5.\n\n- In Chrome, install the following dev tool extensions:-\n\n - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\n - [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)\n\n- If you are using JetBrains products (ex: IntelliJ IDEA, WebStorm):-\n\n - 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.\n - Enable \"ESLint\" in your IDE, which will pick up `.eslintrc` from the project and enforce it.\n\n- Clone or download/unzip this project template.\n\n- Run `yarn` to install dependencies.\n\n- To start app development, run `yarn start`.\n\n - This command will:-\n - Start Webpack Dev Server.\n - Open default browser.\n - Open `https://localhost:8080`.\n - When you modify the source code, the configured Hot Module Replacement will automatically refresh the browser content.\n - Since HTTPS is used, Chrome will prompt warning regarding untrusted security certificate. To disable this check:-\n - In Chrome, go to `chrome://flags/#allow-insecure-localhost`.\n - Click \"Enable\".\n - Click \"Relaunch Now\".\n\n- To package for production, run `yarn build`.\n\n - This script will clean the distribution directory and create minified bundle files.\n\n- To package for production with a different context root than the one defined in `package.json`, run `CONTEXT_ROOT=/new-context-root yarn build`.\n\n- To configure as Jenkins job, run `yarn ci`.\n - This script will create test result and code coverage files.\n\n## Commands\n\nThese commands are cross-platform compatible.\n\n| Command | Description |\n| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| `yarn test` | Format code, static type check, lint src/test files and run entire tests |\n| `yarn test \u003c./path\u003e` | Format code, static type check, lint src/test files and run only tests within `\u003c./path\u003e` |\n| `yarn test:watch` | Watch for changes in all test files and rerun `yarn test` |\n| `yarn test:watch \u003c./path\u003e` | Watch for changes in selected test files and rerun `yarn test \u003c./path\u003e` |\n| `yarn build` | Build production bundle (compressed cache busting asset files) |\n| `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 |\n| `yarn reinstall` | Remove `node_module` and install modules listed in `package.json` |\n| `yarn start` | Start Node.js Express server with Hot Module Replacement |\n| `yarn stats` | Create `stats.json` that be loaded to http://webpack.github.io/analyse/ to visualize build |\n| `yarn flow` | Run Flow static type check |\n| `yarn flow:restart` | Restart Flow server before running static type check |\n| `yarn prettier` | Format code |\n\n## Dependencies\n\n| Dependency | Description |\n| ---------------------- | ------------------------------------------------------------ |\n| @material-ui/core | UI - Google's material design UI components built with React |\n| @material-ui/icons | UI - Google Material icons |\n| @material-ui/styles | UI - Style hooks |\n| classnames | UI - Conditionally joining classNames together |\n| connected-react-router | React - Router with Redux integration |\n| date-fns | Parse, validate, manipulate and display dates |\n| history | Managing browser history |\n| immer | Handling immutable objects |\n| prop-types | React - Runtime type checking for React props |\n| react | React - Core |\n| react-dom | React - DOM |\n| react-redux | React - Redux integration |\n| react-router-dom | React - Router |\n| recompose | React - Useful utility function components and HOCs. |\n| redux | Redux - Core |\n| redux-observable | Redux - Side Effects middleware using RxJS' Observables |\n| reselect | Memoized selector for React components |\n| rxjs | Handling async actions |\n| typeface-roboto | UI - Roboto font, adhering to Google Material Design spec |\n\n## Dev Dependencies\n\n| Dependency | Description |\n| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| @babel/cli | Babel - CLI commands |\n| @babel/core | Babel - Core compiler |\n| @babel/plugin-proposal-class-properties | Babel - https://babeljs.io/docs/en/babel-plugin-proposal-class-properties |\n| @babel/plugin-proposal-export-default-from | Babel - https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from |\n| @babel/polyfill | Babel - Emulate a full ES2015+ environment |\n| @babel/preset-env | Babel - To use latest JavaScript |\n| @babel/preset-flow | Babel - Flow preset |\n| @babel/preset-react | Babel - React preset |\n| @babel/register | Babel - Provide `require` hook |\n| autoprefixer | Webpack - Add vendor prefixes in CSS |\n| babel-eslint | Babel - For linting ES7 syntax... ex: `static` properties |\n| babel-loader | Babel - Loader for transpiling |\n| babel-plugin-istanbul | Babel - Istanbul instrumentation to ES6 code. Used in conjunction with `nyc`. |\n| chai | Test - Expect lib |\n| chai-as-promised | Test - Fluent approach to test promises |\n| clean-webpack-plugin | Webpack - Clean output dir between builds |\n| compression-webpack-plugin | Webpack - Generate GZip asset files |\n| css-loader | Webpack - CSS loader |\n| enzyme | Test - Testing utilities for React |\n| enzyme-adapter-react-16 | Test - Enzyme adapter that targets React 16 |\n| eslint | ESLint - For enforcing coding style |\n| eslint-config-airbnb | ESLint - Using Airbnb's coding style |\n| eslint-config-prettier | Prettier - Turns off unnecessary ESLint rules or might conflict with Prettier |\n| eslint-loader | Webpack - ESLint loader |\n| eslint-plugin-flowtype | ESLint - Flow type linting |\n| eslint-plugin-import | ESLint - Linting of ES2015+ (ES6+) import/export syntax |\n| eslint-plugin-jsx-a11y | ESLint - Static AST checker for accessibility rules on JSX elements |\n| eslint-plugin-prettier | ESLint - Runs Prettier as an ESLint rule |\n| eslint-plugin-react | ESLint - React specific linting rules |\n| file-loader | Webpack - File loader |\n| flow-bin | Flow - Static type checker for JavaScript |\n| html-webpack-plugin | Webpack - Generates `index.html` using hash filenames for cache busting |\n| husky | Git - Provides Git hooks to run Prettier |\n| image-webpack-loader | Webpack - Image loader and handling compression |\n| jsdom | Test - A JavaScript implementation of the WHATWG DOM and HTML standards |\n| lint-staged | Git - Run Prettier on staged files |\n| mini-css-extract-plugin | Webpack - Extract CSS into separate files |\n| mocha | Test - JS test framework |\n| mocha-junit-reporter | Test - Creating JUnit result file for Jenkins |\n| nock | Test - HTTP mocking and expectations library |\n| 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` |\n| nyc | Test - Istanbul CLI for code coverage |\n| postcss-loader | Webpack - Post CSS loader to run autoprefixer |\n| prettier | Prettier - Opinionated code formatter |\n| react-test-renderer | Test - Works in conjunction with Enzyme |\n| rimraf | Util - `rm -rf` for both Unix and Windows world |\n| sinon | Test - Standalone test spies, stubs and mocks |\n| url-loader | Webpack - URL loader |\n| webpack | Webpack - Core |\n| webpack-cli | Webpack - CLI |\n| webpack-dev-server | Webpack - Node.js Express server |\n\n## Project Structure\n\n```\n.\n├── dist -\u003e Distribution dir - Production bundle, including index.html\n│   └── ...\n├── node_modules -\u003e Installed modules dir\n│   └── ...\n├── reports -\u003e Reports dir - Generated reports for Jenkins\n│   └── ...\n├── scripts -\u003e Scripts dir - Cross-platform NPM scripts\n│   └── ...\n├── src -\u003e Dir for actual source files and test files\n│   └── ...\n├── .babelrc -\u003e Babel configuration\n├── .editorconfig -\u003e Coding style for different editors\n├── .eslintignore -\u003e ESLint ignore list\n├── .eslintrc -\u003e ESLint configuration\n├── .flowconfig -\u003e Flow configuration\n├── .gitattributes -\u003e Custom Git configuration\n├── .gitignore -\u003e Git ignore list\n├── .huskyrc -\u003e Husky configuration\n├── .lintstagedrc -\u003e Lint staged configuration\n├── .nycrc -\u003e Istanbul CLI configuration\n├── .prettierignore -\u003e Prettier ignore list\n├── .prettierrc -\u003e Prettier configuration\n├── CHANGELOG.md -\u003e Change logs\n├── LICENSE.md -\u003e License, if needed\n├── package.json -\u003e NPM scripts and dependencies\n├── postcss.config.js -\u003e To fix \"No PostCSS Config found\" error\n├── README.md -\u003e Readme file for the app\n├── stats.json -\u003e Generated file when running `yarn stats`\n├── webpack.base.config.js -\u003e Common Webpack config\n├── webpack.config.js -\u003e Production Webpack config\n├── webpack.dev.config.js -\u003e Development Webpack config\n└── yarn.lock -\u003e Dependency versions lock file used by Yarn\n```\n\n## Troubleshooting\n\n### Error: dyld: Library not loaded\n\nWhen running `yarn start`, you get this error...\n\n```\nModule build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib\n Referenced from: /path/to/front-end-stack/node_modules/mozjpeg/vendor/cjpeg\n Reason: image not found\n```\n\nTo fix it, run `brew install libpng` ... [see here for more info](https://github.com/tcoopman/image-webpack-loader/issues/51)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoonchernlim%2Ffront-end-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchoonchernlim%2Ffront-end-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoonchernlim%2Ffront-end-stack/lists"}