simple-react-scripts

Based on react-app-rewired and react-scripts 2.0, simple-react-scripts provides the absolute barebones webpack and scripts configuration as used by Create React App.

This package is designed to help you configure and use Create React App's webpack configuration and scripts, allowing you to quickly get started without having to set up any webpack configuration yourself.

Just like react-app-rewired it is completely configurable.

This is a simplified version of react-scripts, containing only webpack and build scripts. It will not automatically generate Jest or Eslint configuration for you.

Quick start

npm i -D simple-react-scripts

yarn add simple-react-scripts --dev

Running your application

Just like react-scripts, to run your aplication all you need to do is add simple-react-scripts to your package.json's scripts commands.

// package.json
{
    "scripts": {
        "start": "simple-react-scripts start",
        "build": "simple-react-scripts build"
        "test": "simple-react-scripts start"
    }
}

Overriding configurations

simple-react-scripts will automatically look for a file called config-overrides.js at your project's root, which allows you to mutate the configuration.

To use an alternative path, just supply the root path of your config-overrides.js using --overridesPath=root/path/to/your-config in your package.json scripts.

Overriding webpack

// config-overrides.js
module.exports = (webpackConfig, env, libs) => {
  return webpackConfig;
};

Overriding paths

All paths used within simple-react-scripts can be overridden. To do this just create method (as illustrated below) within your overrides file.

If a path method is specified, it will be executed before any webpack overrides. This will allow your webpack configuration to be executed with your updated paths.

To override paths, add the following:

// config-overrides.js
module.exports.paths = (paths, env) => {
  paths.indexJs = "your/new/script/path";
  return paths;
};

// make sure webpack is written as
module.exports.webpack = (webpackConfig, env, libs) => webpackConfig;
// and NOT as
// to prevent overriding the above method
module.exports = (webpackConfig, env, libs) => webpackConfig;

Libs & Helpers

This package was created with simplicity and flexibility in mind. The idea of libs is to provide access to additional helpers that will aid in overriding your webpack configuration.

At the moment, only withoutLint is available. If you want to add any additional helpers, please feel free to submit a Pull Request.

// config-overrides.js
module.exports = (webpackConfig, env, { paths, withoutLint }) => {
  return withoutLint(webpackConfig);
};

Disabling typescript

This is a feature added specifically to turn off typescript. This comes in handy if you are using typescript for your server, but you dont want the webpack configuration to use typescript for your UI code.

Using this, you can disable typescript really easily:

// package.json
{
    "scripts": {
        "start": "simple-react-scripts --disableType",
    }
}

Further documentation

This package is based on scripts and configuration used by Create React App. Please refer to its documentation for any help to understand what configurations are available:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.