https://github.com/brunolemos/extensible-react-scripts

Add extension points to Create React App without the need to eject
https://github.com/brunolemos/extensible-react-scripts

configuration create-react-app react webpack webpack2

Last synced: about 1 month ago
JSON representation

Add extension points to Create React App without the need to eject

• Host: GitHub
• URL: https://github.com/brunolemos/extensible-react-scripts
• Owner: brunolemos
• Archived: true
• Created: 2017-05-24T20:35:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-31T20:30:50.000Z (almost 7 years ago)
• Last Synced: 2025-01-14T10:11:07.100Z (about 1 month ago)
• Topics: configuration, create-react-app, react, webpack, webpack2
• Language: JavaScript
• Homepage:
• Size: 3.41 MB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Extensible React Scripts

> react-scripts version: 1.1.0

## Why?

The official [react-scripts](https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts)  that is included in [Create React App](https://github.com/facebookincubator/create-react-app) does not allow any custom webpack configuration, which leads to people using more `eject` than we wanted to.

### Solution

Allow users to extend webpack configuration.

### Usage

#### New projects

```shell

create-react-app APP_NAME_HERE --scripts-version extensible-react-scripts

```

Edit the `cra.config.js` file generated at the root of the project.

#### Existing projects

- `yarn remove react-scripts`

- `yarn add --dev extensible-react-scripts`

- Create a file named `cra.config.js` at the root of the project (outside `src` folder) exporting a function like below:

##### cra.config.js example

```js

module.exports = {

  webpack: function(webpackConfig, { isDevelopment }) {

    // modify webpack config here

    const config = Object.assign({}, webpackConfig)

    // return the modified version

    return config

  },

}

```

That's it!

## Available configurations

| Config | Format | Return type |

| ------ | ------ | ---- |

| [paths](config/paths.js#L52-L66)  | `function(paths, { isDevelopment, resolvePath })` | Object |

| [webpack](config/webpack.config.dev.js#L38)  | `function(webpackConfig, { isDevelopment, paths, resolvePath })` | Object |

## Versioning

The version will be the same of the official `react-scripts`. Check [package.json](package.json) or the top of this file.

## Related projects

[react-app-rewired](https://github.com/timarney/react-app-rewired) by [@timarney](https://github.com/timarney)

[configurable-react-scripts](https://github.com/svrcekmichal/configurable-react-scripts) by [@svrcekmichal](https://github.com/svrcekmichal)

## Maintainer

Bruno Lemos ([@brunolemos](https://twitter.com/brunolemos) on twitter)