cellular-scripts

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:

{
    "scripts": {
        "start": "cs start",
        "build": "cs build",
        "serve": "cs serve",
        "test": "cs test",
        "lint": "cs lint",
        "precommit": "cs precommit",
        "postmerge": "cs postmerge"
    }
}

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 as start.
• cs test [options] Runs the test. Options are passed on to Jest
• cs 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:

{
    "directories": {
        "src": "src",
        "dist": "dist",
        "static": "static",
        "template": "static"
    }
}

• 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 to dist verbatim.
• template directory containing an index.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 = require('cellular-scripts/webpack');
 
module.exports = function(env) {
    const config = webpackConfig(env);
    // 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.exports = function(env) {
    return webpackConfig({
        ...env,
        FOO: null, // will be set to process.env.FOO
        BAR: 'bar', // defaults to 'bar'
    });
});

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:

{
    "presets": ["cellular-scripts/babel"]
}

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:

module.exports = {
  extends: [
    require.resolve('cellular-scripts/eslint')
  ]
};

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:

{ 
    "singleQuote": true,
    "trailingComma": "es5"
}

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 = require('cellular-lint/lint-staged.config');
module.exports = Object.assign({}, defaults, {
  // custom config  
});