Nutty Professor Movie

    TypeScript icon, indicating that this package has built-in type declarations

    7.2.3 • Public • Published


    Build KKT & Example Github issues Github Forks Github Stars Github Releases npm version

    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.

    As of KKT 6.x this repo is "lightly" maintained mostly by the community at this point.


    • The code was rewritten using TypeScript.
    • ♻️ Recompile the code when project files get added, removed or modified.
    • 📚 Readable source code that encourages learning and contribution
    • ⚛️ Override create-react-app webpack configs without ejecting
    • 💝 Expose the configuration file entry and support webpack configuration.
    • 🚀 Supports creat-kkt to create different instances.
    • Jest test runner setup with defaults kkt test
    • 🐒 Simple CLI for compiling Node.js/Web modules to a single file with @kkt/ncc support.


    You will need Node.js installed on your system.

    npm install kkt

    Open in CodeSandbox

    Open in CodeSandbox


    Initialize the project from one of the examples, Let's quickly create a react application:

    $ npx create-kkt my-app -e uiw
    # or npm
    $ npm create kkt my-app -e `<Example Name>`
    # or yarn 
    $ yarn create kkt my-app -e `<Example Name>`

    You can download the following examples directly. Download page.


    @kkt/ncc simple CLI for compiling a Node.js module into a single file. Supports TypeScript.

    How to rewire your create-react-app project

    Create your app using create-react-app and then rewire it.

    npm install kkt --save-dev
    "dependencies": {
    -  "react-scripts": "4.0.1",
    +  "kkt": "7.0.6",
    "scripts": {
    -  "start": "react-scripts start",
    +  "start": "kkt start",
    -  "build": "react-scripts build",
    +  "build": "kkt build",
    -  "test": "react-scripts test",
    +  "test": "kkt test",
    -  "eject": "react-scripts eject"

    ⚠️ Note: Do NOT flip the call for the eject script. That gets run only once for a project, after which you are given full control over the webpack configuration making kkt no longer required. There are no configuration options to rewire for the eject script.

    # Start the Dev Server
    $ npm start
    # Build your app
    $ npm run build

    Configuration File

    Supports .kktrc.js and .kktrc.ts.

    import express from 'express';
    import { Configuration } from 'webpack';
    import WebpackDevServer from 'webpack-dev-server';
    import { LoaderConfOptions, MockerAPIOptions, DevServerOptions } from 'kkt';
    export interface WebpackConfiguration extends Configuration {
      devServer?: WebpackDevServer.Configuration;
      /** Configuring the Proxy Manually */
      proxySetup?: (app: express.Application) => MockerAPIOptions;
    export declare type KKTRC = {
      proxySetup?: (app: express.Application) => MockerAPIOptions;
      devServer?: (config: WebpackDevServer.Configuration, options: DevServerOptions) => WebpackDevServer.Configuration;
      default?: (conf: WebpackConfiguration, evn: 'development' | 'production', options: LoaderConfOptions) => WebpackConfiguration | Promise<WebpackConfiguration>;

    Base Configuration Example

    import webpack from 'webpack';
    import WebpackDevServer from 'webpack-dev-server';
    import lessModules from '@kkt/less-modules';
    import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
    export default (conf: WebpackConfiguration, env: string, options: LoaderConfOptions) => {
      // The Webpack config to use when compiling your react app for development or production.
      // ...add your webpack config
      conf = lessModules(conf, env, options);
      return conf;

    Modify WebpackDevServer Configuration Example

    export const devServer = (config: WebpackDevServer.Configuration) => {
      // Change the https certificate options to match your certificate, using the .env file to
      // set the file paths & passphrase.
      const fs = require('fs');
      config.https = {
        key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
        cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
        ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
        passphrase: process.env.REACT_HTTPS_PASS
      // Return your customised Webpack Development Server config.
      return config;

    Configuring the Proxy Manually

    import express from 'express';
    import { createProxyMiddleware } from 'http-proxy-middleware';
    import { LoaderConfOptions, WebpackConfiguration, MockerAPIOptions } from 'kkt';
    export default (conf: WebpackConfiguration, evn: 'development' | 'production') => {
      conf.proxySetup = (app: express.Application): MockerAPIOptions => {
        app.use('/api', createProxyMiddleware({
          target: 'http://localhost:5000',
          changeOrigin: true,
        return {
          path: path.resolve('./mocker/index.js'),
      return conf;

    Or use another way to manually configure the proxy.

    import express from 'express';
    import { createProxyMiddleware } from 'http-proxy-middleware';
    import { MockerAPIOptions } from 'kkt';
     * Still available, may be removed in the future. (仍然可用,将来可能会被删除。) 
    export const proxySetup = (app: express.Application): MockerAPIOptions => {
      app.use('/api', createProxyMiddleware({
        target: 'http://localhost:5000',
        changeOrigin: true,
       * Mocker API Options
      return {
        path: path.resolve('./mocker/index.js'),
        option: {
          proxy: {
            '/repos/(.*)': '',
          changeHost: true,

    Command Help

    Usage: kkt [start|build|test] [--help|h]
    Displays help information.
      --version, -v Show version number
      --help, -h Displays help information.
      --app-src, Specify the entry directory.
      --no-open-browser, Do not open in browser.
      --no-clear-console, Do not clear the command line information.
    $ kkt build
    $ kkt build --app-src ./website
    $ kkt start
    $ kkt start --no-open-browser
    $ kkt start --no-clear-console
    $ kkt start --app-src ./website
    $ kkt test

    Home Page

    Add homepage to package.json

    The step below is important!

    Open your package.json and add a homepage field for your project:

    "homepage": "",

    or for a GitHub user page:

    "homepage": "",

    or for a custom domain page:

    "homepage": "",

    KKT uses the homepage field to determine the root URL in the built HTML file.

    Plugins & Loader


    Runs the project in development mode.

    # npm run bootstrap
    npm run hoist
    npm run build
    npm run lib:watch
    npm run kkt:watch
    npm run hoist


    Builds the app for production to the build folder.

    npm run build


    @timarney for having created react-app-rewired.


    • rescripts, an alternative framework for extending CRA configurations (supports 2.0+).
    • react-scripts-rewired for a fork of this project that aims to support CRA 2.0
    • craco Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.
    • react-app Create React App with server-side code support.
    • create-react-app-esbuild Use esbuild in your create-react-app for faster compilation, development and tests.


    As always, thanks to our amazing contributors!

    Made with github-action-contributors.


    MIT © Kenny Wong


    npm i kkt

    DownloadsWeekly Downloads






    Unpacked Size

    170 kB

    Total Files


    Last publish


    • wcjiang