# @clearc2/c2-react-config

> Centralized project configuration for react projects.

Latest version **8.0.2** (published 2022-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @clearc2/c2-react-config
pnpm add @clearc2/c2-react-config
yarn add @clearc2/c2-react-config
bun add @clearc2/c2-react-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.0.2 |
| Published | 2022-09-28 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 35 |
| Unpacked size | 59.6 KB |
| Known vulnerabilities | 0 (+11 in 2 direct dependencies) |
| Install scripts | no |
| Author | David Adams |
| Maintainers | kevinbull, dadamssg, c2builds |

## Links

- npm: https://www.npmjs.com/package/@clearc2/c2-react-config
- npm.io page: https://npm.io/package/@clearc2/c2-react-config

## Dependencies (35)

- [precss](https://npm.io/package/precss.md) ^4.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.21.1
- [postcss](https://npm.io/package/postcss.md) ^7.0.0
- [webpack](https://npm.io/package/webpack.md) ^5.69.1
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.17.3
- [babel-core](https://npm.io/package/babel-core.md) ^7.0.0-bridge.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.6.0
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.5
- [@babel/node](https://npm.io/package/@babel/node.md) ^7.16.8
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.9.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.3
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1
- [react-refresh](https://npm.io/package/react-refresh.md) ^0.12.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.17.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.2.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.11
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.7.4
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.16.7
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.1
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.17.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.5.3
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.5.0
- [url-search-params-polyfill](https://npm.io/package/url-search-params-polyfill.md) ^8.1.1
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^3.4.1
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.17.0
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [@pmmmwh/react-refresh-webpack-plugin](https://npm.io/package/@pmmmwh/react-refresh-webpack-plugin.md) ^0.5.5
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.16.7
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.17.3

## Recent versions

- 8.0.2 (latest) — 2022-09-28
- 8.0.1 — 2022-04-18
- 8.0.0 — 2022-04-01
- 7.0.0 — 2022-03-24
- 6.0.0 — 2022-03-21
- 5.0.2 — 2022-03-11
- 5.0.1 — 2022-03-09
- 5.0.0 — 2022-03-01
- 4.0.1 — 2022-02-08
- 4.0.0 — 2022-01-24
- 3.1.0 — 2020-09-09
- 3.0.7 — 2020-02-10
- 3.0.6 — 2019-08-06
- 3.0.5 — 2019-07-09
- 3.0.4 — 2019-06-27
- … 9 more at https://npm.io/package/@clearc2/c2-react-config/versions

## README

# c2-react-config

Centralized project configuration for react projects.

## Install

```
yarn add @clearc2/c2-react-config
```

## ESLint

Install the eslint config and parser package:
```
yarn add --dev @clearc2/eslint-config-c2-react
```

Create a `.eslintrc` file in the root of your project with the following contents:

```json
{
  "extends": [
    "@clearc2/c2-react"
  ]
}
```

## Babel

Create a `babel.config.js` file in the root of your project with the following contents:

```js
// <project-dir>/babel.config.js
module.exports = require('@clearc2/c2-react-config').babelConfig
```

## PostCSS

Create a `postcss.config.js` file in the root your project with the following contents:

```js
module.exports = require('@clearc2/c2-react-config').postCSSConfig
```

## Webpack

Create a `webpack.config.js` file in the root of your project with the following contents:


```js
// <project-dir>/webpack.config.js
const path = require('path')
const {webpackConfig} = require('@clearc2/c2-react-config')

module.exports = (env) => {
  env.presetDir = path.join(__dirname, 'webpack')
  env.projectDir = __dirname
  return webpackConfig(env)
}

```

### Presets
This project contains several partial webpack configurations called "presets". These presets are merged together with the [webpack-merge](https://github.com/survivejs/webpack-merge) utility.

Presets can have both `development` and `production` versions. This is specified by the `--env.mode <mode>` command line
argument when using webpack or webpack-dev-server. Example:

```
npx webpack --env mode=development
```

`common` presets apply to both `development` and `production` modes.

### Included presets

#### `input`
Provides the entry points of the project. `common` preset enabled by default.

#### `output`
Configures the output. `common` preset enabled by default.

#### `babel`
Runs the `babel-loader` on `.js` files. `common` preset enabled by default.

#### `assets`
Handles font, images, audio files. `common` preset enabled by default.

#### `css`
Converts css to js in development. Extracts/optimizes css in production. `common` preset enabled by default.

#### `css-modules`
Enables css modules. Use `<name>.module.css` file naming. `common` preset enabled by default.

#### `dev-server`
Configures webpack-dev-server. `development` preset enabled by default.

#### `html`
Uses the `html-webpack-plugin` and uses `<project-root>/src/index.html` as the template. `common` preset enabled by default.

#### `source-map`
Configures the appropriate source map for development/production. `common` preset. **Not** enabled by default.

#### `progress`
Outputs the build progress in the cli. `common` preset enabled by default.

#### `clean`
Cleans the dist folder before builds using [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin). `common` preset enabled by default.

#### `optimize`
Minify/uglify output. `production` preset enabled by default.

#### `analyzer`
Inspect bundle output with the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). **Not** enabled by default.

### Summary

Common presets:
- `input`
- `output`
- `assets`
- `babel`
- `css`
- `css-modules`
- `html`
- `progress`
- `clean`
- `souce-map` - Not enabled by default
- `analyzer` - Not enabled by default

Development presets:
- `dev-server`

Production presets:
- `optimize`

### Customizing default presets
When you created your project's `webpack.config.js`, you provided a `presetDir`. This is where you can hold your project specific configurations.

For example, if you want to change the webpack-dev-server port:

```js
// <project-dir>/webpack/dev-server.development.js
const {webpackUtils} = require('@clearc2/c2-react-config')

module.exports = (env) => webpackUtils.extendPreset(env, 'dev-server.development',
  {
    devServer: {
      port: 8089
    }
  }
)

// you could choose not to `extendPreset` and return a completely new configuration.
```

Presets are functions that accept the `env` object and return configuration.

### Adding configuration
If you have project specific configuration that applies to both development and production, add a `<preset-name>.production.js` file. Example:

```js
// <project-dir>/webpack/provide.production.js
const webpack = require('webpack')

module.exports = (env) => ({
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    })
  ]
})
```

And then modify your `webpack.config.js` to customize the presets:

```js
// <project-dir>/webpack.config.js
const path = require('path')
const {webpackConfig} = require('@clearc2/c2-react-config')
const {presets} = webpackConfig

// add "provide" preset to common presets
presets.common = presets.common.concat(['provide'])

// add analyzer to inspect bundle on production output
presets.production = presets.production.concat(['analyzer'])

module.exports = (env) => {
  env.presetDir = path.join(__dirname, 'webpack')
  env.projectDir = __dirname
  return webpackConfig(env)
}

```

Presets will fall back to the production version if a development version is not found in development mode.

## Example
There is an example in the `example` directory which shows off css modules, a custom preset(`provide`), and illustrates how to install bootstrap.

---
_Source: https://npm.io/package/@clearc2/c2-react-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._