Skip to content
Create React apps with no build configuration, Cli tool for creating react apps.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.bin
conf
example
plugs
script
utils
website
.babelrc.js
.editorconfig
.eslintrc.js
.gitignore
.npmignore
LICENSE
README.md
babel.js
package-lock.json
package.json

README.md

Create React apps with no build configuration, Cli tool for creating react apps. Another tool, kkt-ssr, Is a lightweight framework for static and server-rendered applications.

Usage

You will need Node.js installed on your system.

npm install -g kkt
kkt create my-app # create project

Quick Start

npx kkt create my-app
cd my-app
npm start

You can also initialize a project from one of the examples. Example from jaywcjlove/kkt example-path.

# Using the template method
npx kkt create my-app -e rematch

or

npm install -g kkt
# Create project, Using the template method
kkt my-app -e rematch
cd my-app # Enter the directory
npm start # Start service

KKT Help

Usage: kkt <command> [options]

Rapid React development, Cli tool for creating react apps.

Options:
  -v, --version                output the version number
  -h, --help                   output usage information

Commands:
  create [options] <app-name>  create a new project powered by kkt
  build [options]              Builds the app for production to the dist folder.
  start                        Will create a web server, Runs the app in development mode.
  watch                        Does not provide web server, Listen only for file change generation files
  test [options]               Runs the app in development mode.
  deploy [options]             Push the specified directory to the gh-pages branch.

  Examples:

    $ kkt start
    $ kkt build
    $ kkt watch
    $ kkt test --env=jsdom
    $ kkt test --env=jsdom --coverage

create options

Usage: create [options] <app-name>

create a new project powered by kkt

Options:
  -e, --example <example-path>  Example from https://github.com/jaywcjlove/kkt/tree/master/example example-path (default: "default")
  -r, --registry <url>          Use specified npm registry when installing dependencies (only for npm)
  -f, --force                   Overwrite target directory if it exists
  -h, --help                    output usage information

  Examples:

    # create a new project with an official template
    $ kkt create my-project
    $ kkt create my-project --example rematch
    $ kkt create my-project -e rematch

build options

Usage: build [options]

Builds the app for production to the dist folder.

Options:
  -b, --bundle [value]    Bundles a minified and unminified version.
  -e, --emptyDir [value]  Empty the DIST directory before compiling. (default: true)
  --no-emptyDir           Empty the DIST directory before compiling.
  -h, --help              output usage information

Config

module.exports = {
  babel: Function,
  babelInclude: Array,
  config: Function,
  plugins: Array,
}

Webpack Config

Modify the Webpack configuration
module.exports = {
  config: (conf, { dev, env }, webpack) => {
    if (dev) {
      conf.devServer.before = (app) => {
        apiMocker(app, path.resolve('./mocker/index.js'), {
          proxy: {
            '/repos/*': 'https://api.github.com/',
          },
          changeHost: true,
        });
      };
    }
    // or
    if (conf.mode === 'development') {
      // Webpack configuration changed in `development` mode
    }
    if (conf.mode === 'production') {
      // Webpack configuration changed in `production` mode
    }
    return conf;
  },
};
Add a Rules configuration
module.exports = {
  config: (conf, { dev, env }, webpack) => {
    conf.module.rules = [
      ...conf.module.rules,
      {
        test: /\.md$/,
        loader: 'raw-loader',
      },
    ]
    return conf;
  },
};
Add a plugins configuration
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  config: (conf, { dev, env }, webpack) => {
    conf.plugins = [
      ...conf.plugins,
      new CleanWebpackPlugin(paths.appBuildDist, {
        root: process.cwd(),
      }),
    ]
    return conf;
  },
};
devServer.https - Enable HTTPS
module.exports = {
  config: (conf, { dev, env }, webpack) => {
    if (dev) {
      conf.devServer.https = true;
    }
    return conf;
  },
};
devServer.proxy - Use the Webpack proxy
const path = require('path');
const apiMocker = require('mocker-api');

module.exports = {
  // Modify the webpack config
  config: (conf, { dev, env }, webpack) => {
    if (env === 'prod') {
    }
    if (dev) {
      conf.devServer.proxy = {
        '/api': {
          target: 'http://127.0.0.1:1130',
          changeOrigin: true,
        },
        // websokect proxy
        '/api/ws': {
          target: 'ws://localhost:9981',
          ws: true
        },
      }
    }
    return conf;
  },
};

Mock API

Use the mocker-api simulation API. Add the mocker/index.js file to the project root directory

const proxy = {
  'GET /api/user': { id: 1, username: 'kenny', sex: 6 },
  'GET /api/user/list': [
    { id: 1, username: 'kenny', sex: 6 }, 
    { id: 2, username: 'kkt', sex: 6 }
  ],
  'POST /api/login/account': (req, res) => {
    const { password, username } = req.body;
    if (password === '888888' && username === 'admin') {
      return res.json({
        status: 'ok',
        code: 0,
        token: "kkt",
        data: { id: 1, username: 'kktname', sex: 6 }
      });
    } else {
      return res.json({
        status: 'error',
        code: 403
      });
    }
  }
}
module.exports = proxy;

Load the mocker configuration.

const path = require('path');
const apiMocker = require('mocker-api');

module.exports = {
  // Modify the webpack config
  config: (conf, { dev, env }, webpack) => {
    if (env === 'prod') {
    }
    if (dev) {
      conf.devServer.before = (app) => {
        apiMocker(app, path.resolve('./mocker/index.js'), {
          proxy: {
            '/repos/*': 'https://api.github.com/',
          },
          changeHost: true,
        });
      };
    }
    return conf;
  },
};

Example

$ npx kkt create my-app -e `<Example Name>`
  • default - The react base application.
  • chrome-plugin - For chrome browser plugin development example.
  • bundle - For chrome browser plugin development.
  • less - Use an example of less.
  • scss - Use an example of scss.
  • markdown - Use an example of markdown.
  • react-component - Create a project for the react component library.
  • rematch - Use rematch for the project.
  • uiw - Use uiw for the project.

License

MIT © Kenny Wong

You can’t perform that action at this time.