Repository files navigation

I am sorry that this project is not in active development and no plan to support react-scripts 2.0.

The main purpose I created this project is to easily extend the cra configuration to support the server-side-rendering.Recently, I have moved all my private projects to nextJs that no longer depend on react-scripts anymore.

I would welcome if anyone who are interested to take over this project.

To support react-scripts 2.0, there are some promising libraries there.

https://github.com/rescripts/rescripts

https://github.com/sharegate/craco

If you are faimilar with React, you must have heard ofcreate-react-app announced by Facebook.create-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.

How about experienced user? Is create-react-app still good? Yes and No. All the configuration are hidden bycreate-react-app. Configurations are put inside the sub package calledreact-scripts. How can we modify the configuration hidden bycreate-react-app.

create-react-app provides an official way to do that, which isreact-scripts eject. By doing this way, it means that you cannot enjoy any benefitcreate-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.

Another way to extend the configuration is using a Fork ofcreate-react-app. By doing this way, its just better, it would beeasier to keep track of the updates fromcreate-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 likesass andless supports?

react-app-rewired is a moudle that you can easily extends the webpack and babel configuration by usingconfig.override.js. But theconfig.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 ofreact-script.

If 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.

I believe there areNo Perfect Configurations Unless You Create Your Own.This module helps youeasily extend thereact-scripts to your own version ofreact-scripts.

• Easy to create your ownreact-scripts by just a simple configuration
• Support similar way like whatreact-app-rewired did to modify the configuration
• Able to customize script like building scriptbuild:server andstart:server to support universal rendering
• Composable react-scripts

This module make use ofrequire.cache, the following modules are replaced.Use this module atYour Own Risk.

This method would be broken if the implementaion or location of following files changed.

• react-scripts/config/paths.js
• react-scripts/config/env.js
• react-scripts/config/webpack.config.dev.js
• react-scripts/config/webpack.config.prod.js
• react-scripts/config/webpackDevServer.config.js
• react-scripts/scripts/util/createJestConfig.js

All the above are pre-required and the require.cache got replaced according to your setting incrs.config.js.

To understand more, you can see the rewiresource code here.

npm i -D react-scripts create-react-scripts oryarn add --dev react-scripts create-react-scripts

usenpm init oryarn init

Assume your script name iscustom-react-scripts

// package.json{  "name": "custom-react-scripts",+ "bin": {+    custom-recat-scripts: "./bin/custom-react-scripts.js"+  }+ "main": "./crs.config.js"   ...}

Create filebin/custom-react-scripts.js with following content

// /bin/custom-react-scripts.jsconstpath=require('path');// here we need to tell create-react-scripts whild folder to lookup crs.config.jsrequire('create-react-scripts')(path.join(__dirname,'..'));

Create filecrs.config.js with following content

// /crs-config.js// The rewire procedule follow this life cycle// NODE_ENV==='development' env --> paths --> webpack --> devServer// NODE_ENV==='production' env --> paths --> webpack// NODE_ENV==='test' env --> paths --> jestmodule.exports={// Optional: Rewire the env// the env is the return result of getClientEnvironment from 'react-script/config/env.js'env(env,NODE_ENV,argv){// modify env here...returnenv;},// Optional: Rewire the paths// the paths is from 'react-script/config/paths.js'paths(paths,NODE_ENV,argv){// you can get the rewired env from 'this.env'// modify paths here...returnpaths;},// Optional: Rewire the webpack.config// if NODE_ENV === 'production'// the webpack config is from 'react-script/config/webpack.config.prod.js'// if NODE_ENV === 'development'// the webpack config is from 'react-script/config/webpack.config.dev.js'webpack(webpackConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// modify webpackConfig here...returnwebpackConfig;},// Optional: Rewire the webpackDevServer.config// the devServer is the return result of 'react-script/config/webpackDevServer.config.js'devServer:(webpackDevServerConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// you can get the rewired webpackConfig from 'this.webpack'// modify webpackDevServerConfig here...    returnwebpackConfig;},// Optional: Rewire the jest configuration// the jestConfig is the return result of 'react-script/scripts/utils/createJestConfig.js'jest(jestConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// modify jestConfig here...returnjestConfig;},// Optional: Add custom scriptsscripts:{// you can add custom scripts here, for example// "start:server": path.join(__dirname, 'scripts/start-server.js')},};

Choose either one

1. Publish yourcustom-react-scripts usingnpm publish
2. make use oflerna to connect pacakges.

Modify pacakge.json to usecustom-react-scripts instead ofreact-scripts

// package.json of your react app{-   "start": "react-scripts start",+   "start": "custom-react-scripts start",-   "build": "react-scripts build",+   "build": "custom-react-scripts build",-   "test": "react-scripts test --env=jsdom",+   "test": "custom-react-scripts test --env=jsdom"}

Modify pacakge.json to usecustom-react-scripts instead ofcreate-react-scripts

// package.json of your react app{-   "start": "react-scripts start",+   "start": "create-react-scripts start",-   "build": "react-scripts build",+   "build": "create-react-scripts build",-   "test": "react-scripts test --env=jsdom",+   "test": "create-react-scripts test --env=jsdom"}

Create filecrs.config.js like what we did inOption1.

Modify pacakge.json to usecustom-react-scripts instead ofcreate-react-scripts

// package.json of your react app{-   "start": "react-scripts start",+   "start": "create-react-scripts start",-   "build": "react-scripts build",+   "build": "create-react-scripts build",-   "test": "react-scripts test --env=jsdom",+   "test": "create-react-scripts test --env=jsdom"}

Remember what we did inOption1's package.json"main": "./crs.config.js"Now we can extend ourcustom-react-scripts in Option1.Create filecrs.config.js with following content

// compose is a helper to merge multiple crs.config into oneconst{ compose}=require('create-react-scripts');module.exports=compose(// extend from custom-react-scriptsrequire('custom-react-scripts'),{// Optional: Rewire the env// the env is the return result of getClientEnvironment from 'react-script/config/env.js'env(env,NODE_ENV,argv){// modify env here...returnenv;},// Optional: Rewire the paths// the paths is from 'react-script/config/paths.js'paths(paths,NODE_ENV,argv){// you can get the rewired env from 'this.env'// modify paths here...returnpaths;},// Optional: Rewire the webpack.config// if NODE_ENV === 'production'// the webpack config is from 'react-script/config/webpack.config.prod.js'// if NODE_ENV === 'development'// the webpack config is from 'react-script/config/webpack.config.dev.js'webpack(webpackConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// modify webpackConfig here...returnwebpackConfig;},// Optional: Rewire the webpackDevServer.config// the devServer is the return result of 'react-script/config/webpackDevServer.config.js'devServer:(webpackDevServerConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// you can get the rewired webpackConfig from 'this.webpack'// modify webpackDevServerConfig here...        returnwebpackConfig;},// Optional: Rewire the jest configuration// the jestConfig is the return result of 'react-script/scripts/utils/createJestConfig.js'jest(jestConfig,NODE_ENV,argv){// you can get the rewired env from 'this.env'// you can get the rewired paths from 'this.paths'// modify jestConfig here...returnjestConfig;},// Optional: Add custom scriptsscripts:{// you can add custom scripts here, for example// "start:server": path.join(__dirname, 'scripts/start-server.js')},});

Rewire Target

• env : The return result ofgetClientEnvironment ofreact-scripts/config/env
• paths: The module.exports ofreact-scripts/config/paths
• webpack: (NODE_ENV: development) The module.exports ofreact-scripts/config/webpack.config.dev.js
• webpack: (NODE_ENV: production) The module.exports ofreact-scripts/config/webpack.config.prod.js
• devServer: The return result of module.exports ofreact-scripts/config/webpackDevServer.config.js
• jest: The return result of module.exports ofreact-scripts/scripts/utils/createJestConfig.js

You can compose multiple crs-config together to a single crs-config.

const{ compose}=require('create-react-scripts')constcrsConfig1=require('./crsConfig1');constcrsConfig2=require('./crsConfig2');....constcrsConfigN=require('./crsConfigN');module.exports=compose(crsConfig1,crsConfig2, ...,crsConfigN);

• env: rewired createClientEnvironment function
• paths: rewired paths
• webpack: rewired webpackConfig
• devServer: rewired createWebpackDevServerConfig function
• jest: rewired createJestConfig function

You can use the rewire function to obtain the rewired result.This function is useful for creating custom script.Example:react-scripts-ssr/scripts/start-server.js [source]react-scripts-ssr/scripts/build-server.js [source]

const{ compose}=require('create-react-scripts')constcrsConfig1=require('./crsConfig1');constcrsConfig2=require('./crsConfig2');....constcrsConfigN=require('./crsConfigN');module.exports=compose(crsConfig1,crsConfig2, ...,crsConfigN);

If you’re working with React, you’re probably familiar with thecreate-react-app. It’s an official command line interface for building React applications withZERO Configuration.

create-react-app hides all the webpack configuration into a packagereact-scripts.Withcreate-react-app, I canenjoy all the configuration created by Facebook without any effort and I don't need to configure myself.

But...you are not POSSIBLE to change the default configurations provided by Facebook create-react-app.Facebook provided2 options to allow you to change the default configurations...

1. use theeject script, change the configuration.
2. fork the create-react-app, change and republish, keep the fork up-to-date.

1. EjectThis is a one-way operation. Once you eject, you can’t go back!This command will remove the single build dependency from your project.Soyou cannot enjoy any benefit or update from create-react-app in the future.

2. ForkThere are many fork versions of create-react-app. But normallythey only want some small changes to the configurations... Why they need tomaintain a fork of create-react-app?

1. import sass support
2. import less support
3. server-side-rendering
4. vendor dll
5. ....

However, all of them are postponed or even rejecteduntil thePlugin System is supported by create-react-app.But...only plugin got approved by Facebook can be used...

End-users (app developers) will only be able to use plugins which we approve and whitelist.Typically, this means it meets a set of criteria:1.Use-case or functionality is popular2.Adds value3.Easy to maintain and underlying tools are stable4.We have control to modify & publish updates to the package

I believe thatcreate-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?

See the medium articlehttps://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39This is a good tool that can just provide aconfig.overrides.js to modify the default configuration ofcreate-react-app.But...Theconfig.overrides.js must be along with your project... It isnot possible to create a custom version of react-scripts that could be shared with multiple projects.

This is why I createdcreate-react-scripts.

This package allow you to easily create your own 'react-scripts' based on 'react-scripts' package under create-react-app.

• facebookincubator/create-react-app
• timarney/react-app-rewired
• jaredpalmer/razzle
• react-boilerplate/react-boilerplate
• ctrlplusb/react-universally

• Raymond Sze

MIT