Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 18 days 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 (23 days 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)