{"id":13630678,"url":"https://github.com/kitze/custom-react-scripts","last_synced_at":"2025-10-02T23:35:43.662Z","repository":{"id":57128749,"uuid":"69094253","full_name":"kitze/custom-react-scripts","owner":"kitze","description":"[DEPRECATED, use customize-cra] Allow custom config for create-react-app without ejecting","archived":false,"fork":true,"pushed_at":"2023-05-25T15:07:50.000Z","size":5443,"stargazers_count":996,"open_issues_count":44,"forks_count":98,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-04-14T00:24:16.602Z","etag":null,"topics":["babel","config","create-react-app","custom-config","fork","webpack"],"latest_commit_sha":null,"homepage":"https://custom-react-scripts.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"facebook/create-react-app","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kitze.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-0.x.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-24T09:56:20.000Z","updated_at":"2024-04-02T10:14:18.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kitze/custom-react-scripts","commit_stats":null,"previous_names":["kitze/create-react-app"],"tags_count":100,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fcustom-react-scripts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fcustom-react-scripts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fcustom-react-scripts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fcustom-react-scripts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitze","download_url":"https://codeload.github.com/kitze/custom-react-scripts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235051558,"owners_count":18928184,"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":["babel","config","create-react-app","custom-config","fork","webpack"],"created_at":"2024-08-01T22:01:54.269Z","updated_at":"2025-10-02T23:35:38.011Z","avatar_url":"https://github.com/kitze.png","language":"JavaScript","readme":"### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  \n\n### Other projects:\n- 💻 [Sizzy](https://sizzy.co) - A browser for designers and developers, focused on responsive design\n- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops\n- 🔮 [Glink](https://glink.so) - Changelogs, Roadmap, User Requests\n- 🐶 [Benji](https://benji.so) - Ultimate wellness and productivity platform\n- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps\n- 📹 [YouTube Vlog](https://youtube.com/kitze) - Follow my journey\n\n\u003ca href=\"https://zerotoshipped.com\"\u003e\u003cimg style=\"width:450px\" src=\"https://i.ibb.co/WKQPDv5/twitter-image.jpg\" alt=\"Zero To Shipped\"\u003e\u003c/a\u003e\n\n---\n\n⚠️ This repo is **deprecated**. \n\nPlease use [react-app-rewired](https://github.com/timarney/react-app-rewired) if you want to customize CRA 1.  \nPlease use [customize-cra](https://github.com/arackaf/customize-cra) if you want to customize CRA 2.\n\n# ☢ custom-react-scripts ☢\nLatest version of original react-scripts: **1.1.14**\n\n### ⚠️ Disclaimer:\n\u003e This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features.\n\nThe reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a).\n\n### 💡Features:\n* Decorators\n* babel-preset-stage-0\n* Less\n* Sass\n* CSS modules\n* Sass modules\n* Less modules\n* Stylus modules\n\n**the features are optional and can be turned on/off individually*\n\n### ❔How to use it\n```create-react-app my-app --scripts-version custom-react-scripts```\n\nModify the `.env` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature.\n\nThe generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file.\n\n#### Adding to an existing project\n\n```\nnpm uninstall --save react-scripts;\nnpm install --save custom-react-scripts;\n```\n\nAdd a `.env.` file with the desired features.\n\n### 📝 Configuration options\n\n#### Styling\n- ```REACT_APP_SASS=true``` - enable SASS support\n- ```REACT_APP_LESS=true``` - enable LESS support\n- ```REACT_APP_STYLUS=true``` - enable Stylus support\n- ```REACT_APP_CSS_MODULES=true``` - enable CSS modules\n- ```REACT_APP_SASS_MODULES=true``` - enable Sass modules\n- ```REACT_APP_LESS_MODULES=true``` - enable Less modules\n- ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules\n- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name\n\nNote: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```.\n\nFor example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally.\n\n#### Babel\n- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset\n- ```REACT_APP_DECORATORS=true``` - enable decorators support\n\n#### Other\n- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the [webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine)\n\n### 🤔 Why?\nThe ```create-react-app``` app doesn't allow user configuration and modifications for few reasons:\n\n* Some of the babel presets and plugins that people might use are experimental.  If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility.\n* It's hard to maintain code for all of these custom configurations that people want to use.\n\nBut people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature.\n\nSo instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config.\n\n### How does it work?\nThe CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project.\n\nFrom the original readme:\n\u003e To define permanent environment vairables, create a file called .env in the root of your project:\n\u003e ```REACT_APP_SECRET_CODE=abcdef```\n\nI just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```.\n\n### Future plans\n\nI will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Fcustom-react-scripts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitze%2Fcustom-react-scripts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Fcustom-react-scripts/lists"}