Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A way to hack create-react-app for custom config
// Put me under ./src
module.exports = {
extends: 'react-app',
rules: {
eqeqeq: 'off'
}
}

Until now it's hard to custom facebookincubator/create-react-app without npm eject.

This gist teach you how to hack that.

  1. Add a new folder in your project named scripts.

  2. Put three .js files below in scripts folder.

  3. Change your package.json scripts section:

    "scripts": { "start": "node ./scripts/react-scripts.js start", "build": "node ./scripts/react-scripts.js build", "test": "react-scripts test --env=jsdom" }

  4. Create .eslintrc.js for yourself.

What happened after these change?

When you run react-scripts start. react-scripts.js will find ../scripts/start.js and run it. This why we put them into scripts folder.

Before react-scripts.js run the real start.js. We require and modify webpack config. That's all we done.

/**
* We can hack build script now.
* This is similar to 'start.js'. Be sure you have compatible config to avoid build time bug.
*/
process.env.NODE_ENV = 'production'
require('dotenv').config({silent: true})
var path = require('path')
var paths = require('react-scripts/config/paths')
var config = require('react-scripts/config/webpack.config.prod')
config.eslint.configFile = path.join(paths.appSrc, '.eslintrc.js')
// config.eslint.useEslintrc = true // I don't know why this line not work!
require('react-scripts/scripts/build')
/*
* This command have same function as official because we copy it only.
* It will run different scripts in '../scripts/(start|build).js'. Equal to './(start|build).js'
*/
var spawn = require('cross-spawn');
var script = process.argv[2];
var args = process.argv.slice(3);
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test':
var result = spawn.sync('node', [require.resolve('../scripts/' + script)].concat(args), {stdio: 'inherit'});
process.exit(result.status);
break;
default:
console.log('Unknown script "' + script + '".');
console.log('Perhaps you need to update react-scripts?');
break;
}
/**
* We can hack start script now.
*/
// Setup env first. Webpack config will reference it.
process.env.NODE_ENV = 'development'
require('dotenv').config({silent: true})
var path = require('path')
var paths = require('react-scripts/config/paths')
// We require webpack config here.
var config = require('react-scripts/config/webpack.config.dev')
// Begin hack. Modify webpack config in node modules cache. This example show you how to custom eslint config. You can add 'less-loader' by yourself.
config.eslint.configFile = path.join(paths.appSrc, '.eslintrc.js')
// config.eslint.useEslintrc = true
// Run real start script. Because node wont load modules if they stay in cache. So webpack will got modified config.
require('react-scripts/scripts/start')
@jihchi

This comment has been minimized.

Copy link

@jihchi jihchi commented Dec 27, 2016

How about react-app-rewired ?

@architgarg

This comment has been minimized.

Copy link

@architgarg architgarg commented Sep 11, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.