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

7.5.5 • 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. @7.5+ above supports .cjs, .mjs, .ts, .js.

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
   * https://www.npmjs.com/package/mocker-api
  return {
    path: path.resolve('./mocker/index.js'),
    option: {
      proxy: {
        '/repos/(.*)': 'https://api.github.com/',
      changeHost: true,

Command Help

Usage: kkt [start|build|test|doc] [--help|h]

  Displays help information.


  --version, -v           Show version number
  --help, -h              Displays help information.
  --app-src               Specify the entry directory.
  --docs                  Static asset preview in package(Dev mode works).
  --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 test
$ kkt test --env=jsdom
$ kkt test --env=jsdom --coverage
$ kkt start
$ kkt start --no-open-browser
$ kkt start --watch
$ kkt start --no-clear-console
$ kkt start --app-src ./website
# Static asset preview in "@uiw/doc" package.
# Default preview: http://localhost:3000/_doc/
$ kkt start --docs @uiw/doc/web
# Specify a static website route "_uiw/doc"
# Default preview: http://localhost:3000/_uiw/doc
$ kkt start --docs @uiw/doc/web:_uiw/doc

# Run static services separately
$ kkt doc --path @uiw/doc/web
$ kkt doc --path @uiw/doc/web:_uiw/doc --port 30002
$ kkt doc --path @uiw/doc/web:_uiw/doc -p 30002
$ kkt doc --path ./build/doc -p 30002

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": "https://myusername.github.io/my-app",

or for a GitHub user page:

"homepage": "https://myusername.github.io",

or for a custom domain page:

"homepage": "https://mywebsite.com",

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 contributors.


MIT © Kenny Wong

Package Sidebar


npm i kkt

Weekly Downloads






Unpacked Size

125 kB

Total Files


Last publish


  • wcjiang
  • uiwjs