This is a drop-in replacement for react-scripts that allows you to optionally provide custom configurations for webpack, Babel, ESLint, prettier, lint-staged and Jest.
Setup
Quickstart
You can bootstrap new projects via create-react-app:
npx create-react-app --scripts-version cellular-scripts myapp
cd myapp
npm start
Existing projects
For existing projects run npm i -D cellular-scripts
, remove all the devDependencies that are already provided by cellular-scripts
and modify the scripts section of your package.json:
Note: The precommit
and postmerge
npm-scripts are Git-hooks that will be run by husky.
Modify your webpack, Babel and ESLint config files to extend the settings that come with cellular-scripts
or remove your config files altogether if the defaults work for your project.
CLI
The cellular-scripts
package provides a binary called cs
that takes the name of a script as first argument:
cs start [options]
Starts a development server. Options are passed to webpack-dev-server.cs build [options]
Creates a production build. Options are passed to webpack.cs serve
Serves a previously built production version. Same options asstart
.cs test [options]
Runs the test. Options are passed on to Jestcs lint [options]
Runs the linter. Options are passed to ESLint.cs precommit
Runs lint-staged.cs postmerge
Runs install-deps-postmerge.
When run via npm use --
to pass options on to the script:
npm start -- --port 8080 --open
Configuration
Directories
The directory layout can be customized via your project's package.json:
src
where the source files are located.src/index.js
is the default webpack entry.dist
where webpack will place the output of production builds.static
files that will be copied todist
verbatim.template
directory containing anindex.html
that will be processed by the html-webpack-plugin.
Webpack
You can provide a custom webpack configuration by placing a webpack.config.js
file in your project's root directory.
You can modify the default configuration like this:
const webpackConfig = ; module { const config = ; // modify default config and return it return config;}
The passed in env
is either {prod: true}
or {dev: true}
depending on the script that was used (build or start).
Make sure to pass this information on to the webpackConfig
function.
You can pass additional environment entries which will be exposed via the webpack DefinePlugin:
module { return ;});
Both values can be overwritten by setting environment variables.
Babel
Under the hood babel-preset-cellular is used to transpile the source code.
Files under node_modules
are run through Babel too, but with a much simpler configuration that only applies babel-preset-env
.
Custom Babel Configuration
You can override the default configuration by placing a .babelrc
file in your project's root or by adding a babel
property to package.json
.
To extend the default config, add it as a preset:
ESLint
You can override the default configuration by placing a .eslintrc.js
file in your project's root or by adding a eslintConfig
property to package.json
.
The presence of such a file will also allow IDEs to pick up your configuration, which is why our create-react-app
template will create the following .eslintrc.js
:
moduleexports = extends: require ;
NOTE: The default config won't work if cellular-scripts
are npm-linked or installed with an older npm version that doesn't flatten the dependency tree. See this GitHub issue for details.
Prettier
You can override the default configuration by placing a .prettierrc
or .prettier.config.js
file in your project's root or by adding a prettier
property to package.json
.
The default configuration is:
lint-staged
By default lint-staged will run cs lint --fix
and optionally flow focused-check
(if flow-bin is a dependency) followed by git add
on all staged .js
, .mjs
and .jsx
files.
You can override the default configuration by placing a .lintstagedrc
or .lint-staged.config.js
file in your project's root or by adding a lint-staged
property to package.json
:
const defaults = ;moduleexports = Object;