{"id":13798261,"url":"https://github.com/raymondsze/create-react-scripts","last_synced_at":"2025-10-31T14:30:42.374Z","repository":{"id":57146262,"uuid":"106159387","full_name":"raymondsze/create-react-scripts","owner":"raymondsze","description":"Easily extend the react-scripts to your own version of react-scripts","archived":false,"fork":false,"pushed_at":"2019-01-06T09:26:44.000Z","size":204,"stargazers_count":63,"open_issues_count":7,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T16:48:27.288Z","etag":null,"topics":["babel","boilerplate","create-react-app","javascript","react","server-side-rendering","universal-react","webpack"],"latest_commit_sha":null,"homepage":null,"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/raymondsze.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-10-08T07:56:59.000Z","updated_at":"2023-06-26T15:36:49.000Z","dependencies_parsed_at":"2022-09-05T15:41:45.996Z","dependency_job_id":null,"html_url":"https://github.com/raymondsze/create-react-scripts","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Fcreate-react-scripts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Fcreate-react-scripts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Fcreate-react-scripts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raymondsze%2Fcreate-react-scripts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raymondsze","download_url":"https://codeload.github.com/raymondsze/create-react-scripts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238986733,"owners_count":19563756,"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","boilerplate","create-react-app","javascript","react","server-side-rendering","universal-react","webpack"],"created_at":"2024-08-04T00:00:41.059Z","updated_at":"2025-10-31T14:30:42.324Z","avatar_url":"https://github.com/raymondsze.png","language":"JavaScript","funding_links":[],"categories":["Javascript"],"sub_categories":[],"readme":"# Deprecated\nI am sorry that this project is not in active development and no plan to support react-scripts 2.0.\n\nThe main purpose I created this project is to easily extend the cra configuration to support the server-side-rendering.\nRecently, I have moved all my private projects to nextJs that no longer depend on react-scripts anymore.\n\nI would welcome if anyone who are interested to take over this project.\n\nTo support react-scripts 2.0, there are some promising libraries there.\n\nhttps://github.com/rescripts/rescripts\n\nhttps://github.com/sharegate/craco\n\n-----------------\n# Create React Scripts\n-----------------\nIf you are faimilar with React, you must have heard of [create-react-app](https://github.com/facebookincubator/create-react-app) announced by Facebook.\ncreate-react-app is great, you don't have to worry about the babel and webpack configuration before you start learning React. Its a good tool for React beginner.\n\nHow about experienced user? Is create-react-app still good? Yes and No. All the configuration are hidden by `create-react-app`. Configurations are put inside the sub package called `react-scripts`. How can we modify the configuration hidden by `create-react-app`.\n\n## 1. Eject\n`create-react-app` provides an official way to do that, which is `react-scripts eject`. By doing this way, it means that you cannot enjoy any benefit `create-react-app` will provide in the future. You have to maintain the configuration yourself and you may need to keep track of the updates from create-react-app.\n\n## 2. Fork\nAnother way to extend the configuration is using a Fork of `create-react-app`. By doing this way, its just better, it would be *easier* to keep track of the updates from `create-react-app`. But... you still need to maintain the fork repository yourself. Is it worth to maintain the whole repository if you only need some modification on the configuration like *sass* and *less* supports?\n\n## 3. React App Rewired\n[react-app-rewired](https://github.com/timarney/react-app-rewired) is a moudle that you can easily extends the webpack and babel configuration by using `config.override.js`. But the `config.override.js` must be along with your project, and it is hard to share your configuration to your teammates as you cannot publish the modification into another version of `react-script`.\n\n## 4. Roll Your Own Boilerplate\nIf you choose this way, then you don't even need create-react-app. But as a experienced user, setup webpack and babel configuration is a time consuming tasks. create-react-app is an official tool, I believe the choice she taken is good reference. Usually we only want to extend the configuration instead of completely rewrite.\n\n## 5. Create React Scripts\nI believe there are **No Perfect Configurations Unless You Create Your Own**.\nThis module helps you **easily extend the `react-scripts` to your own version of `react-scripts`**.\n\n# Features\n-----------------\n+ **Easy to create your own `react-scripts` by just a simple configuration**\n+ **Support similar way like what `react-app-rewired` did to modify the configuration**\n+ **Able to customize script like building script `build:server` and `start:server` to support universal rendering**\n+ **Composable react-scripts**\n\n# How it works?\n----------------\nThis module make use of **require.cache**, the following modules are replaced.\nUse this module at **Your Own Risk**.\n\nThis method would be broken if the implementaion or location of following files changed.\n+ react-scripts/config/paths.js\n+ react-scripts/config/env.js\n+ react-scripts/config/webpack.config.dev.js\n+ react-scripts/config/webpack.config.prod.js\n+ react-scripts/config/webpackDevServer.config.js\n+ react-scripts/scripts/util/createJestConfig.js\n\nAll the above are pre-required and the require.cache got replaced according to your setting in `crs.config.js`.\n\nTo understand more, you can see the rewire [source code](https://github.com/raymondsze/create-react-scripts/blob/master/packages/create-react-scripts/rewire.js) here.\n\n# Installation\n-----------------\n`npm i -D react-scripts create-react-scripts` or `yarn add --dev react-scripts create-react-scripts`  \n\n# How to use?\n-----------------\n#### Option 1: Create your own react-scripts\n##### Create a new node project\nuse `npm init` or `yarn init`\n##### Modify package.json\nAssume your script name is **custom-react-scripts**\n```diff\n// package.json\n{\n  \"name\": \"custom-react-scripts\",\n+ \"bin\": {\n+    custom-recat-scripts: \"./bin/custom-react-scripts.js\"\n+  }\n+ \"main\": \"./crs.config.js\"\n   ...\n}\n```\n##### Add bin/custom-react-scripts.js\nCreate file `bin/custom-react-scripts.js` with following content\n```js\n// /bin/custom-react-scripts.js\nconst path = require('path');\n\n// here we need to tell create-react-scripts whild folder to lookup crs.config.js\nrequire('create-react-scripts')(path.join(__dirname, '..'));\n```\n##### Add crs.config.js\nCreate file `crs.config.js` with following content\n```js\n// /crs-config.js\n// The rewire procedule follow this life cycle \n// NODE_ENV==='development' env --\u003e paths --\u003e webpack --\u003e devServer\n// NODE_ENV==='production' env --\u003e paths --\u003e webpack\n// NODE_ENV==='test' env --\u003e paths --\u003e jest\n\nmodule.exports = {\n  // Optional: Rewire the env\n  // the env is the return result of getClientEnvironment from 'react-script/config/env.js'\n  env(env, NODE_ENV, argv) {\n    // modify env here...\n    return env;\n  },\n  // Optional: Rewire the paths\n  // the paths is from 'react-script/config/paths.js'\n  paths(paths, NODE_ENV, argv) {\n    // you can get the rewired env from 'this.env'\n    // modify paths here...\n    return paths;\n  },\n  // Optional: Rewire the webpack.config\n  // if NODE_ENV === 'production'\n  // the webpack config is from 'react-script/config/webpack.config.prod.js'\n  // if NODE_ENV === 'development'\n  // the webpack config is from 'react-script/config/webpack.config.dev.js'\n  webpack(webpackConfig, NODE_ENV, argv) {\n    // you can get the rewired env from 'this.env'\n    // you can get the rewired paths from 'this.paths'\n    // modify webpackConfig here...\n    return webpackConfig;\n  },\n  // Optional: Rewire the webpackDevServer.config\n  // the devServer is the return result of 'react-script/config/webpackDevServer.config.js'\n  devServer: (webpackDevServerConfig, NODE_ENV, argv) {\n    // you can get the rewired env from 'this.env'\n    // you can get the rewired paths from 'this.paths'\n    // you can get the rewired webpackConfig from 'this.webpack'\n    // modify webpackDevServerConfig here...\n    return webpackConfig;\n  },\n  // Optional: Rewire the jest configuration\n  // the jestConfig is the return result of 'react-script/scripts/utils/createJestConfig.js'\n  jest(jestConfig, NODE_ENV, argv) {\n    // you can get the rewired env from 'this.env'\n    // you can get the rewired paths from 'this.paths'\n    // modify jestConfig here...\n    return jestConfig;\n  },\n  // Optional: Add custom scripts\n  scripts: {\n    // you can add custom scripts here, for example\n    // \"start:server\": path.join(__dirname, 'scripts/start-server.js')\n  },\n};\n```\n##### Publish\nChoose either one\n1. Publish your `custom-react-scripts` using `npm publish` \n2. make use of [`lerna`](https://github.com/lerna) to connect pacakges.\n\n##### Change package.json of your project\nModify pacakge.json to use `custom-react-scripts` instead of `react-scripts`\n```diff\n// package.json of your react app\n{\n-   \"start\": \"react-scripts start\",\n+   \"start\": \"custom-react-scripts start\",\n-   \"build\": \"react-scripts build\",\n+   \"build\": \"custom-react-scripts build\",\n-   \"test\": \"react-scripts test --env=jsdom\",\n+   \"test\": \"custom-react-scripts test --env=jsdom\"\n}\n```\n#### Option 2: Customize configuration directly into your project.\n##### Change package.json of your project\nModify pacakge.json to use `custom-react-scripts` instead of `create-react-scripts`\n```diff\n// package.json of your react app\n{\n-   \"start\": \"react-scripts start\",\n+   \"start\": \"create-react-scripts start\",\n-   \"build\": \"react-scripts build\",\n+   \"build\": \"create-react-scripts build\",\n-   \"test\": \"react-scripts test --env=jsdom\",\n+   \"test\": \"create-react-scripts test --env=jsdom\"\n}\n```\n##### Add crs.config.js\nCreate file `crs.config.js` like what we did in **Option1**.\n\n#### Option 3: Mix Option 1 and Option 2\nModify pacakge.json to use `custom-react-scripts` instead of `create-react-scripts`\n```diff\n// package.json of your react app\n{\n-   \"start\": \"react-scripts start\",\n+   \"start\": \"create-react-scripts start\",\n-   \"build\": \"react-scripts build\",\n+   \"build\": \"create-react-scripts build\",\n-   \"test\": \"react-scripts test --env=jsdom\",\n+   \"test\": \"create-react-scripts test --env=jsdom\"\n}\n```\n##### Add crs.config.js\nRemember what we did in **Option1**'s package.json `\"main\": \"./crs.config.js\"`\nNow we can extend our `custom-react-scripts` in Option1.\nCreate file `crs.config.js` with following content\n```js\n// compose is a helper to merge multiple crs.config into one\nconst { compose } = require('create-react-scripts');\nmodule.exports = compose(\n  // extend from custom-react-scripts\n  require('custom-react-scripts'),\n  {\n      // Optional: Rewire the env\n      // the env is the return result of getClientEnvironment from 'react-script/config/env.js'\n      env(env, NODE_ENV, argv) {\n        // modify env here...\n        return env;\n      },\n      // Optional: Rewire the paths\n      // the paths is from 'react-script/config/paths.js'\n      paths(paths, NODE_ENV, argv) {\n        // you can get the rewired env from 'this.env'\n        // modify paths here...\n        return paths;\n      },\n      // Optional: Rewire the webpack.config\n      // if NODE_ENV === 'production'\n      // the webpack config is from 'react-script/config/webpack.config.prod.js'\n      // if NODE_ENV === 'development'\n      // the webpack config is from 'react-script/config/webpack.config.dev.js'\n      webpack(webpackConfig, NODE_ENV, argv) {\n        // you can get the rewired env from 'this.env'\n        // you can get the rewired paths from 'this.paths'\n        // modify webpackConfig here...\n        return webpackConfig;\n      },\n      // Optional: Rewire the webpackDevServer.config\n      // the devServer is the return result of 'react-script/config/webpackDevServer.config.js'\n      devServer: (webpackDevServerConfig, NODE_ENV, argv) {\n        // you can get the rewired env from 'this.env'\n        // you can get the rewired paths from 'this.paths'\n        // you can get the rewired webpackConfig from 'this.webpack'\n        // modify webpackDevServerConfig here...\n        return webpackConfig;\n      },\n      // Optional: Rewire the jest configuration\n      // the jestConfig is the return result of 'react-script/scripts/utils/createJestConfig.js'\n      jest(jestConfig, NODE_ENV, argv) {\n        // you can get the rewired env from 'this.env'\n        // you can get the rewired paths from 'this.paths'\n        // modify jestConfig here...\n        return jestConfig;\n      },\n      // Optional: Add custom scripts\n      scripts: {\n        // you can add custom scripts here, for example\n        // \"start:server\": path.join(__dirname, 'scripts/start-server.js')\n      },\n  }\n);\n```\n\n# API\n--------------------------------\n#### crs-config.js\nRewire Target\n+ [env](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/env.js) : The return result of *getClientEnvironment* of **react-scripts/config/env**\n+ [paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/paths.js): The module.exports of **react-scripts/config/paths**\n+ [webpack](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js): (NODE_ENV: development) The module.exports of **react-scripts/config/webpack.config.dev.js**\n+ [webpack](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js): (NODE_ENV: production) The module.exports of **react-scripts/config/webpack.config.prod.js**\n+ [devServer](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js): The return result of module.exports of **react-scripts/config/webpackDevServer.config.js**\n+ [jest](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js): The return result of module.exports of **react-scripts/scripts/utils/createJestConfig.js**\n\n### compose\nYou can compose multiple crs-config together to a single crs-config.\n```js\nconst { compose } = require('create-react-scripts')\nconst crsConfig1 = require('./crsConfig1');\nconst crsConfig2 = require('./crsConfig2');\n....\nconst crsConfigN = require('./crsConfigN');\n\nmodule.exports = compose(crsConfig1, crsConfig2, ..., crsConfigN);\n```\n\n### rewire()\n##### return: { env, paths, webpack, devServer, jest }\n+ **env**: rewired createClientEnvironment function\n+ **paths**: rewired paths\n+ **webpack**: rewired webpackConfig\n+ **devServer**: rewired createWebpackDevServerConfig function\n+ **jest**: rewired createJestConfig function\n\nYou can use the rewire function to obtain the rewired result.\nThis function is useful for creating custom script.\nExample:\n**react-scripts-ssr/scripts/start-server.js** [[source](https://github.com/raymondsze/create-react-scripts/blob/master/packages/create-react-scripts-ssr/scripts/start-server.js)]\n**react-scripts-ssr/scripts/build-server.js** [[source](https://github.com/raymondsze/create-react-scripts/blob/master/packages/create-react-scripts-ssr/scripts/build-server.js)]\n```js\nconst { compose } = require('create-react-scripts')\nconst crsConfig1 = require('./crsConfig1');\nconst crsConfig2 = require('./crsConfig2');\n....\nconst crsConfigN = require('./crsConfigN');\n\nmodule.exports = compose(crsConfig1, crsConfig2, ..., crsConfigN);\n```\n\n-----------------\n# Why This Project Exists\n-----------------\n#### Create React App - Zero Configuration?\nIf you’re working with React, you’re probably familiar with the **create-react-app**. It’s an official command line interface for building React applications with **ZERO Configuration**.\n#### ZERO Configuration? How is it possible?\n**create-react-app** hides all the webpack configuration into a package **react-scripts**.\nWith **create-react-app**, I can **enjoy all the configuration created by Facebook without any effort** and I don't need to configure myself.\n\nBut... **you are not POSSIBLE to change the default configurations provided by Facebook create-react-app**.\nFacebook provided **2 options** to allow you to change the default configurations...\n1. use the **eject** script, change the configuration.\n2. **fork** the create-react-app, change and republish, keep the fork up-to-date.\n\n#### Eject or Fork?\n1. **Eject**\nThis is a one-way operation. Once you eject, you can’t go back!\nThis command will remove the single build dependency from your project.\nSo **you cannot enjoy any benefit or update from create-react-app in the future**.\n\n2. **Fork**\nThere are many fork versions of create-react-app. But normally **they only want some small changes to the configurations**... Why they need to **maintain a fork of create-react-app**?\n\n#### What most people want in create-react-app?\n1. import sass support\n2. import less support\n3. server-side-rendering\n4. vendor dll\n5. ....\n\nHowever, all of them are postponed or even rejected **until the [Plugin System](https://github.com/facebookincubator/create-react-app/pull/2784) is supported by create-react-app.**\nBut... **only plugin got approved by Facebook can be used**...\n\u003eEnd-users (app developers) will only be able to use plugins which we approve and whitelist.\nTypically, this means it meets a set of criteria:\n1.Use-case or functionality is popular\n2.Adds value\n3.Easy to maintain and underlying tools are stable\n4.We have control to modify \u0026 publish updates to the package\n\n#### There are no perfect configurations unless you create your own\nI believe that **create-react-app is a good reference.** We just want to extend it to build our own react-scripts.... **Why I have to eject or fork?**\n\n#### react-app-rewired\nSee the medium article https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39\nThis is a good tool that can just provide a **config.overrides.js** to modify the default configuration of **create-react-app**.\nBut...\nThe **config.overrides.js** must be along with your project... It is **not possible to create a custom version of react-scripts that could be shared with multiple projects**.\n\n#### How about create my own react-scripts based on create-react-app?\nThis is why I created **create-react-scripts**.\n##### create-react-scripts\nThis package allow you to easily create your own 'react-scripts' based on 'react-scripts' package under create-react-app.\n\n\n## Inspiration\n- [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n- [timarney/react-app-rewired](https://github.com/timarney/react-app-rewired)\n- [jaredpalmer/razzle](https://github.com/jaredpalmer/razzle)\n- [react-boilerplate/react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)\n- [ctrlplusb/react-universally](https://github.com/ctrlplusb/react-universally)\n\n# Author\n-----------------\n- [Raymond Sze](https://github.com/raymondsze)\n\n# License\n-----------------\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraymondsze%2Fcreate-react-scripts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraymondsze%2Fcreate-react-scripts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraymondsze%2Fcreate-react-scripts/lists"}