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

commented Dec 27, 2016

How about react-app-rewired ?

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.