Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including cellular-scripts with all npm packages installed. Try it out:

cellular-scripts lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("cellular-scripts/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

cellular-scripts v1.8.0

CLI toolbox for React projects

Build Status Greenkeeper badge version

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.



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.


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



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.


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({
        FOO: null, // will be set to process.env.FOO
        BAR: 'bar', // defaults to 'bar'

Both values can be overwritten by setting environment variables.


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"]


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: [

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.


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"


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  


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free