Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/kktjs/kkt

Create React apps with no build configuration, Cli tool for creating react apps.
https://github.com/kktjs/kkt
babel build-tools cli cra create-react-app kkt kkt-cli mocker react react-apps rematch typescript webpack zero-configuration
Last synced: 3 days ago
JSON representation
Create React apps with no build configuration, Cli tool for creating react apps.
Host: GitHub
URL: https://github.com/kktjs/kkt
Owner: kktjs
License: mit
Created: 2017-08-19T07:43:22.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2025-01-08T15:46:02.000Z (14 days ago)
Last Synced: 2025-01-10T15:37:12.906Z (12 days ago)
Topics: babel, build-tools, cli, cra, create-react-app, kkt, kkt-cli, mocker, react, react-apps, rematch, typescript, webpack, zero-configuration
Language: TypeScript
Homepage: https://kktjs.github.io/kkt
Size: 5.06 MB
Stars: 49
Watchers: 2
Forks: 11
Open Issues: 12
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

README

        


  

    

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



Create React apps with no build configuration, Cli tool for creating react apps. Another tool, [`kkt-ssr`](https://github.com/kktjs/kkt-ssr), Is a lightweight framework for static and server-rendered applications.

> - [Migrate from kkt 6.x to 7.x](https://github.com/kktjs/kkt/releases/tag/v7.0.0).  

> - [Migrate from kkt 5.x to 6.x](https://github.com/kktjs/kkt/issues/133).  

> - [Migrate from kkt 4.x to 5.x](https://github.com/kktjs/kkt-next/issues/1).  

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**](https://github.com/facebook/create-react-app) webpack configs without ejecting

- 💝 Expose the configuration file entry and support webpack configuration.

- 🚀 Supports [**creat-kkt**](https://github.com/kktjs/create-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`](https://github.com/kktjs/ncc) support.

## Usage

You will need [`Node.js`](https://nodejs.org) installed on your system. 

```bash

npm install kkt

```

## Open in CodeSandbox

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/s/github/kktjs/kkt-codesandbox-tamplate)

## Example

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

```bash

$ npx create-kkt my-app -e uiw

# or npm

$ npm create kkt my-app -e ``

# or yarn 

$ yarn create kkt my-app -e ``

```

You can download the following examples directly. [Download page](https://kktjs.github.io/zip/).

- [**`basic`**](https://github.com/kktjs/kkt/tree/master/example/basic) - The [react](https://github.com/facebook/react) base application. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/basic)

- [**`bundle`**](https://github.com/kktjs/kkt/tree/master/example/bundle) - Package the UMD package for developing the React component library.

- [**`bundle-node`**](https://github.com/kktjs/kkt/tree/master/example/bundle-node) - Simple CLI for compiling a Node.js module into a single file.

- [**`electron`**](https://github.com/kktjs/kkt/tree/master/example/electron) - Use an example of [`Electronjs`](https://github.com/electron).

- [**`less`**](https://github.com/kktjs/kkt/tree/master/example/less) - Use an example of `Less`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/less)

- [**`markdown`**](https://github.com/kktjs/kkt/tree/master/example/markdown) - Use an example of `Markdown`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/markdown)

- [**`react-component-tsx`**](https://github.com/kktjs/kkt/tree/master/example/react-component-tsx) - Create a project containing the website for the react component library.

- [**`react-router`**](https://github.com/kktjs/kkt/tree/master/example/react-router) - Use [`react-router`](https://github.com/remix-run/react-router) for the project. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/react-router)

- [**`scss`**](https://github.com/kktjs/kkt/tree/master/example/scss) - Use an example of `Scss`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/scss)

- [**`stylus`**](https://github.com/kktjs/kkt/tree/master/example/stylus) - Use an example of `Stylus`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/stylus)

- [**`typescript`**](https://github.com/kktjs/kkt/tree/master/example/typescript) - Use an example of `TypeScript`. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/typescript)

- [**`uiw`**](https://github.com/kktjs/kkt/tree/master/example/uiw) - Use [`uiw`](https://uiwjs.github.io/) for the project. [`Open in CodeSandbox`](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/uiw)

### Tools

[`@kkt/ncc`](https://github.com/kktjs/kkt/tree/master/packages/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](https://github.com/facebook/create-react-app) and then rewire it.

```shell

npm install kkt --save-dev

```

```diff

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

```shell

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

```ts

.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

```

```typescript

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;

};

```

### Base Configuration Example

```typescript

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

```typescript

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

```typescript

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.

```typescript

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

```bash

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:

```json

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

```

or for a GitHub user page:

```json

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

```

or for a custom domain page:

```json

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

```

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

### Plugins & Loader

- [@kkt/less-modules](https://github.com/kktjs/kkt/tree/master/packages/less-modules)

- ~~[@kkt/mocker-api](https://github.com/kktjs/kkt/tree/v6/packages/mocker-api)~~

- [@kkt/raw-modules](https://github.com/kktjs/kkt/tree/master/packages/raw-modules)

- [@kkt/react-library](https://github.com/kktjs/kkt/tree/master/packages/react-library)

- [@kkt/scope-plugin-options](https://github.com/kktjs/kkt/tree/master/packages/scope-plugin-options)

- [@kkt/stylus-modules](https://github.com/kktjs/kkt/tree/master/packages/stylus-modules)

### Development

Runs the project in development mode.  

```bash

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

```bash

npm run build

```

### Acknowledgements

[@timarney](https://github.com/timarney) for having created [react-app-rewired](https://github.com/timarney/react-app-rewired).

**Alternatives**

- [rescripts](https://github.com/rescripts/rescripts), an alternative framework for extending CRA configurations (supports 2.0+).

- [react-scripts-rewired](https://github.com/marcopeg/create-react-app/blob/master/packages/react-scripts/README.md) for a fork of this project that aims to support CRA 2.0

- [craco](https://github.com/sharegate/craco) Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.

- [react-app](https://github.com/kriasoft/react-app) Create React App with server-side code support.

- [create-react-app-esbuild](https://github.com/pradel/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](https://github.com/jaywcjlove/github-action-contributors).

## License

[MIT © Kenny Wong](https://github.com/kktjs/kkt/blob/master/LICENSE)