Usage no npm install needed!

<script type="module">
  import uxiCli from 'https://cdn.skypack.dev/uxi-cli';



jest + eslint + webpack + babel + webpack-dev-server

  • jest + enzyme + snapshot
  • eslint (airbnb)
  • webpack 4
  • webpack-dev-server
  • babel, babel-loader:
    • latest ('env', 'react', 'stage-0')
    • react jsx
    • object spread


  • npm i uxi-cli

print help:

$ node_modules/.bin/uxi-cli:


in the package.json:

  "scripts": {
    "help": "uxi-cli",
    "dev": "uxi-cli dev",
    "build": "uxi-cli build",
    "lint": "uxi-cli lint",
    "test": "uxi-cli test",
    "test:coverage": "uxi-cli test:coverage",
    "test:watch": "uxi-cli test:watch",
    "pack": "uxi-cli pack",


  • test
  • test:watch
  • test:coverage
  • lint
  • build
  • dev
  • pack

Default behaviour:

  • test scans a target directory (default to .src/) for files under a folder named __test__ or files that end in .test.js

  • test and lint default to targeting ./src folder, but you can say ortherwise by passing the path as the first argument:

    $ uxi-cli lint ./myFolder or $ uxi-cli test ./source

  • build defaults to using ./src/index.js as source and .build/app.js as output

Extending config:

To overwrire webpack config, or some part of it, for example for the dev command, create a uxi.dev.extend.js or a uxi.build.extend.js for the build command. uxi-cli will pick up this file if it exists.

The file must export, as default, a function. This function will be passed the default uxi-cli config for the relevant command. You can extend it at this moment and then return it.

For instance, here's the extended config for the uxi doc website:

const path = require('path');

module.exports = (config) => {
  // here we're ading 'raw-loader' for md files
    test: /\.md$/,
    use: 'raw-loader',
    exclude: /node_modules/,

  // custom port for dev server:
  config.devServer.port = 8989;
  config.entry[1].replace(/(:\d*)$/, ':8989');

  // adding aliases
  config.resolve.alias = {
    uxi: path.resolve(__dirname, '../src'),
    'styled-components': path.resolve(__dirname, 'node_modules/styled-components'),
    'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
    'react': path.resolve(__dirname, 'node_modules/react'),

  return config;

uxi-cli dev

This is a pre-packaged webpack configuration to get started quickly with any React application.

Please look at the examples folder to see how you can customize the webpack configuration.

Webpack dev-server:

- At the root of the project, create an index.html containg a element with an id of `root` for react to attach to be used by dev-server
  <div id="root"></div>

- webpack-dev-server contentBase default is '/'
- default port is `3100`

uxi-cli build

Building your application for a production usage.

uxi-cli pack

The command uxi-cli pack will help you if you want to publish a NPM package. It will build the src folder and will copy the appropriate files that should be present for a valid NPM package (package.json and README.md).