{"id":16500192,"url":"https://github.com/toomuchdesign/react-lemon-starter","last_synced_at":"2026-04-15T13:31:32.577Z","repository":{"id":66163112,"uuid":"90865312","full_name":"toomuchdesign/react-lemon-starter","owner":"toomuchdesign","description":"Lemon flavoured 🍋 ReactJS starter kit.","archived":false,"fork":false,"pushed_at":"2022-10-07T06:00:14.000Z","size":979,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T19:47:42.266Z","etag":null,"topics":["boilerplate","ducks","react","react-boilerplate","redux","starter-kit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toomuchdesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-10T13:06:32.000Z","updated_at":"2023-03-04T06:12:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"dc4131fe-6184-4dde-bd8f-33d2e10fb895","html_url":"https://github.com/toomuchdesign/react-lemon-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/toomuchdesign/react-lemon-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-lemon-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-lemon-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-lemon-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-lemon-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toomuchdesign","download_url":"https://codeload.github.com/toomuchdesign/react-lemon-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-lemon-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842847,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["boilerplate","ducks","react","react-boilerplate","redux","starter-kit"],"created_at":"2024-10-11T14:56:14.005Z","updated_at":"2026-04-15T13:31:32.560Z","avatar_url":"https://github.com/toomuchdesign.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React lemon starter 🍋\n\nA personal collection of React bad/best practices.\n\n```\n                       .-.\n                      /  .\\\n                    .' .  .'.\n                 .-'. .    . '-._\n               .' ..    . . . .  '.\n              /. .    .        .  .\\\n             / .  . .     . .. . .  \\\n            |. .  .      .. . . ...  |\n            / . .     .       .  .  .\\\n           | . . ._______ .. . .  . ..|\n           |   . / react \\ .   . .  . |\n           |. . {  lemon  }. ..   . ..|\n           |.  . \\starter_/.     .   ..|\n           | .  .          . . . . .  |\n           |. .     .    .. .   .   ..|\n            \\  . .        .  . .  . . /\n            |  .  .      .  .  . . . |\n             \\. .     .  . .  .. . .'\n              \\  ..      .. .   . /\n               ':_ .  .  . ... _.'\n                  '-.. . .  .-'\n                      '._..'\n\nhttp://ascii.co.uk/art/lemon\n\n```\n\n## Set up the project for the first time\n\nReact lemon starter requires [NodeJS](https://nodejs.org) and [NPM](https://www.npmjs.com) installed on your machine.\n\n### If setting up the project on a server\n```sh\n# Automatically install NPM dependencies (in production mode)\nnpm run setup\n```\n\n### If your are a developer\n```sh\n# Use NPM install/update methods\nnpm update \u0026\u0026 npm install\n```\n\n## Run the project\nCurrently you can choose between:\n\n- **building** the application with `npm run build`\n- **serving** it in browser and watch for changes with `npm run serve` or `npm run serve:build`\n- **build some nice webpack statistics** with `npm run stats:serve`. [Read more here](https://github.com/th0r/webpack-bundle-analyzer).\n\nBoth `build` and `serve` command accept an optional `-- --env.extractcss` argument which enables **CSS extraction into a real file**.\n\n### Environment variables\n\n**Before firing any build/serve task**, you have to **choose which environment** you're going to deploy.\n\n**Environment variables** are loaded into global **process.env** from **.env** file by [webpack-dotenv-plugin](https://www.npmjs.com/package/webpack-dotenv-plugin) webpack plugin.\n\nAn **.env** file can be automatically generated by one of the following NPM tasks:\n```sh\nnpm run dev\nnpm run prod\n```\n\nThe project might need to change/add some environment variable. You can easily do so by editing `generate-envfile.js` file.\n\n### A note about NODE_ENV var\n**NODE_ENV** var is an environment variable which usually has special meanings inside plugins/libraries.\n\nThis is why **NODE_ENV** is directly set into webpack configuration.\n\n- **webpack.config.local:** NODE_ENV = development\n- **webpack.config.publish:** NODE_ENV = production\n\n### Dev server with custom url\nIf you need the dev server to serve the project on a custom url (eg. `www.lemon.loc`), do the following:\n- Set `customLocalHost` variable to `www.lemon.loc` in `src/tools/webpack/webpack.config.server`\n- Edit your host file and map your `localhost` to `lemon.loc`.\n\n## Tests\n**Unit tests** currently relies on:\n- [Jest](https://facebook.github.io/jest)\n- [Enzyme](https://github.com/airbnb/enzyme)\n- [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n### A note about testing components by string comparison\nSometimes, the strategy of transforming a component output into a string and comparing it with another expected string can produce unexpected failures:\n\n- The component has a dynamic **\"key\" attribute** which expected component string is not able to reproduce\n\n- The component has **child components** to which it passes **functions as properties**. Even if these functions are mocked into expected component, **Jests**'s **.toEqual()** will trigger an equality check between the functions, and it will fail\n\nWhen the an easy string comparison fails, **actual** and **expected** component strings are with **react-element-to-jsx-string** and only then compared.\n\n### Some references about testing React\n- https://blog.algolia.com/how-we-unit-test-react-components-using-expect-jsx/\n- https://github.com/airbnb/enzyme\n- https://github.com/MoOx/phenomic/blob/0.19.5/src/components/Link/__tests__/index.js\n- http://redux.js.org/docs/recipes/WritingTests.html\n- https://github.com/kentcdodds/react-jest-workshop\n- https://github.com/kentcdodds/react-jest-workshop/blob/master/exercises-final/components/Toggle.test.js\n\n## Code checking/linting\n\n### Code style checking: Eslint + AirBnb styleguide\n**Code style linting** relies on **[Eslint](http://eslint.org/)** + **[AirBnb JS styleguide](https://github.com/airbnb/javascript)**.\n\nIn order to run Eslint on the project use `npm run lint` command.\n\n#### Integrate Eslint into Atom editor\nInstall Atom's [linter-eslint](https://atom.io/packages/linter-eslint) package to have dynamic code linting. If using another IDE please find its **Eslint extension**.\n\nIf AirBnb/eslint configuration casts stupid errors, try to install AirBnb-related packages with the following node commands. [Read more here](https://github.com/airbnb/javascript/blob/eslint-config-airbnb-base-v10.0.1/packages/eslint-config-airbnb/README.md#eslint-config-airbnb-1).\n\n```\n(\n  export PKG=eslint-config-airbnb;\n  npm info \"$PKG@latest\" peerDependencies --json | command sed 's/[\\{\\},]//g ; s/: /@/g' | xargs npm install --save-dev \"$PKG@latest\"\n)\n```\n\n### Code style consistency: .editorconfig\n[**EditorConfig**](http://editorconfig.org/#download) helps your IDE to stick to project styleguide. It just automatically applies the rules specified in **.editorconfig** to your IDE.\n\nPlease install the [.editorconfig extension](http://editorconfig.org/#download) on your favourite IDE.\n\n### Type checking: Flow\nThe project includes [Flow](https://flowtype.org/) as a dev dependency. Flow is a JS **static type checker** in part similar to Microsoft's Typescript.\n\n**Flow** is installed as a node module and it runs with `npm run flow` command. Only files starting with `// @flow` comment notation will be parsed.\n\n#### Integrate Flow into Atom editor.\n- Install [linter-flow](https://atom.io/packages/linter-flow) package\n- Set **linter-flow** `executablePath` configuration to `./node_modules/.bin/flow`.\n\n## Dev tools\nThe application is ready to nicely interact with:\n- [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)\n- [React devtools](https://github.com/facebook/react-devtools)\n\nInstall them on your browser (completely optional).\n\n### Hot modules replacement\n**[React's Hot loader](https://gaearon.github.io/react-hot-loader/)** is kept separated from production environment (please note that It's a dev dependency) by requiring it just in a dedicated application entrypoint (index.local.jsx) which is used only in development mode.\n\n## Project structure\nCurrently the project is organized by grouping files **by feature**: all files related to one feature are inside the same folder.\n\n### Some hints on how to structure the project:\n- https://medium.com/front-end-hacking/structuring-react-and-redux-applications-255361d24f84#.hr6guf7jv\n- Ducks: https://github.com/erikras/ducks-modular-redux\n- https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be#.t3y698fgl\n\n## Useful libraries\n\n### Portals/gateways\n- [react-gateway](https://www.npmjs.com/package/react-gateway)\n- [react-outlet](https://www.npmjs.com/package/react-outlet)\n- [react-warp-portal](https://www.npmjs.com/package/react-warp-portal)\n\n### Layout grids (CSS only)\n- [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid)\n- [radium-grid](https://github.com/formidablelabs/radium-grid/)\n\n### Layout grids (Dynamic resize on Runtime)\n- [reflexbox](https://github.com/jxnblk/reflexbox/)\n- [react-responsive](https://github.com/contra/react-responsive)\n- [react-responsive-grid](https://github.com/KyleAMathews/react-responsive-grid)\n\n## Todo's\n- Switch to custom dev server? [See here](https://github.com/gaearon/react-hot-loader/tree/master/docs#starter-kits)\n- [use-named-routes](https://github.com/taion/use-named-routes) module is unmantained. Consider to move to react-router 4\n- Setup [Lodash babel plugin](https://github.com/lodash/babel-plugin-lodash)\n- Setup [Webpack optimise-js plugin](https://github.com/vigneshshanmugam/optimize-js-plugin)\n- Setup Webpack splitting points when switched to `react-router 4` or when [this](https://github.com/gaearon/react-hot-loader/issues/249#issuecomment-212005628) or [this](https://github.com/gaearon/react-hot-loader/issues/288) get fixed.\n- Update [postcss-smart-import](https://github.com/sebastian-software/postcss-smart-import) when switched to node \u003e 6\n- Remove `eslint-disable react/no-unused-prop-types` from the codebase when [this](https://github.com/yannickcr/eslint-plugin-react/issues/811) is fixed.\n- Setup Flow\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoomuchdesign%2Freact-lemon-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoomuchdesign%2Freact-lemon-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoomuchdesign%2Freact-lemon-starter/lists"}