{"id":17770046,"url":"https://github.com/jonidelv/generator-create-redux-app","last_synced_at":"2025-04-13T03:09:55.415Z","repository":{"id":18804086,"uuid":"83929869","full_name":"jonidelv/generator-create-redux-app","owner":"jonidelv","description":"Add redux, emotion-js and other useful libraries like react-router in top of create-react-app","archived":false,"fork":false,"pushed_at":"2023-01-06T01:44:36.000Z","size":4377,"stargazers_count":139,"open_issues_count":14,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T03:09:50.583Z","etag":null,"topics":["boilerplate","create-react-app","react","redux","scaffolding","starter","yeoman-generator"],"latest_commit_sha":null,"homepage":"https://jonidelv.github.io/generator-create-redux-app/","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/jonidelv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-04T22:50:08.000Z","updated_at":"2024-01-02T15:39:11.000Z","dependencies_parsed_at":"2022-07-25T06:46:55.467Z","dependency_job_id":null,"html_url":"https://github.com/jonidelv/generator-create-redux-app","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonidelv%2Fgenerator-create-redux-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonidelv%2Fgenerator-create-redux-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonidelv%2Fgenerator-create-redux-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonidelv%2Fgenerator-create-redux-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonidelv","download_url":"https://codeload.github.com/jonidelv/generator-create-redux-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248657917,"owners_count":21140846,"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":["boilerplate","create-react-app","react","redux","scaffolding","starter","yeoman-generator"],"created_at":"2024-10-26T21:20:12.232Z","updated_at":"2025-04-13T03:09:55.396Z","avatar_url":"https://github.com/jonidelv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Generator create-redux-app\n\n[![NPM](https://nodei.co/npm/generator-create-redux-app.png?downloads=true)](https://nodei.co/npm/generator-create-redux-app/)\n\n\u003e This generator add **redux**, **emotion-js** and other useful libraries and tools like **react-router**, in top of the most common React starter [Create React App](https://github.com/facebookincubator/create-react-app).\nBelow you will find some information on how to perform common tasks.\n\n\n## Installation\n\nFirst, install [Yeoman](http://yeoman.io) and generator-create-redux-app using [npm](https://www.npmjs.com/) ( **You’ll need to have Node \u003e= 6.10.3 on your machine**  [node.js](https://nodejs.org/)).\n\n```bash\nnpm install -g yo\nnpm install -g generator-create-redux-app\n```\n\nThen generate your new project:\n\n```bash\nmkdir project-name\ncd project-name\nyo create-redux-app\n```\n\nOnce the installation is done, you can run some commands inside the project folder:\n\n### `npm start` or `yarn start`\n\nRuns the app in development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will see the build errors and lint warnings in the console.\n\n### `npm test` or `yarn test`\n\nRuns the test watcher in an interactive mode.\u003cbr\u003e\nBy default, runs tests related to files changes since the last commit.\n\n[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)\n\n### `npm run build` or `yarn build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n\n## User Guide\n\n- [Folder Structure](#folder-structure)\n- [Redux Dev Tools](#redux-dev-tools)\n- [Git Hooks](#git-hooks)\n- [Prettier](#prettier)\n- [ESLint](#eslint)\n- [Routing](#routing)\n- [Emotion Js](#emotion-js)\n- [Adding Sass Preprocessor](#adding-sass-preprocessor)\n- [Redux Store](#redux-store)\n- [Create React App config](#create-react-app-config)\n\n\n## Folder Structure\n\ncreate-redux-app override create-redux-app folder structure.\nOnce the generator runs your project folders should look like this:\n\n```\nmy-app/\n  docs/\n  public/\n    index.html\n    favicon.ico\n  src/\n    actions/\n    assets/\n    components/\n    constants/\n    containers/\n    reducers/\n    routes/\n    store/\n    tests/\n    styles/\n    utils/\n    index.js\n```\n\nFor the project to build, **these files must exist with exact filenames**:\n\n* `public/index.html` is the page template;\n* `src/index.js` is the JavaScript entry point.\n\nYou can delete or rename the other files.\n\nYou may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.\u003cbr\u003e\nYou need to **put any JS and CSS files inside `src`**, or Webpack won’t see them.\n\nOnly files inside `public` can be used from `public/index.html`.\u003cbr\u003e\nRead instructions below for using assets from JavaScript and HTML.\n\nYou can, however, create more top-level directories.\u003cbr\u003e\nThey will not be included in the production build so you can use them for things like documentation.\n\n\n## Redux Dev Tools\n\nCreate Redux App use [Redux DevTools Extension](http://extension.remotedev.io/). It provides access to the most popular monitors, is easy to configure and to filter actions.\n\n### Installation\n\n#### 1. For Chrome\n - from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd);\n - or build it with `npm i \u0026\u0026 npm run build:extension` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./build/extension`;\n - or run it in dev mode with `npm i \u0026\u0026 npm start` and [load the extension's folder](https://developer.chrome.com/extensions/getstarted#unpacked) `./dev`.\n\n#### 2. For Firefox\n - from [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/remotedev/);\n - or build it with `npm i \u0026\u0026 npm run build:firefox` and [load the extension's folder](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) `./build/firefox` (just select a file from inside the dir).\n\n#### 3. For Electron\n  - just specify `REDUX_DEVTOOLS` in [`electron-devtools-installer`](https://github.com/GPMDP/electron-devtools-installer).\n\n#### 4. For other browsers and non-browser environment\n  - use [`remote-redux-devtools`](https://github.com/zalmoxisus/remote-redux-devtools).\n\n\n## Git Hooks\n\nWe use [Husky](https://github.com/typicode/husky) to create Git Hooks. There is a pre commit hook than run prettier to ensure good code format. You can also create a prepush hook.\u003cbr\u003e\n```\n// Edit package.json\n\n\"husky\": {\n  \"hooks\": {\n    \"pre-commit\": \"pretty-quick --staged\"\n  }\n},\n```\n\n### Uninstall\n\n```bash\nnpm uninstall husky --save-dev\n```\nAnd delete the `husky` key in`package.json`\n\n\n## Prettier\n\nYou can add/remove rules if you want, just edit the `.prettierrc` file. Prettier runs in a precommit hooks to ensure good code formating with [pretty-quick](https://prettier.io/docs/en/precommit.html#option-2-pretty-quick-https-githubcom-azz-pretty-quick).\n```\n// Edit package.json\n\n\"scripts\": {\n  \"format\": \"prettier --write '**/*.{js,jsx,json,md}'\",\n  \"format:changed\": \"pretty-quick\",\n  \"format:staged\": \"pretty-quick --staged\",\n  \"eslint-check\": \"eslint --print-config .eslintrc.js | eslint-config-prettier-check\"\n},\n\"husky\": {\n  \"hooks\": {\n    \"pre-commit\": \"pretty-quick --staged\"\n  }\n},\n```\n\n### Uninstall\n\n```bash\nnpm uninstall eslint-config-prettier pretty-quick prettier --save-dev\n```\nDelete\n```\n\"scripts\": {\n  \"format\": \"prettier --write '**/*.{js,jsx,json,md}'\",\n  \"format:changed\": \"pretty-quick\",\n  \"format:staged\": \"pretty-quick --staged\",\n  \"eslint-check\": \"eslint --print-config .eslintrc.js | eslint-config-prettier-check\",\n},\n\"husky\": {\n  \"hooks\": {\n    \"pre-commit\": \"pretty-quick --staged\"\n  }\n},\n```\n\n## ESLint\n\nYou can add/remove rules or even extend plugins if you want. We extend **airbnb** ESLint rules.\n```\n// Edit eslintrc.json\n\n{\n  \"extends\": [\"airbnb\", \"prettier\", \"prettier/react\"],\n  \"plugins\": [\"prettier\"],\n  \"parser\": \"babel-eslint\",\n  \"parserOptions\": {\n    \"ecmaVersion\": 2016,\n    \"sourceType\": \"module\"\n  },\n  \"env\": {\n    \"es6\": true,\n    \"jest\": true,\n    \"browser\": true,\n    \"node\": true\n  },\n  \"globals\": {\n    \"DEBUG\": false\n  },\n  \"rules\": {\n    \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\", \".jsx\"] }],\n    \"import/no-extraneous-dependencies\": 0,\n    \"import/no-unresolved\": 0,\n    \"import/extensions\": 0,\n    \"import/prefer-default-export\": 0,\n    \"import/first\": 0\n  }\n}\n```\n\n\n## Routing\n\nThe best option for routing is [React Router](https://reacttraining.com/react-router/) specifically its new version for the web [react-router-dom](https://reacttraining.com/react-router/web/guides/quick-start). \u003cbr\u003e\n`src/routes/index.js` is the starter point of the app, where all the routes are specified and render the containers and components. Specify here all your routes, redirects, transitions, etc.\n\n\n## Emotion Js\n\n[emotion-js](https://emotion.sh/) allow you to write actual CSS code in your JavaScript to style your components,\nremoving the mapping between components and styles.\n\nSee the\n[official documentation](https://emotion.sh/docs/introduction)\nfor more information!\n\n\n## Adding Sass Preprocessor\n\nCan I use Sass with this boilerplate? yes, although we advise against it and **do not support this**. We selected\n[`styled-components`](https://github.com/styled-components/styled-components)\nover Sass because its approach is more powerful: instead of trying to\ngive a styling language programmatic abilities, it pulls logic and configuration\nout into JS where we believe those features belong.\n\nIf you _really_ still want (or need) to use Sass [then...](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)\n\n\n## Redux Store\n\nThe Redux store is created this way so you can use it anywhere, even outside redux, in any js file.\n\n```js\nconst { default: store } = process.env.NODE_ENV === 'production'\n  ? require('./storeProd')\n  : require('./storeDev')\n\nmodule.exports = store()\n```\n\n### Usage\n\n```js\nimport store from './store'\n\nstore.getState() // Get the state\nstore.dispatch() // Dispatch actions\n```\n\n## Create React App config\n\nYou can find the most recent version of the create-react-app guide [here](https://facebook.github.io/create-react-app/).\n\n\n## License\n\n[MIT License](https://github.com/jonidelv/generator-create-redux-app/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonidelv%2Fgenerator-create-redux-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonidelv%2Fgenerator-create-redux-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonidelv%2Fgenerator-create-redux-app/lists"}