npm

Need private packages and team management tools?Check out npm Orgs. »

kkt

4.2.0 • Public • Published

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 kktjs/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 create 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/kktjs/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

Initialize the project from one of the examples:

$ 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.
  • typescript - Use an example of typescript.
  • 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

install

npm i kkt

Downloadsweekly downloads

102

version

4.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability