kkt

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.

npm install kkt

Open in CodeSandbox

Example

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.

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

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.

.kktrc.js
.kktrc.ts
.kktrc.cjs
.kktrc.mjs
.config/kktrc.js
.config/kktrc.ts
.config/kktrc.cjs
.config/kktrc.mjs
kkt.config.js
kkt.config.ts
kkt.config.cjs
kkt.config.mjs

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.

Options:

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

Example:

$ 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

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

# npm run bootstrap
npm run hoist
npm run build

npm run lib:watch
npm run kkt:watch

npm run hoist

Production

Builds the app for production to the build folder.

npm 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