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.

• Migrate from kkt 6.x to 7.x.
• Migrate from kkt 5.x to 6.x.
• Migrate from kkt 4.x to 5.x.

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

Features:

• ⏱ 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.

Usage

You will need Node.js installed on your system.

1npm install kkt

Open in CodeSandbox

Example

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

1$ npx create-kkt my-app -e uiw
2# or npm
3$ npm create kkt my-app -e `<Example Name>`
4# or yarn 
5$ yarn create kkt my-app -e `<Example Name>`

You can download the following examples directly. Download page.

• basic - The react base application. Open in CodeSandbox
• bundle - Package the UMD package for developing the React component library.
• bundle-node - Simple CLI for compiling a Node.js module into a single file.
• electron - Use an example of Electronjs.
• less - Use an example of Less. Open in CodeSandbox
• markdown - Use an example of Markdown. Open in CodeSandbox
• react-component-tsx - Create a project containing the website for the react component library.
• react-router - Use react-router for the project. Open in CodeSandbox
• scss - Use an example of Scss. Open in CodeSandbox
• stylus - Use an example of Stylus. Open in CodeSandbox
• typescript - Use an example of TypeScript. Open in CodeSandbox
• uiw - Use uiw for the project. Open in CodeSandbox

Tools

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

1npm install kkt --save-dev

1"dependencies": {
2  ...
3-  "react-scripts": "4.0.1",
4+  "kkt": "7.0.6",
5  ....
6},
7"scripts": {
8-  "start": "react-scripts start",
9+  "start": "kkt start",
10-  "build": "react-scripts build",
11+  "build": "kkt build",
12-  "test": "react-scripts test",
13+  "test": "kkt test",
14-  "eject": "react-scripts eject"
15},

⚠️ 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.

1# Start the Dev Server
2$ npm start
3# Build your app
4$ npm run build

Configuration File

Supports .kktrc.js and .kktrc.ts. @7.5+ above supports .cjs, .mjs, .ts, .js.

1.kktrc.js
2.kktrc.ts
3.kktrc.cjs
4.kktrc.mjs
5.config/kktrc.js
6.config/kktrc.ts
7.config/kktrc.cjs
8.config/kktrc.mjs
9kkt.config.js
10kkt.config.ts
11kkt.config.cjs
12kkt.config.mjs

1import express from 'express';
2import { Configuration } from 'webpack';
3import WebpackDevServer from 'webpack-dev-server';
4import { LoaderConfOptions, MockerAPIOptions, DevServerOptions } from 'kkt';
5
6export interface WebpackConfiguration extends Configuration {
7  devServer?: WebpackDevServer.Configuration;
8  /** Configuring the Proxy Manually */
9  proxySetup?: (app: express.Application) => MockerAPIOptions;
10}
11export declare type KKTRC = {
12  proxySetup?: (app: express.Application) => MockerAPIOptions;
13  devServer?: (config: WebpackDevServer.Configuration, options: DevServerOptions) => WebpackDevServer.Configuration;
14  default?: (conf: WebpackConfiguration, evn: 'development' | 'production', options: LoaderConfOptions) => WebpackConfiguration | Promise<WebpackConfiguration>;
15};

Base Configuration Example

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

Modify WebpackDevServer Configuration Example

1export const devServer = (config: WebpackDevServer.Configuration) => {
2  // Change the https certificate options to match your certificate, using the .env file to
3  // set the file paths & passphrase.
4  const fs = require('fs');
5  config.https = {
6    key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
7    cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
8    ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
9    passphrase: process.env.REACT_HTTPS_PASS
10  };
11  // Return your customised Webpack Development Server config.
12  return config;
13};

Configuring the Proxy Manually

1import express from 'express';
2import { createProxyMiddleware } from 'http-proxy-middleware';
3import { LoaderConfOptions, WebpackConfiguration, MockerAPIOptions } from 'kkt';
4export default (conf: WebpackConfiguration, evn: 'development' | 'production') => {
5  //....
6  conf.proxySetup = (app: express.Application): MockerAPIOptions => {
7    app.use('/api', createProxyMiddleware({
8      target: 'http://localhost:5000',
9      changeOrigin: true,
10    }));
11    return {
12      path: path.resolve('./mocker/index.js'),
13    };
14  };
15  return conf;
16}

Or use another way to manually configure the proxy.

1import express from 'express';
2import { createProxyMiddleware } from 'http-proxy-middleware';
3import { MockerAPIOptions } from 'kkt';
4/**
5 * Still available, may be removed in the future. (仍然可用，将来可能会被删除。) 
6 */
7export const proxySetup = (app: express.Application): MockerAPIOptions => {
8  app.use('/api', createProxyMiddleware({
9    target: 'http://localhost:5000',
10    changeOrigin: true,
11  }));
12  /**
13   * Mocker API Options
14   * https://www.npmjs.com/package/mocker-api
15   */
16  return {
17    path: path.resolve('./mocker/index.js'),
18    option: {
19      proxy: {
20        '/repos/(.*)': 'https://api.github.com/',
21      },
22      changeHost: true,
23    }
24  }
25}

Command Help

1Usage: kkt [start|build|test|doc] [--help|h]
2
3  Displays help information.
4
5Options:
6
7  --version, -v           Show version number
8  --help, -h              Displays help information.
9  --app-src               Specify the entry directory.
10  --docs                  Static asset preview in package(Dev mode works).
11  --no-open-browser       Do not open in browser.
12  --no-clear-console      Do not clear the command line information.
13
14Example:
15
16$ kkt build
17$ kkt build --app-src ./website
18$ kkt test
19$ kkt test --env=jsdom
20$ kkt test --env=jsdom --coverage
21$ kkt start
22$ kkt start --no-open-browser
23$ kkt start --watch
24$ kkt start --no-clear-console
25$ kkt start --app-src ./website
26# Static asset preview in "@uiw/doc" package.
27# Default preview: http://localhost:3000/_doc/
28$ kkt start --docs @uiw/doc/web
29# Specify a static website route "_uiw/doc"
30# Default preview: http://localhost:3000/_uiw/doc
31$ kkt start --docs @uiw/doc/web:_uiw/doc
32
33# Run static services separately
34$ kkt doc --path @uiw/doc/web
35$ kkt doc --path @uiw/doc/web:_uiw/doc --port 30002
36$ kkt doc --path @uiw/doc/web:_uiw/doc -p 30002
37$ 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:

1"homepage": "https://myusername.github.io/my-app",

or for a GitHub user page:

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

or for a custom domain page:

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

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

Plugins & Loader

• @kkt/less-modules
• @kkt/mocker-api
• @kkt/raw-modules
• @kkt/react-library
• @kkt/scope-plugin-options
• @kkt/stylus-modules

Development

Runs the project in development mode.

1# npm run bootstrap
2npm run hoist
3npm run build
4
5npm run lib:watch
6npm run kkt:watch
7
8npm run hoist

Production

Builds the app for production to the build folder.

1npm run build

Acknowledgements

@timarney for having created react-app-rewired.

Alternatives

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

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

MIT © Kenny Wong